ActionScript

1. A Primer ActionScript

2. ActionScript is… • Object-oriented programming • Everything you do in ActionScript does something to some object* • Some objects are called Symbols in Flash • Movie Clip • Graphic • Button *anything you can manipulate in some way

3. Object oriented? • You can decide what happens when a user clicks a button without worrying about how the button (or program) knows that it has been clicked • You can decide what changes to make to an object’s properties without knowing the internal mechanics of how those changes were made • You can program tasks incrementally without sitting down and writing the whole program from start to finish in one session

4. ActionScript Deconstructed • Class: a group of items that are similar in some way • Items are called objects or instances of the class • Objects can be concrete (like a button or graphic) or abstract (like a variable that is invisible, but hold data) • Objects have two aspects form (properties) and function (methods) • Each property and method is defined by Actions (pieces of code that tell Flash how to manipulate a target object at any point in your movie).

5. ActionScript Metaphor • Ball could be considered a class of items defined as “spherical things” • One object in this class is a movie clip called Tennis_ball • The properties of Tennis_ball might be the color neon green or a 20-pixel diameter • Its methods might be bounce, roll, and/or spin • A 2ndobject in the ball class might be Softball • Properties white…etc.

6. ActionScript Flow • Flash executes ActionScript statements starting with the first statement and continuing in order until it reaches the final statement or a statement that instructs ActionScript to go somewhere else.

7. One type of action that sends ActionScript somewhere other than the next statement is an if statement

8. Actions • Tell Flash to do something • Frame actions • Object actions • Actions also can have parameters

9. gotoAndPlay • This frame action sends the playhead to the specified frame in a scene and plays from that frame. If no scene is specified, the playhead goes to the specified frame in the current scene.

10. Functions • Perform a specific task • Like in a spreadsheet program (Excel)

11. getVersion • Returns the Flash Player version number and operating system information. • You can use this function to determine whether the Flash Player that is in use can handle your Actionscript.

12. Properties • All available information about an object • You can use ActionScript to read and modify object properties • All property names begin with an underscore (e.g., _visible)

13. _visible = false • This property make an object invisible • Assign the following action to a button… On (release) { _visible = false; } • Button disappears on mouse click

14. Method • Similar to actions in that they effect objects • Built into objects • Invoked (Executed) through dot notation

15. RocketMC.gotoAndPlay(“BlastOff”); • ActionScript notation must end in ; • Movie clip Rocket MC goes to a frame labeled BlastOff and plays

16. Variables • hold data for use in your Flash movies • Variables can hold any type of data • You could store: • User name • Result of calculation • True or false value

17. Expressions • An expression is any statement that Flash can evaluate and that returns a value. • You can create an expression by combining operators and values or by calling a function.

18. Operators • Expressions use operators to tell Flash how to manipulate the values in the expression. • They are the commands that say “add these values” or “multiply these numbers”

19. Some types of operators • Assignment: • are used to assign values to variables. • The most common is (=). It makes the variable on the left equal to the value of the variable or expression on the right. • Comparison and equivalence: • (<), (>), (< =) • Numeric: • perform mathematical operations on values

20. Looping • When you need to repeat certain actions in your movies more than once. • Makes coding more efficient, using the same set of commands as many times as necessary to complete a task.

21. Looping examples • while • Creates a loop that continues to repeat as long as a condition remains true • for • Creates a loop that executes a specific number of times using a counter • for…in • Creates a loop that executes once for each member of a group of objects (class) • This makes certain that the entire group of objects is processed in the same way

22. Hints • Before you begin writing scripts, formulate your goal and understand what you want to achieve. • Planning your scripts is as important as developing storyboards for your work. • Start by writing out what you want to happen in the movie, as in this example: • I want to create my whole site using Flash. • Site visitors will be asked for their name, which will be reused in messages throughout the site. • The site will have a draggable navigation bar with buttons that link to each section of the site. • When a navigation button is clicked, the new section will fade in at the center of the Stage. • One scene will have a contact form with the user's name already filled in.

23. Write ActionScript in Flash • To write AS on Timeline: • Click on a key frame and then press F9.

24. Timeline Script (for AS3.0) Methods: • play(); • stop(); • gotoAndPlay(); • gotoAndStop(); • nextFrame(); • prevFrame(); Properties • currentFrame • currentLabel • currentLabels • totalFrames

25. Accessing Created Symbol Instances (1) • Create a symbol: MovieClip or SimpleButton. • Create an instance by dragging it from the library to the stage. • Input a name to every instance, say, movie1 and button1. After that, you can call these names in the AS. • Click on a keyframe and write code:

26. Accessing Created Symbol Instances (2) • Properties: movie1.x = 20; //set x location movie1.y = 40; // set y location movie1.width = 100; // set new width movie1.height = 200; // set new height

27. Accessing Created Symbol Instances (3) Where these properties came from? • In AS3, all display objects are inherited from DisplayObject class. • movie1 is also DisplayObject so it can use every properties and methods of DisplayObject class. • For more details, click Help menu -> -> ActionScript 3.0 Language and Component Reference -> All Classes -> DisplayObject

28. .addEventListener() New Event Handling in AS3 (1) • AS3 changes the event handling, eg. Click on buttons, to a new mechanism. • on () • onClipEvent() • .onload • addListener() • UIEventDispatcher()

29. New Event Handling in AS3 (2) How to make a button clickable? • Create a symbol: Movie Clip or Button. • Create an instance by dragging it from the library to the stage. • Input a name to every instance, say, movie1 and button1. • Click on a keyframe and write code: (Note in AS3, we can never write codes on buttons anymore. We MUST write these on the keyframe.)

30. New Event Handling in AS3 (2) • Full Syntax: instanceName.addEventListener(type, listener, useCapture, priority, useWeakReference) • Minimized Syntax: instanceName.addEventListener(type,listener); • Example: playButton.addEventListener(MouseEvent.CLICK, onPlayButtonClick);

31. New Event Handling in AS3 (3) button1.addEventListener(MouseEvent.CLICK, onButton1Click); function onButton1Click(e:MouseEvent):void{ trace("button 1 Clicked"); } movie1.addEventListener(MouseEvent.CLICK, onMovie1Click); function onMovie1Click(e:MouseEvent):void{ trace("Movie 1 Clicked"); }

32. Exercise • Make a pictures slideshow (SlideShow.fla)

33. Solution (1) • Open a Flash file (AS3.0) • Import pics to library (File->Import) • Convert the pics to Movie Clip (Optional) • Make keyframes and place a pic to every Keyframe

34. Solution (2) • Create a button symbol and put it in a new layer • Make 2 instances (next, prev) from the button symbol • Give an instance name “nextButton” and another one “previousButton”

35. Solution (3) • Create a new layer and name it, say, “AS3” • Write code the keyframe of the AS3 layer

36. Solution (4) – Code AS3.0 • stop(); • nextButton.addEventListener(MouseEvent.CLICK, onNextButtonClicked); • previousButton.addEventListener(MouseEvent.CLICK, onPreviousButtonClicked); • function onNextButtonClicked(e:MouseEvent):void { • if (currentFrame == totalFrames) { • gotoAndStop(1); • } else { • nextFrame(); • } • } • function onPreviousButtonClicked(e:MouseEvent):void { • if (currentFrame == 1) { • gotoAndStop(totalFrames); • } else { • prevFrame(); • } • }

37. Solution (4) – Code AS3.0 • stop(); • // add an event listener to the next button • nextButton.addEventListener(MouseEvent.CLICK, onNextButtonClicked); • // add an event listener to the previous button • previousButton.addEventListener(MouseEvent.CLICK, onPreviousButtonClicked); • // a function that goes to the next frame when the next button is clicked • function onNextButtonClicked(e:MouseEvent):void { • if (currentFrame == totalFrames) { • gotoAndStop(1); • } else { • nextFrame(); • } • } • // a function that goes to the previous frame when the next button is clicked • function onPreviousButtonClicked(e:MouseEvent):void { • if (currentFrame == 1) { • gotoAndStop(totalFrames); • } else { • prevFrame(); • } • }