Lecture 12
Flash
–
–
–
–
–
Done So Far and Build Upon It
Create Function
Create “Button” using ActionScript
Name Keyframes
Create “Disjointed Rollover” using ActionScript
© 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
Create folder “mp12” in “My Documents” folder
Download Files
http://scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Lectures/Lecture12/stepbystep/
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