1 / 38

Interactive Movie Clips Control: Mastering Timelines in ActionScript

Learn to control individual movie clips, nested clips, and main timelines interactively in ActionScript. Understand complex interactions, targeting, and relative paths for efficient navigation.

sherriv
Download Presentation

Interactive Movie Clips Control: Mastering Timelines in ActionScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related