Flash
<<  ARC Flash Safety Видеоплеер который показывает видео на внешний экран в режиме  >>
Exercise : Animated Navigation Structure in Flash
Exercise : Animated Navigation Structure in Flash
Review Classes Taken Key Concepts Key Learning Experiences What could
Review Classes Taken Key Concepts Key Learning Experiences What could
Decide how to Visualize Different States “UP”, “OVER”, “DOWN” Size /
Decide how to Visualize Different States “UP”, “OVER”, “DOWN” Size /
Build Flash Website with Animated Navigation Structure Unit 4 Decide
Build Flash Website with Animated Navigation Structure Unit 4 Decide
Flash Demonstration – Unit 4
Flash Demonstration – Unit 4
Download Files http://comminfo
Download Files http://comminfo
Step 1 – Overall Navigation Layout and Organize Assets
Step 1 – Overall Navigation Layout and Organize Assets
1) Create "Movie" symbol using "Insert > New Symbol"
1) Create "Movie" symbol using "Insert > New Symbol"
Step 3 – Create "UP" Buttons
Step 3 – Create "UP" Buttons
Step 4 – Create "Down" Buttons
Step 4 – Create "Down" Buttons
Step 5 – Make Button Instance Interactive – ActionScript 2.0
Step 5 – Make Button Instance Interactive – ActionScript 2.0
Step 5 – Make Button Instance Interactive – ActionScript 3.0
Step 5 – Make Button Instance Interactive – ActionScript 3.0
Step 6 – Make Button Instance Interactive (cont
Step 6 – Make Button Instance Interactive (cont
Step 6 – Make Button Instance Interactive (cont
Step 6 – Make Button Instance Interactive (cont
Step 7 – Create Scenes and Swap in “Down” Button
Step 7 – Create Scenes and Swap in “Down” Button
4. Button UP = BUTTON Symbol OVER State 3. Animation = MOVIE Symbol 2
4. Button UP = BUTTON Symbol OVER State 3. Animation = MOVIE Symbol 2

Презентация на тему: «Exercise: Animated Navigation Structure in Flash». Автор: Anselm Spoerri. Файл: «Exercise: Animated Navigation Structure in Flash.ppt». Размер zip-архива: 67 КБ.

Exercise: Animated Navigation Structure in Flash

содержание презентации «Exercise: Animated Navigation Structure in Flash.ppt»
СлайдТекст
1 Exercise : Animated Navigation Structure in Flash

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 Review Classes Taken Key Concepts Key Learning Experiences What could

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

1. “Learned in ITI program?” and “To Offer?”

3 Decide how to Visualize Different States “UP”, “OVER”, “DOWN” Size /

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

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

Flash Projects by ITI Students Link to Previous Projects

4 Build Flash Website with Animated Navigation Structure Unit 4 Decide

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 Unit 5 – needed for Project and optional Done So Far and Build Upon Create Function (optional) Create “Button” using ActionScript 2.0 in CS6 (optional) Name Keyframes Create “Disjointed Rollover” using ActionScript 2.0 in CS6 (optional)

Flash Concepts and Demos - Overview

5 Flash Demonstration – Unit 4

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 Download Files http://comminfo

Download Files http://comminfo

rutgers.edu/~aspoerri/Teaching/InfoVis2014_ITI/videodemosFlash.html Launch Flash Start > Macromedia > 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

Step 0 – Download files, Launch Flash, Create Document

7 Step 1 – Overall Navigation Layout and Organize Assets

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 1) Create "Movie" symbol using "Insert > New Symbol"

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.

Step 2 – Create Animations for Navigation Buttons

9 Step 3 – Create "UP" Buttons

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

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 2.0

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); }

12 Step 5 – Make Button Instance Interactive – ActionScript 3.0

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” function fl_ClickToGoToScene(event:MouseEvent):void{ MovieClip(this.root).gotoAndPlay(1, "Bilbao"); this code is added to “Actions” layer (which will be created if it not yet exists)

13 Step 6 – Make Button Instance Interactive (cont

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); }

14 Step 6 – Make Button Instance Interactive (cont

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" Code will be added in “Actions” layer

15 Step 7 – Create Scenes and Swap in “Down” Button

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 addEventListeners are included Bilbao.addEventListener( code ); Gehry.addEventListener( code ); Meret.addEventListener( code ); Dance.addEventListener ( code ); Remove other function code scenes other than the 1st scence Insert "Down" Button for Each Scene 1) Select button related to selected scene. 2) Use "Swap" in Property Inspector and select "Down" button.

16 4. Button UP = BUTTON Symbol OVER State 3. Animation = MOVIE Symbol 2

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

Recap – How to create Animated & Interactive Button

«Exercise: Animated Navigation Structure in Flash»
http://900igr.net/prezentacija/informatika/exercise-animated-navigation-structure-in-flash-228947.html
cсылка на страницу
Урок

Информатика

130 тем
Слайды
900igr.net > Презентации по информатике > Flash > Exercise: Animated Navigation Structure in Flash