Flash from the Get-Go:

Beginning to Intermediate Skills

Staci Trekles Milligan

Clinical Assistant Professor

Purdue University Calumet

Objectives

Participants will be able to:Participants will be able to:

Utilize the interface commands, including drawing tools, Utilize the interface commands, including drawing tools, layer manipulation, and timeline controlslayer manipulation, and timeline controls

Create simple animations using shape and motion Create simple animations using shape and motion tweenstweens

Use the motion guide tools to create more advanced Use the motion guide tools to create more advanced animationsanimations

Utilize the photo slideshow and quiz templates available Utilize the photo slideshow and quiz templates available in Flash to create their own custom quizzes and picture in Flash to create their own custom quizzes and picture galleriesgalleries

Publish Flash documents for the WebPublish Flash documents for the Web

Objectives

Participants will be able to:Participants will be able to:

Import video files into Flash animationsImport video files into Flash animations

Create simple interactions within animations using Create simple interactions within animations using ActionScript 2ActionScript 2

Create fully customizable, component-based self-check Create fully customizable, component-based self-check quizzesquizzes

Add “quicktip” interactions to websites or Flash-based Add “quicktip” interactions to websites or Flash-based animations and quizzesanimations and quizzes

Utilize “drag and drop” interactions to create memory or Utilize “drag and drop” interactions to create memory or learning games/quizzeslearning games/quizzes

What is Flash?

Flash is an authoring environment capable of Flash is an authoring environment capable of producing everything from simple animations producing everything from simple animations to fully interactive experiences such as games to fully interactive experiences such as games or quizzesor quizzes

Primarily designed to produce media for the Primarily designed to produce media for the Web, but Flash animations can be added to Web, but Flash animations can be added to PowerPoint, digital videos, and even merged PowerPoint, digital videos, and even merged into other Flash animationsinto other Flash animations

Why use Flash?

Flash allows even the beginner to create high-Flash allows even the beginner to create high-impact visuals to enhance a presentation or impact visuals to enhance a presentation or Web page with illustration or decoration (or Web page with illustration or decoration (or both)both)

Slide shows, quizzes, and other kinds of Slide shows, quizzes, and other kinds of interactive experiences can be designed to interactive experiences can be designed to your exact specifications, giving you greater your exact specifications, giving you greater control over your teaching materialscontrol over your teaching materials

Things to Consider

Entire websites should never be designed in Flash; Entire websites should never be designed in Flash; they are not able to be accessed by users with they are not able to be accessed by users with disabilitiesdisabilities

Too many “flashy” animations can be distracting Too many “flashy” animations can be distracting for some users – exercise caution when using a for some users – exercise caution when using a great deal of movement on a single page or slide great deal of movement on a single page or slide

Flash is not an “easy” program to get the hang of, Flash is not an “easy” program to get the hang of, and for many the learning curve can be daunting; and for many the learning curve can be daunting; take it slow as you learn and remember that no take it slow as you learn and remember that no one becomes an expert overnight!one becomes an expert overnight!

Some Flash Lingo

TimelineTimeline: The line along the top of the Flash workspace : The line along the top of the Flash workspace which holds each Frame, from 1 to infinity; allows Flash which holds each Frame, from 1 to infinity; allows Flash to display animations frame-by-frame, much like a to display animations frame-by-frame, much like a filmstrip or a child’s “animated” flip book. filmstrip or a child’s “animated” flip book.

FrameFrame: An individual moment in time within the : An individual moment in time within the animation; click on any frame in the timeline to see animation; click on any frame in the timeline to see what is happening or displayed on that framewhat is happening or displayed on that frame

KeyframeKeyframe: A special frame where something can be : A special frame where something can be designated to change or happen; i.e., a ball moving left designated to change or happen; i.e., a ball moving left can be told to start moving to the right at a keyframecan be told to start moving to the right at a keyframe

More Flash Lingo

LayerLayer: Individual “tracks” of the timeline; allows : Individual “tracks” of the timeline; allows different elements to do different things at the same different elements to do different things at the same time by adding each element to its own layertime by adding each element to its own layer

StageStage: Just like in theater, this is where the action : Just like in theater, this is where the action happens, or where the graphical and content happens, or where the graphical and content elements of your work are put together and elements of your work are put together and displayeddisplayed

SceneScene: Allows you to organize your animation more : Allows you to organize your animation more easily; however, they are best used in longer easily; however, they are best used in longer animationsanimations

Timeline – Keyframes will have a dot inside themThe first frame is always a keyframe

List of layers

Stage

Scenes

More Flash Lingo

ActionScriptActionScript: The programming language of : The programming language of Flash; version 2.0 uses more natural language Flash; version 2.0 uses more natural language and is best suited for beginners and work and is best suited for beginners and work involving basic kinds of tasks, while version 3.0 involving basic kinds of tasks, while version 3.0 is designed for higher mathematical functionsis designed for higher mathematical functions

InteractionInteraction: Term for any time ActionScript is : Term for any time ActionScript is used to allow the user to do something within used to allow the user to do something within the Flash animation, such as stop or start the the Flash animation, such as stop or start the animation, select a button, or move an objectanimation, select a button, or move an object

Publishing Flash Documents

Adobe Flash allows you to create, edit, and test Adobe Flash allows you to create, edit, and test animations in the FLA format ONLYanimations in the FLA format ONLY

However, in order to use and share those However, in order to use and share those animations with others, you need to Publish animations with others, you need to Publish your work as an SWF documentyour work as an SWF document

Do this from the File menu; once you publish, Do this from the File menu; once you publish, you will have a final product that can be you will have a final product that can be inserted into a web page, added to a inserted into a web page, added to a PowerPoint, and morePowerPoint, and more

Resources

Books:Books:

The Web Collection Revealed: Adobe Dreamweaver, The Web Collection Revealed: Adobe Dreamweaver, Flash, and FireworksFlash, and Fireworks (Thomson-Delmar Learning) (Thomson-Delmar Learning)

Flash CS3/CS4 Professional Visual QuickStart Guide Flash CS3/CS4 Professional Visual QuickStart Guide (Peachpit Press)(Peachpit Press)

Adobe Flash How-Tos: 100 Essential TechniquesAdobe Flash How-Tos: 100 Essential Techniques (Adobe Press)(Adobe Press)

Flash CS3/CS4: The Missing Manual Flash CS3/CS4: The Missing Manual (O’Reilly Press)(O’Reilly Press)

Resources

Tutorials from this workshop and more: Tutorials from this workshop and more: http://education.calumet.purdue.edu/Tutorials/HECC

Flashkit.com - Excellent Flash developer resource: Flashkit.com - Excellent Flash developer resource: http://www.flashkit.com/

Flash tutorials with lots of useful info: Flash tutorials with lots of useful info: http://www.entheosweb.com/Flash/default.asp

Adobe Flash Tutorial/Support Center: Adobe Flash Tutorial/Support Center: http://www.adobe.com/support/flash/tutorial_index.html

Clipart and Media Sources

Gimp Savoy Photo Archive, Gimp Savoy Photo Archive, http://gimp-savvy.com/PHOTO-ARCHIVE

DHD Multimedia Gallery, DHD Multimedia Gallery, http://gallery.hd.org/index.jsp

Image After, Image After, http://www.imageafter.com

Pics for Learning, Pics for Learning, http://pics4learning.com

More Media Sources

The Smithsonian, http://smithsonianimages.si.edu The Smithsonian, http://smithsonianimages.si.edu

Creative Commons: Creative Commons: http://www.creativecommons.orghttp://www.creativecommons.org

Wikimedia, http://www.wikimedia.org Wikimedia, http://www.wikimedia.org

AKM Music, http://www.akmmusic.co.uk/AKM Music, http://www.akmmusic.co.uk/

Absolute Sound Effects Library, Absolute Sound Effects Library, http://www.grsites.com/sounds/ http://www.grsites.com/sounds/

About Staci

My blog: http://stacimilligan.edublogs.orgMy blog: http://stacimilligan.edublogs.org

My website: My website: http://education.calumet.purdue.edu/Faculty/trehttp://education.calumet.purdue.edu/Faculty/trekleskles

Purdue Calumet Graduate Studies and license Purdue Calumet Graduate Studies and license renewal program: renewal program: http://www.calumet.purdue.edu/education/grad http://www.calumet.purdue.edu/education/grad