1. Exercise : Animated Navigation Structure in Animate (= 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
Animate (= Flash) Projects by ITI Students
Link to Previous Projects

4. Animate (= Flash) Concepts and Demos - Overview
Build Project 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. Animate (= 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 Animate (= Flash), Create Document
Launch Animate (= Flash)
Create Animate (= Flash) Document and Set its Properties
File > New
Modify > Document or use Property Inspector
Frame Rate = Dimensions = 640 x 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 – Single Scene
Using ActionScript 3.0 and Design Project in single "Scene 1".
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 Frame and Stop” and code will be added to frame in which selected and named instance is located
Customize Code: specify Frame e.g. “Bilbao”
function fl_ClickToGoToAndStopAtFrame(event:MouseEvent):void { gotoAndStop("Bilbao");}
this code is added to “Actions” layer (which will be created if it not yet exists)

12. Step 6 – Make Button Instance Interactive (cont.) – Single Scene
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 Frame and Stop” and code will be added to frame in which selected and named instance is located
Customize Code: specify Frame e.g. "Gehry", "Meret" or "Dance"

13. Step 7 – Create Labeled Frames – Single Scene
Organize Timeline with Labeled Frame
1) In "Actions" layer at frame = 50, Insert "Blank Keyframe" and
2) Name keyframe = "Gehry"
3) In Actions for for "Actions" layer, add event listeners for buttons
Example: Bilbao.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame); in "Scene 1"
4) Select ALL the layers below Actions layer at frame = 50 and Insert Keyframe so that all content is visible until frame 50 and you can edit it at frame 50 if you want to.
5) Change text in "directions" layer at frame 50 to "Gehry ..."
Repeat Steps for frame = 100, 150 for other primary themes and name frame = "Meret" etc

14. Step 8 – Swap in “Down” Button – Single Scene
Create "You are here" Indicator
1) At frame = 1, select instance of Bilbao button
2) In Properties panel, click on "Swap ..." and select DOWN version of the Bilbao button.
Repeat Steps for frame = 50, 100, 150 for other primary themes and swap in the respective DOWN button.

15. Step 5 – Make Button Instance Interactive – Multiple Scenes
Using 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)

16. Step 6 – Make Button Instance Interactive (cont.) – Multiple Scenes
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

17. Step 7 – Create Scenes and Swap in “Down” Button – Multiple Scenes
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 addEventListeners are 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.

18. 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