Animate (= Flash) Demonstration – Unit 5 – ActionScript 3.0

1. Animate (= Flash) Demonstration – Unit 5 – ActionScript 3.0 • Done So Far and Build Upon • Name Keyframes • Create Buttons send playhead to named keyframe

2. Step 0 – Download files, Launch Animate (= Flash), Create Document • Download Files • http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoVis_ITI/videodemosFlash.htmland Files in Sakai > Resources > Animate (= Flash) • Launch Animate (= Flash) • Open File “Step0.fla” • Using Grid, Rulers and Guides • Rulers View > Rulers • Guides • View > Guides > Show Guides

3. Done So Far – Create Project with Animated Buttons – Single Scene • Import Images • Convert Images to Graphic Symbols • “Insert > Convert to Symbol” • Create Movie Clip using “Insert > New Symbol” • Insert Graphic Symbol and Animate • Create Buttons • Insert Movie Clip in “Over” State • Create “UP” and “DOWN” Buttons • Create Navigation Bar in “Scene 1” and add ActionScript • Insert Keyframes in Timeline and Create Named Frames for Each Category and “Swap In” “Down” Button •  This Unit – Create Secondary Navigation and Named Frames

4. Step 1 – Create Secondary Navigation Buttons – Single Scene • Create Button for Secondary Theme(s) • Insert Button symbol and specify appearance in Up, Over, Down columns. • Create "2nd nav" layer above navigation layer • Drag Button Instance to Stage • Name button instance ... e.g. "Bilbao_1" into keyframe = "Bilbao" • Control What is Visible Where • Insert "Blank Keyframe" in "2nd nav" layer at frames = "Gehry" etc • so that secondary navigtion for Bilbao theme is not visible there • and you can add secondary navigation for these themes later • using similar steps as for first primary theme. • Use same steps to create other buttons for secondary navigation • You know how to create the “DOWN” button so that the secondary navigation has a “you are here” indicator: • Select instance of UP button in labelled frame related to button • Swap in “DOWN” button

5. Step 2 – Create Secondary Navigation Buttons – Single Scene • Make Button Instance Interactive • 1) Select named instance of secondary button in Frame = 1 • ActionScript 3.0 • 2) Open “Code Snippets” Window via “Window > Code Snippets” • 3) Select Timeline Navigations in left panel and • 4) Double-click on “Click to Go to Frame and Stop” • Use labeled frame: "Bilbao_1".

6. Step 3 – Create Secondary Navigation Buttons – Single Scene • Organize Timeline with Labeled Frame • 1) In "Actions" layer at frame = 10, Insert "Blank Keyframe" and • 2) Name keyframe= "Bilbao_1" • 3) In Actions for "Actions" layer, add event listener for secondary button. • Why? Since we will insert keyframe at frame = 10 in "2nd nav" layer. • 4) Select layers "directions" and "2nd nav" at frame = 10 and Insert Keyframe so that can change content at frame 10 for layers. • 5) Change text in "directions" layer at frame 10 to "Bilbao_1 ..." • You can repeat Steps 1 - 5 for frame = 20 etc for other secondary themes and name frame = "Bilbao_2" etc. • Add Animation Instance in secondary theme • 1) Create layer above "directions" and name it "animation • 2) Create keyframe at frame = "Bilbao_1" in animation layer • 3) Drag animation from Library into this keyframe • 4) Insert "Blank Keyframe" in subsquentkeyframe to make sure that animation does NOT play there.

7. Step 4 – Create Secondary Navigation Buttons – Single Scene • Further Organize Timeline with Labeled Frame • 1) In "Actions" layer at frame = 60, Insert "Blank Keyframe" and • 2) Name keyframe = "Gehry_1" • 3) In Actions for "Actions" layer, add event listener for secondary button. • Why? Since we will insert keyframe at frame = 60 in "2nd nav" layer. • 4) Select layers "directions" and "2nd nav" at frame = 60 and Insert Keyframe so that can change content at frame 60 for layers. • 5) Change text in "directions" layer at frame 60 to "Gehry_1 ..." • You can repeat Steps 1 - 5 for frame = 70 etc for other secondary themes and name frame = "Gehry_2" etc.

8. Done So Far – Create Project with Animated Buttons – Multiple Scenes • Import Images • Convert Images to Graphic Symbols • “Insert > Convert to Symbol” • Create Movie Clip using “Insert > New Symbol” • Insert Graphic Symbol and Animate • Create Buttons • Insert Movie Clip in “Over” State • Create “UP” and “DOWN” Buttons • Create Navigation Bar in “Scene 1” and add ActionScript • Create Scene for Each Category and “Swap In” “Down” Button •  This Unit – Create Secondary Navigation and Named Frames

9. Step 1 – Create Secondary Navigation Buttons – Multiple Scenes • 1) Create “Button” Symbol = “Part1” • 2) Create Button Background and Text • 3) Create Secondary Navigation Area in “Bilbao” SceneAdd the needed layers • 4) Add instance of “Part1” button to “Bilbao” scene and name it “Part1” • Use same steps to create other buttons for secondary navigation • You know how to create the “DOWN” button so that the secondary navigation has a “you are here” indicator: • Select instance of UP button in labelled frame related to button • Swap in “DOWN” button

10. Step 2 – Create Secondary Navigation Buttons – Multiple Scenes • 1) Select “Part1” instance and name it • 2) Open “Code Snippets” Window via “Window > Code Snippets” • Select Timeline Navigations in left panel and • Double-click on “Click to Go to Frame and Play”and code will be added to frame in which selected and named instance is located • Customize Code: specify Frame e.g. “Part1” • function fl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void{ gotoAndPlay("Part1");} • this code is added to “Actions” layer (which will be created if it not yet exists) • 3) Open Actions window and examine and customize code

11. Step 3 – Label Keyframe – Multiple Scenes • 1) Select “Actions” layer • 2) Select frame = 20, Insert Keyframe and Name it “Part1” • 3) Add “stop ();” to “Actions” layer at frame = 20 • 4) Insert Keyframe at frame = 20 for all the other layers(all the content you want to remain visible) • Use same steps to create other labelled frames needed for secondary navigation • For other scenes: only need to add .addEventListener( code ); in “Actions” layer (make sure to assign correct instance names)