1. Flash Demonstration – Unit 5
Done So Far and Build Upon
Create Function
Create “Button” using ActionScript 2.0
Name Keyframes
Create “Disjointed Rollover” using ActionScript 2.0

2. Done So Far – Create Flash Website with Animated Buttons
Import Images
Convert Images to Graphic Symbols
“Insert > Convert to Symbol”
Create Movie Clip using “Insert > New Symbol”
Insert Graphic Symbol and Animate
Create Buttons
Insert Movie Clip in “Over” State
Create “UP” and “DOWN” Buttons
Create Navigation Bar in “Scene 1” and add ActionScript
Create Scene for Each Category and “Swap In” “Down” Button
 This Unit – Create Secondary Navigation and “Disjointed Rollover” using ActionScript

3. Frame  stop (); Function definitions Variables Button Movie Clip
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

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

5. movieClip._visible = true; _parent.movieClip.play ();
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 ();

6. _global.myFunction = function (x) { return (x*2)+3; }
Defining a Function
// global
_global.myFunction = function (x) {
return (x*2)+3; }
// local
function sqr(x) {
return x * x;

7. MovieClip – Event Handler Actions and Methods
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

8. Step 0 – Download files, Launch Flash, Create Document
Launch Flash
Open File “Step0.fla”
Using Grid, Rulers and Guides
Rulers
View > Rulers
Guides
View > Guides > Show Guides

9. 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
Open Actions Window
Enter function definition
_global.changeVisuals = function (movieClip, alpha, scale) {
movieClip._alpha = alpha;
movieClip._xscale = scale;
movieClip._yscale = scale; }

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

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

12. 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");

13. 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”

14. 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");

15. 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”

16. Step 4b – Create “Disjointed” Rollover
Make “FurcupText” Invisible
1) Select “actions” layer at frame = 20
2) Add ActionScript
FurcupText._visible = false;

17. 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");