Script Programming with FLASH

1. Script Programmingwith FLASH Introductory Level

2. Programming with ActionScript • Create Movie Clips • Instances and naming • Each movie clip has its own timeline different from the main timeline of a scene • Multiple timelines in a Flash movie • There can be more than one frame with the same number, say Frame 2. • Hence, you need to be specific about which timeline when sending a playhead to another frame using ActionScript. • When referring to a certain frame in the code, make sure you specify which timeline. • Ex) Two instances of the same movie clip symbol, named character: • Tommy_mc • Joe_mc

3. Nesting Movie Clips with Dot Syntax • A movie clip can contain instances of other symbols-graphics, buttons, and movie clips. • One movie clip instance can be placed inside another movie clip. • One timeline containing an animation can be placed inside another timeline. • Although it may seem confusing at first, this is a very useful feature and commonly used in projects. • With more than one timeline, how do you specify in ActionScript which timeline’s animation should be played? • The answer is to use a target path to specify the “address” of the instance (or the timeline that the instance is in) you want to target. • Constructed using dot syntax by stringing together the instance names using periods (.) according to their hierarchical relationship.

4. Dot Syntax (1) • Movie Clip Hierarchy • Root Movie Clip: Character • head_mc • hair_mc • eyeL_mc • eyeR_mc • mouth_mc • Ex) • Target path for the mouth instance for Tommy_mc  tommy_mc.head_mc.mouth_mc • Statement to make the mouth start playing animation  tommy_mc.head_mc.mouth_mc.play(); * play() causes the playhead on the timeline

5. Dot Syntax (2) • Dots can be used to: • Denote the target path to a timeline; • Invoke a method for a specific movie clip instance (i.e., tell the object to do something, such as play() ); • Denote the property of a movie clip, such as position and size. • Examples • tommy_mc.head_mc.mouth_mc.scaleX= 0.6; • tommy_mc.head_mc.mouth_mc.scaleX = 0.6;

6. Where do scripts go? • Keyframe • The script should be added to a keyframe. • Inside a keyframe on the timeline, the script is placed. • Executed when the playhead reaches that frame. • In the examples, the script will be placed in the first frame only. • Actions Panel • ActionScript code is created or edited in the Actions panel • Window > Actions, or press the F9 key. • Within Actions Panel, you start writing script code. • Script Coding • Create new layer named “actions” or “action” dedicated to holding the script: to avoid interference with the keyframes that are created for visual or audio content • Click the first frame (keyframe) of the ActionScript layer

7. Error Handling • Syntactical Errors • May or may not have syntactical errors (spelling and grammatical errors) • Flash compiler analyzes the code syntactically. • If there are no syntactical errors, then the compiler converts the code into the machine language (in 0s and 1s) that the computer’s processor understands. • Logical Errors • When there are logical errors in your code, the movie still runs but does not work properly. • Nothing happens when you click on a button. • Objects do not appear at the correct position or do not appear at all. • The problem may seem random at times. • Use trace() function, print() function inside of normal program code • Lets you display a specified message or the result of a specified expression in the Output panel. • The message can be a string or the value of a variable used in the movie. • Used to debug your program and trace the progress of your program • Usage: • trace(“OK”); • trace(score); • trace(“before: “ + score); • trace(“before: “ + score); • trace(ball_mc.x);

8. Adding Interactivity • Interactivity is widely adopted in most of multimedia projects (e.g. computer games) • Common types of interactivity, event, includes • Mouse click • Mouse movement • Keystrokes initiated by the user • Actions in response to the user’s mouse activity and keystrokes, event • Signal that an animation or sound should be played • A different image should be shown • A line of text should be displayed • Events make it possible for the user to • provide input and feedback to the program • Exert some control over what happens • Become directly engaged in the activity screen • Event driven interactive multimedia authoring environment is provided. • The event : triggering the response • The event target : the object to which the event is going to happen • The response : the action in response to the event • Adding interactivity • simply associate responding actions with the event and the event target

9. Event Listeners and Event Handlers • Event Listeners • An object that listens for events such as mouse and keyboard events • addEventListener() : an ActionScript method • Event Handlers • A function that will be executed when the event occurs • Define event handler as a function: function handlerFunctionName(eventObject:EventType):void { statement(s); } • Use addEventListener() method to associate the event target with the event handler function • When the event takes place on the event target, the function’s actions are performed. eventTarget.addEventListener(EventType.EVENT_NAME, handlerFunctionName);

10. Mouse Events • Events to interact with an object onscreen with a mouse: by clicking or moving the mouse cursor • Clicking Event (1) mouse down: pressing the mouse button (2) mouse up: releasing the mouse button (refer to Table 11.1: Mouse Events in ActionScript 3.0) • Using the event constant: balloon_mc.addEventListener(MouseEvent.MOUSE_UP, clickBalloonHandler); function clickBalloonHandler(evt:MouseEvent):void { trace(“You have clicked on the balloon.”); } • Using the string: balloon_mc.addEventListener(“mouseUp”, clickBalloonHandler); function clickBalloonHandler(evt:MouseEvent):void { trace(“You have clicked on the balloon.”); }

11. Keyboard Events • Events to interact with the computer via the keyboard by • entering words in a text field on the screen, as when filling out a form • using the arrow keys to control the direction of an object’s movements • allowing the space bar, CTRL-key, or other keys to control certain properties and behaviors of an object • Key Stroke Event (1) key down : pressing the key down (2) key up : releasing the key (refer to Table 11.2: Keyboard Events in ActionScript 3.0) • An example of keyboard event listener code stage.addEventListener(evt:keyboardEvent): void function keyDownHandler(evt:keyboardEvent): void { if (evt.keyCode == keyboard.LEFT) { balloon_mc.x -=5; } else if (evt.keyCode == keyboard.RIGHT) { balloon_mc.x +=5; } else if (evt.keyCode == keyboard.UP) { balloon_mc.y -=7; } } else if (evt.keyCode == keyboard.DOWN) { balloon_mc.y +=7; } }

12. Frame Events for Animation • Frame events are specific to frame-based authoring programs such as Flash. • Does not directly respond to user interaction • enterFrameEvent • useful for creating scripted animation • triggered repeatedly at the frame rate of the movie • the statements in the enterFrame event handler function are executed constantly at the frame rate • Use addEventListener() when writing code for a frame event. stage.addEventListener(Event.ENTER_FRAME, frameEventHandler); function frameEventHandler(evt:Event): void { balloon_mc.x += 5; balloon_mc.y -= 10; }