Lecture 11

10
© Anselm Spoerri Lecture 11 Flash Build Flash Website with Animated Navigation Structure 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

description

Lecture 11. Flash Build Flash Website with Animated Navigation Structure Decide on Overall Navigation Layout, Import Images & Organize Assets Create Animations for Navigation Buttons Create "UP" Buttons Create "Down" Buttons Make Button Instance Interactive - PowerPoint PPT Presentation

Transcript of Lecture 11

Page 1: Lecture 11

© Anselm Spoerri

Lecture 11

Flash– Build Flash Website with Animated Navigation Structure

– 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

Page 2: Lecture 11

© Anselm Spoerri

Step 0 – Download files, Launch Flash, Create Document

Create folder “mp11” in “My Documents” folder

Download Files (select zip file & extract into “mp11”)

http://scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Lectures/Lecture11/stepbystep/

Launch Flash– Start > Macromedia > Flash

Create Flash Document and Set its Properties – File > New– Modify > Document or use Property Inspector

– Frame Rate = 12 Dimensions = 640 x 480 Background color = White

800 x 600

Using Grid, Rulers and Guides– Rulers

View > Rulers– Guides

– View > Guides > Show Guides

Page 3: Lecture 11

© Anselm Spoerri

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

Page 4: Lecture 11

© Anselm Spoerri

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.

Page 5: Lecture 11

© Anselm Spoerri

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

Page 6: Lecture 11

© Anselm Spoerri

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.

Page 7: Lecture 11

© Anselm Spoerri

Step 5 – Make Button Instance Interactive

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

Action associated with button is:

on (release) {

gotoAndStop ("Bilbao", 1);

}

Page 8: Lecture 11

© Anselm Spoerri

Step 6 – Make Button Instance Interactive (cont.)

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

Action associated with button is:

on (release) {

gotoAndStop ("SceneName", 1);

}

Page 9: Lecture 11

© Anselm Spoerri

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

Create "actions" Layer

1) Insert layer called "actions".

2) Select first keyframe and open "Actions" window.

3) Type "stop ();".

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.

Insert "Down" Button for Each Scene

1) Select button related to selected scene.

2) Use "Swap" in Property Inspector and select "Down" button.

Page 10: Lecture 11

© Anselm Spoerri

Recap – How to create Animated & Interactive Button

4. Button UP = BUTTON Symbol

OVER State

3. Animation = MOVIE Symbol

2. Bitmap Symbol = GRAPHIC Symbol

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