1. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Intro to Action Script 9 "The games of a people reveal a great deal about them.“ Marshall McLuhan

2. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Controlling different timelines 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

3. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Controlling different timelines main timeline Movie Clip 1 MC5 MC4 MC7 MC 2 MC6 MC3

4. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Controlling different timelines Name and address on the movie clip. method Basic actions: gotoAndPlay() gotoAndStop() stop() play() nextFrame() prevFrame()

5. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Methods ActionsScript 2.0 Classes > Movie > MovieClip > Methods

6. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Target paths 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

7. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Target paths _root. clock. stop ();

8. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Targeting movie clip instance from the main timeline 1.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

9. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Targeting movie clip instance from the main timeline 01root_mc.fla Open 01root_mc.fla flash file and apply an action to stop the second clock “clock2” movie clip ( 1 frame action)

10. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Targeting nested movie clips 02nested.fla Movie clip inside another movie clip inside another movie clip …etc Parentmovie clip A Childmovie clip B inside movie clip A Any transformations applied to the parent will effect the child Target path: parent name. child name. method ();

11. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Targeting nested movie clips 02nested.fla 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();

12. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Absolute and relative paths Relative directions from present location go two blocks straight, turn left relative link targets timelines that are inside the current timeline (on the lower level) Absolute directions from any place go to 929 W. Harrison street URL targets all timelines (higher and lower levels)

13. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Absolute and relative paths 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

14. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Absolute and relative paths Absolute starts with the main timeline _root

15. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Absolute and relative paths Relative current timeline called THIS (myself)

16. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Absolute and relative paths RelativeAbsolute this.clock2 _root.clock2

17. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Targeting main timeline from inside the movie clip 03absolute.fla 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

18. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Targeting movie clip from another the movie clip 04mcs.fla 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

19. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Targeting movie clip itself 05self.fla 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

20. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Targeting movie clip itself – parent 06parent.fla 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

21. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 With action 07with.fla 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; }

22. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 With action 07with.fla 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(); }

23. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Scope 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

24. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Scope 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 }

25. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Scope 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) }

26. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Scope 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 }

27. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Finding target paths 08path.fla 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

28. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Finding target paths 08path.fla 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

29. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Finding target paths 08path.fla Modify the script wheels. onRelease = function() { trace ( targetPath ( this ) ); } test the movie _level0.train.wheels

30. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Preloaders 10preloader.fla 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

31. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Preloaders 10preloader.fla _framesloaded () _totalframes () number of frames that have downloaded getBytesLoaded() getBytesTotal() tests for the amount of data that has downloaded with movie clip methods

32. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Preloaders 10preloader.fla MovieClipLoader class that provides powerful events such as onLoadStart() onLoadProgress()

33. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Progressive preloader 10preloader.fla 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();

34. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Preloaders 10preloader.fla stop(); myInterval = setInterval (preloader, 10); setInterval () calls specified function preloader() every 10 milliseconds myInterval variable which will recall the function

35. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Preloaders 10preloader.fla 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 }

36. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Preloaders 10preloader.fla 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 ()

37. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Preloaders 10preloader.fla 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) + "%"; }

38. AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Preloaders 10preloader.fla 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) + "%"; }