Intro to Action Script 9

1. "The games of a people reveal a great deal about them.“ Marshall McLuhan Intro to Action Script 9

2. Nested movie clips Individual control from main timeline Control main timeline from individual movie clips Independent movie clip timelines interact with each other Control individual button timelines Individual names of the movie clip instances -complex interaction Complex interaction and navigation Controlling different timelines

3. main timeline Controlling different timelines MC4 MC3 Movie Clip 1 MC 2 MC7 MC5 MC6

4. Name and address on the movie clip . method Basic actions: gotoAndPlay() gotoAndStop() stop() play() nextFrame() prevFrame() Controlling different timelines

5. ActionsScript 2.0 Classes > Movie > MovieClip > Methods Methods

6. An object name and address on the main timeline on the main timeline inside another movie clip Insert Target path button in the Actions panel Target paths

7. _root . clock . stop (); Target paths

8. Name a movie clip instance • 2. Specify its name and address in the actions window • target path button • 2. Choose a method • ActionsScript 2.0 Classes > Movie > MovieClip > Methods Targeting movie clip instance from the main timeline

9. Open 01root_mc.fla flash file and apply an action to stop the second clock “clock2” movie clip ( 1 frame action) Targeting movie clip instance from the main timeline 01root_mc.fla

10. Movie clip inside another movie clip inside another movie clip …etc Parent movie clip A Child movie clip B inside movie clip A Any transformations applied to the parent will effect the child Target path: parent name . child name . method (); Targeting nested movie clips 02nested.fla

11. Open 02nested.fla flash file and apply a stop() action to the movie clip “wheels” inside the movie clip “train” using target path button _root . train . wheels . stop(); Targeting nested movie clips 02nested.fla

12. Relative directions from present location go two blocks straight, turn left relative link <a href = “links.html”> targets timelines that are inside the current timeline (on the lower level) Absolute directions from any place go to 929 W. Harrison street URL <a href =“http://www.uic.edu/links.html”> targets all timelines (higher and lower levels) Absolute and relative paths

13. Absolute Safer Identify objects at any level Relative copy and paste the movie clips with actions that affect inside movie clips easily without changing all target paths Website with relative links – changing the server to create movie clips dynamically relative target paths are required for non static movie clips Absolute and relative paths

14. Absolute starts with the main timeline _root Absolute and relative paths

15. Relative current timeline called THIS (myself) Absolute and relative paths

16. Relative Absolute this.clock2 _root.clock2 Absolute and relative paths

17. Open 03absolute.fla flash file. Double click on the clock movie clip to open its timeline Apply the following action on the last frame in the actions layer _root . gotoAndStop ( 2 ); Test the movie Once the clock arrow makes the full circle (reaches last frame of the clock movie clip) it tells the main timeline (_root) to go and stop at the second frame Targeting main timeline from inside the movie clip 03absolute.fla

18. Open 04mcs.fla flash file. Each “train” movie clip contains “wheels” movie clip and “smoke” movie clip Double click on the movie clip “train” Double click on wheels and open the “wheels” movie clip timeline Apply the following action to the last frame of the actions layer _root . train2 . smoke . stop (); Test the movie The animation for the smoke of the second train starts to play and then stops in response to the action script inside the first train Targeting movie clip from another the movie clip 04mcs.fla

19. Open 05self.fla flash file. Double click on the movie clip “clock” Study the following frame script in the actions layer and test the movie stop(); // or these work as well // this.stop(); relative // _root.clock.stop absolute Targeting movie clip itself 05self.fla

20. Open 06parent.fla flash file. Double click on the movie clip “train” Double click on the movie clip “wheels” to open its timeline Apply the following script on the last frame of the Actions layer and text the movie this . _parent . stop (); The train will move only 9 frames because the wheels tell it to stop Targeting movie clip itself – parent 06parent.fla

21. With statements are an alternative to multiple repeated target paths This action temporary sets the target path to train.wheels so that the methods affect the particular target path. After curly braces any action refers to main timeline again. train . wheels . stop (); train . wheels ._xscale = 50; train . wheels ._yscale = 50; __________________________________ with ( train . wheels ) { stop(); _xscale = 50; _yscale = 50; } With action 07with.fla

22. Open 07with.fla flash file. Apply the following script on the first frame in the actions layer with (train) { with (wheels) { play(); } with (smoke) { stop(); } } With action 07with.fla

23. Every action has a scope When you assign action to _root timeline, it is scoped to the main timeline When you assign action to movie clip frame, it is scoped to that movie clip timeline When you create a new object, it is scoped to the main timeline buttons Movie clips functions Scope

24. Functions action script assigned to a function is scoped to the timeline on which this function was created If this script assigned to a button or mc on the main timeline it will move main timeline to frame 10 myInstance . onRelease = function() { gotoAndStop (10); // moves current timeline this. gotoAndStop (10); //moves myInstance timeline (mc) this. _rotation = 45; //rotates myInstance } Scope

25. buttons action script assigned to a button is scoped to the timeline on which this button lies If this script assigned to a button on the main timeline it will move main timeline to frame 10 on (release ) { gotoAndStop (10); // moves parent timeline this. gotoAndStop (10); //moves parent timeline this. _rotation = 45; //rotates parent mc (stage) } Scope

26. Movie clips action script assigned to a mc is scoped to the that mc’s timeline If this script assigned to a mc on the main timeline it will move main timeline to frame 10 onClipEvent(mouseDown) { gotoAndStop (10); // moves current (mc’s) timeline this. gotoAndStop (10); //moves current (mc’s) timeline this. _rotation = 45; //rotates current mc itself } Scope

27. If movie clips generated dynamically and given automatic names _targetPath _target Return an absolute or relative path Open 08path.fla file and on the first frame inside the “train” movie clip timeline apply the following script wheels . onRelease = function() { trace ( this . _target ); } Open the output window and test the movie /train/wheels Finding target paths 08path.fla

28. Modify the script to trace the absolute path wheels . onRelease = function() { trace ( this); } Open the output window and test the movie _level0.train.wheels _Level0 _root timeline Finding target paths 08path.fla

29. Modify the script wheels . onRelease = function() { trace ( targetPath ( this ) ); } test the movie _level0.train.wheels Finding target paths 08path.fla

30. Monitor the state of download progress Short animation to play while the user is waiting for the movie to load how much of the movie has been loaded How long is to wait until the movie loads completely Percentage of loaded movie Percentage of the movie remain to load Preloaders 10preloader.fla

31. _framesloaded () _totalframes () number of frames that have downloaded getBytesLoaded() getBytesTotal() tests for the amount of data that has downloaded with movie clip methods Preloaders 10preloader.fla

32. MovieClipLoader class that provides powerful events such as onLoadStart() onLoadProgress() Preloaders 10preloader.fla

33. Open 10preloader.fla flash file Create a long rectangle movie clip with registration point at the left side Place it on the stage in the first frame of the main timeline and name it “bar” the bar will grow from left to right according to the % of downloaded frames Apply “stop” action to the first frame of your movie it will prevent the movie from playing until all frames are loaded Stop(); Progressive preloader 10preloader.fla

34. stop(); myInterval = setInterval (preloader, 10); setInterval ()calls specified function preloader() every 10 milliseconds myInterval variable which will recall the function Preloaders 10preloader.fla

35. function preloader() { if (_root.getBytesLoaded() >= _root.getBytesTotal()) // flash checks whether the the loaded data in bytes is greater than or equal to the total data in bytes in our .swf file { play(); // if the condition above is true – play the movie clearInterval(myInterval) // once download is complete we do not need to check the progress any more. cleraInterval deletes setInterval applied to myInterval var } Preloaders 10preloader.fla

36. bar._xscale = (_root.getBytesLoaded() / _root.getBytesTotal()) * 100; // the horizontal scale of bar will stretch based on the % of loaded bytes Text.text = Math.round(_root.getBytesLoaded() / _root.getBytesTotal() * 100) + "%"; // Math.round() makes a whole number of the % of download // “%” character is end of the string // the result is assigned to the Text field to be displayed } // closes the function preloader () Preloaders 10preloader.fla

37. stop(); myInterval = setInterval(preloader, 10); function preloader() { if (_root.getBytesLoaded() >= _root.getBytesTotal()) { play(); clearInterval(myInterval) } bar._xscale = (_root.getBytesLoaded() / _root.getBytesTotal()) * 100; Text.text = Math.round(_root.getBytesLoaded() / _root.getBytesTotal() * 100) + "%"; } Preloaders 10preloader.fla

38. stop(); myInterval = setInterval(preloader, 10); function preloader() { if (_root.getBytesLoaded() >= _root.getBytesTotal()) { play(); clearInterval(myInterval) } bar._xscale = (_root.getBytesLoaded() / _root.getBytesTotal()) * 100; Text.text = Math.round(_root.getBytesLoaded() / _root.getBytesTotal() * 100) + "%"; } Preloaders 10preloader.fla