Lecture 10 – Related: Part 1
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
© Anselm Spoerri
Step 0 – Download files, Launch Flash, Create Document
Download Files
http://www.scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Lectures/Lecture10/stepbystep/related/part1
Launch Flash
– Start > Macromedia > Flash
Create Flash Document and Set its Properties
–
–
File > New
Modify > Document
–
Frame Rate = 12
or
use Property Inspector
Dimensions =
640 x 480
800 x 600
Background color = White
Using Grid, Rulers and Guides
–
–
Rulers
View > Rulers
Guides
– View > Guides > Show Guides
© 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"
...
© 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.
© 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).
© 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.
© 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);
}
© 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);
}
© 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.
© 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
© Anselm Spoerri
Lecture 10 – Related: Part 2
Flash
– Done So Far and Build Upon
– Create Function
– Create “Button” using ActionScript 2.0
– Name Keyframes
– Create “Disjointed Rollover” using ActionScript 2.0
© Anselm Spoerri
Done So Far – Create Flash Website with Animated Buttons
1.
Import Images
2.
Convert Images to Graphic Symbols
•
“Insert > Convert to Symbol”
3.
Create Movie Clip using “Insert > New Symbol”
4.
Insert Graphic Symbol and Animate
5.
Create Buttons
6.
Insert Movie Clip in “Over” State
7.
Create “UP” and “DOWN” Buttons
8.
Create Navigation Bar in “Scene 1” and add ActionScript
9.
Create Scene for Each Category and “Swap In” “Down” Button
 This Week – Create Secondary Navigation
and “Disjointed Rollover” using ActionScript
© Anselm Spoerri
Attach ActionScript
• Frame
 stop ();
Function definitions
Variables
• Button
• Movie Clip
Actions panel allows you to select, drag and drop, rearrange, and
delete actions
Reference panel to view detailed descriptions of actions
 Window > Reference
Flash can detect what action you are entering and display code hint
Scripts attached to a frame execute when playhead enters frame.
– first frame in a movie is rendered incrementally
Scripts attached to movie clips / buttons execute when event occurs
© Anselm Spoerri
ActionScript Terminology
Objects are collections of properties and methods
Methods are functions assigned to an object
Instances are objects that belong to a certain class
Instance names are unique names that allow you to target
movie clip instances in scripts
 Use Property inspector to assign instance names to instances on Stage.
 “this” to movie clips
Target Paths = Hierarchical Addresses
movie clip instance names, variables, objects in movie
– Use target path to direct action at a movie clip or to get or set variable value
_root.stereoControl.volume
© Anselm Spoerri
Dot Syntax “.”
Indicate the properties or methods related to an object or movie clip
Used to identify target path to a movie clip, variable, function, or object
movieClip._x
movieClip._alpha
movieClip._xscale
movieClip._visible = true;
_parent.movieClip.play ();
© Anselm Spoerri
Defining a Function
// global
_global.myFunction = function (x) {
return (x*2)+3;
}
// local
function sqr(x) {
return x * x;
}
© Anselm Spoerri
MovieClip – Event Handler Actions and Methods
Event handler actions
Event handler methods
onClipEvent (load)
onLoad
onClipEvent (enterFrame)
onEnterFrame
onClipEvent (mouseDown)
onMouseDown
onClipEvent (mouseUp)
onMouseUp
onClipEvent (mouseMove)
onMouseMove
onClipEvent (keyDown)
onKeyDown
onClipEvent (keyUp)
onKeyUp
onPress
onRelease
onRollOver
onRollOut
© Anselm Spoerri
Step 0 – Download files, Launch Flash, Create Document
Download Files
http://www.scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Lectures/Lecture10/stepbystep/related/part2
Launch Flash
Open File “Step0.fla”
Using Grid, Rulers and Guides
–
–
Rulers
View > Rulers
Guides
– View > Guides > Show Guides
© Anselm Spoerri
Step 1 – Create Global Function
Insert Layer “functions” in first scene “Bilbao” to
contain global functions
Want to create function that changes transparency and scale of
movie
1) Open Actions Window
2) Enter function definition
_global.changeVisuals = function (movieClip, alpha, scale) {
movieClip._alpha = alpha;
movieClip._xscale = scale;
movieClip._yscale = scale;
}
© Anselm Spoerri
Step 2a – Create Secondary Navigation Buttons Using ActionScript
1) Create “Movie” Symbol = “Furcup Button”
2) Create Button Background and Text
3) Create Secondary Navigation Area in “Meret” Scene
4) Add instance of “Furcup Button” movie clip to “Meret”
scene and name it “Furcup”
5) Select “Furcup” instance
6) Open Actions window
© Anselm Spoerri
Step 2b – Create Secondary Navigation Buttons Using ActionScript
With “Furcup” movie clip instance selected, add in Actions Window
onClipEvent (load) {
var alphaOut = 50;
var alphaOver = 75;
var alphaPress = 100;
var scaleOut = 100;
var scaleOver = 110;
var scalePress = scaleOver;
// set transparency
this._alpha = alphaOut;
this.onRollOver = function () {
trace ("Over");
changeVisuals (this, alphaOver, scaleOver);
}
}
© Anselm Spoerri
Step 2c – Create Secondary Navigation Buttons Using ActionScript
onClipEvent (load) {
var alphaOut = 50;
var alphaOver = 75;
var alphaPress = 100;
var scaleOut = 100;
var scaleOver = 110;
var scalePress = scaleOver;
// set transparency
this._alpha = alphaOut;
this.onRollOver = function () {
trace ("Over");
changeVisuals (this, alphaOver, scaleOver);
}
this.onRollOut = function () {
trace ("Out");
changeVisuals (this, alphaOut, scaleOut);
}
this.onPress = function () {
trace ("Press");
changeVisuals (this, alphaPress, scalePress);
_parent.gotoAndStop("Furcup");
}
}
© Anselm Spoerri
Step 3a – Label Keyframe, Create “DOWN” Button
1) Create layer = “labelled”
2) Select frame = 20, Insert Keyframe and Name it “Furcup”
3) Add “stop ();” to “actions” layer at frame = 20
(need to add insert keyframe)
3) Insert Keyframe at frame = 20 in layer “furcup”
4) Select instance of movie clip and name it “FurcupDown”
© Anselm Spoerri
Step 3b – Modify attached ActionScript
Modify ActionScript attached to “FurcupDown” instance
var scalePress = 120;
this._alpha = alphaPress;
this._xscale = scaleOver;
this._yscale = scaleOver;
this.onRollOver = function () {
trace ("Over");
changeVisuals (this, alphaPress, scaleOver);
}
this.onRollOut = function () {
trace ("Out");
changeVisuals (this, alphaPress, scaleOut);
}
this.onPress = function () {
trace ("Press");
changeVisuals (this, alphaPress, scalePress);
_parent.gotoAndStop("Furcup");
}
© Anselm Spoerri
Step 4a – Create “Disjointed” Rollover
Create “Furcup Animation”
1) Import “Furcup” image and convert to Graphic Symbol
2) Create new movie clip symbol called “Furcup Animation”
3) Create Animation
(make sure image expands from origin of movie clip).
4) Add instance “Furcup Animation” to “Meret” scene
at frame = “Furcup”
5) Name instance “FurcupImage”
Create “Furcup Text"
1) Create new movie clip symbol called “Furcup Text”
2) Create Text
3) Add instance “Furcup Text” to “Meret” scene
at frame = “Furcup”
5) Name instance “FurcupText”
© Anselm Spoerri
Step 4b – Create “Disjointed” Rollover
Make “FurcupText” Invisible
1) Select “actions” layer at frame = 20
2) Add ActionScript
FurcupText._visible = false;
© Anselm Spoerri
Step 4c – Create “Disjointed” Rollover
Add “Disjointed Rollover” to “FurcupImage”
Select “FurcupImage” instance and in Actions window
onClipEvent (load) {
this.onRollOver = function () {
trace ("Over");
_parent.FurcupText._visible = true;
}
this.onRollOut = function () {
trace ("Out");
_parent.FurcupText._visible = false;
}
this.onPress = function () {
trace ("Press");
}
}
© Anselm Spoerri