Exercise : Animated Navigation Structure in Flash

1. Exercise : Animated Navigation Structure in Flash • Develop Answers to “What did you learn in ITI program?” “What do you have to offer?” “What are your passions?”  Develop Major Themes • Choose Active Words to Represent Major Themes and Categories • Decide on Overall Navigation Layout • Create Animated Navigation Buttons • Up_Button– whose “Down” state matches states of Down_Button • Add Interactivity using ActionScript • Create “Scene” for Each Category / Theme

2. 1. “Learned in ITI program?” and “To Offer?” • Review Classes Taken • Key Concepts • Key Learning Experiences • What could be of interest to an Employer? • How can you showcase • Your understanding • Ability to communicate effectively • Your passions • Your portfolio

3. 2. Choose Words for Major Themes • Active, Short Words • Provide “Sense of Direction” • 3. Decide on Overall Navigation Layout • Vertical versus Horizontal • Allocate Space for Animated Buttons • 4. Create Animated Navigation Buttons • Decide how to Visualize Different States • “UP”, “OVER”, “DOWN” • Size / Color / Style of “Text” • Color / Size of “Background” • Find and Import Image(s) suitable for Primary Categories • Flash Projects by ITI Students • Link to Previous Projects

4. Flash Concepts and Demos - Overview • Build Flash Website with Animated Navigation Structure • Unit 4 • Decide on Overall Navigation Layout, Import Images & Organize Assets • Create Animations for Navigation Buttons • Create "UP" Buttons • Create "Down" Buttons • Make Button Instance Interactive • Create Scenes and Swap in “Down” Button

5. Flash Demonstration – Unit 4 • Decide on Overall Navigation Layout, Import Images & Organize Assets • Create Animations for Navigation Buttons • Create "UP" Buttons • Create "Down" Buttons • Make Button Instance Interactive • Create Scenes and Swap in “Down” Button

6. Step 0 – Download files, Launch Flash, Create Document • Download Files • http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoVis_ITI/videodemosFlash.html • Launch Flash • Create Flash Document and Set its Properties • File > New • Modify > Document or use Property Inspector • Frame Rate = 15 Dimensions = 640 x 480 Background color = White 800 x 600 • Using Grid, Rulers and Guides • Rulers View > Rulers • Guides • View > Guides > Show Guides

7. Step 1 – Overall Navigation Layout and Organize Assets • Decide on Overall Navigation Layout • 1) Create layers for "background", "navigation", "stage" ... • 2) Create Guides for Navigation Text and Images • Import Images for Navigation • 1) Resize to fit allocated space (or "create to spec" in image editing program). • 2) Convert images into Graphic Symbols. • Organize Assets • 1) Open "Library" window. • 2) Click on "Folder" icon to create folders for "Images", "Buttons" ...

8. Step 2 – Create Animations for Navigation Buttons • 1) Create "Movie" symbol using "Insert > New Symbol". • 2) Drag "Graphic Symbol“ onto Stage of Animation (creates instance) • 3) Add keyframes. • 4) For each keyframe, apply effects(select instance on stage to apply Alpha effect). • 5) Animate by applying "tweening" • 6) Select last keyframe, open "Actions" window (can use Right-Click) and type "stop ();" (so that the animation does loop). • Make sure "Frame" is selected by checking "Actions for ..." the heading in top left corner.

9. Step 3 – Create "UP" Buttons • 1) Insert "Button" symbol. • 2) Create layers and guides for text and animation. • 3) "UP" state - create text (and possibly background shape) • 4) "OVER" state - insert keyframe, modify text, add animation. • 5) "DOWN state - insert (empty) keyframe, modify text and add static graphic by selecting animation and using "Swap" in the Property Inspector; want graphic to line up with end state of animation. • 6) "HIT" state - define "hotspot" for button (in addition to shapes in other states).

10. Step 4 – Create "Down" Buttons • Use "Duplicate Symbol" to Create Buttons • 1) Select "Button" symbol, Right-Click, select "Duplicate" and name it. • 2) Replace text in the keyframes for the different states. • 3) Use "Swap" to replace animation and position appropriately. • Create "Down" Buttons • 1) Use "Duplicate Symbol" to create "Down" button and name it. • 2) Update states: "down" and "up" become identical (use "Copy Frames" and extra layer for swapping if needed). • 3) "Over" should also contain static image as in "Up" state and the same text color as in "Up" state.

11. Step 5 – Make Button Instance Interactive – ActionScript 3.0 • Open "Scene" Window • 1) "Scene 1" - name it "Bilbao". • Make Button Instance Interactive • 1) Select instance of button in "Scene 1" and name it • 2) Open “Actions” Window via “Window > Actions” • 3) Open “Code Snippets” Window via “Window > Code Snippets” • Select Timeline Navigations in left panel and • Double-click on “Click to Go to Scene and Play”and code will be added to frame in which selected and named instance is located • Customize Code: specify Scene e.g. “Bilbao” use gotoAndStop • function fl_ClickToGoToScene(event:MouseEvent):void{ MovieClip(this.root).gotoAndStop(1, "Bilbao");} • this code is added to “Actions” layer (which will be created if it not yet exists)

12. Step 5 – Make Button Instance Interactive – ActionScript 2.0 • Open "Scene" Window • 1) "Scene 1" - name it "Bilbao". • Make Button Instance Interactive • 1) Select instance of button in "Scene 1" and name it • 2) Open "Action" window. • 3) Press "+" and then select action to be triggered: • Global Functions > Timeline Control • 6) Select "gotoAndStop" and for scene select "Bilbao". • ActionScript 2.0 associated with button is: • on (release) { • gotoAndStop ("Bilbao", 1); • }

13. Step 6 – Make Button Instance Interactive (cont.) – ActionScript 3.0 • Select Button Instance • 1) Select instance of button (and name it). • 2) Open “Actions” Window via “Window > Actions” • 3) Open “Code Snippets” Window via “Window > Code Snippets” • Select Timeline Navigations in left panel and • Double-click on “Click to Go to Scene and Play”and code will be added to frame in which selected and named instance is located • Customize Code: specify Scene e.g. "Gehry", "Meret" or "Dance“ • change to gotoAndStop • Code will be added in “Actions” layer

14. Step 6 – Make Button Instance Interactive (cont.) – ActionScript 2.0 • Select ActionScript for "Bilbao" Button • 1) Select instance of "Bilbao" button and open Actions Window • 2) Select ActionScript and copy it • Select Button Instance • 1) Select instance of button (and name it). • 2) Open "Action" window • 3) Paste ActionScript. • 4) Modify "gotoAndStop ("Bilbao", 1) so that another scene (to be created) is referenced, such as "Gehry", "Meret" or "Dance". • ActionScript 2.0 associated with button is: • on (release) { • gotoAndStop ("SceneName", 1); • }

15. Step 7 – Create Scenes and Swap in “Down” Button • Create "actions" Layer • 1) Insert layer called "actions" (if it has not already been created) • 2) Select first keyframe and open "Actions" window. • 3) Type "stop ();" (on the 1st line) • Open "Scene" Window to Duplicate Scenes • 1) Open "Scene" window. • 2) Click the "Duplicate Scene" icon in the bottom right. • 3) Name the duplicate consistent with scenes referenced in the ActionScripts associated with the different buttons. • For ActionScript 3.0: make sure only addEventListenersare included • Bilbao.addEventListener( code ); Gehry.addEventListener( code ); • Meret.addEventListener( code ); Dance.addEventListener ( code ); • Remove other function code scenes other than the 1st scene • Insert "Down" Button for Each Scene • 1) Select button related to selected scene. • 2) Use "Swap" in Property Inspector and select "Down" button.

16. Recap – How to create Animated & Interactive Button • 4. Button UP = BUTTON Symbol • OVER State 3. Animation = MOVIE Symbol 2. Bitmap Symbol = GRAPHIC Symbol • Import Bitmap • To Change Alpha  Select Instance of Symbol • Animation Stops  Add “stop ()” to last keyframe • Navigation • Select instance of Button and attach ActionScript • Save Time  Use “Duplicate” and Modify