Movie Control & Basic Callbacks

OK, now for something new: callbacks

	Review		Variables Statements = 1 line of code Statement block = a series of statements grouped together, like: while(counter < 5) { counter = counter + 1; // or counter =+ 1 or counter ++ trace(counter); }


	Movie Control

	What is a movieClip?		The fundamental building blocks of Flash interactivity. movieClips can contain anything the root movie can, even other movieClips. Very Powerful

	How to make one		1. Select something or things in the timeline, choose "Convert to Symbol" under the Modify menu (or F8) and select the "Movie Clip" radio button. 2. Choose "New Symbol" under the Modify menu and select the "Movie Clip" radio button.

	Why movieClip, button and graphic		MovieClips have timelines Buttons are a subset of movieClips with a special type of timeline. Confusing, ain 't it? Graphics have no timelines and can't be referenced by ActionScript, but can be animated in the timeline they're resident in.


	First, Some Jargon

	Effecting the timeline		Start with a smart setup Build layers for each item, plus an actions layer Make a circle on the left Tween it to the right over 20 frames Tweening it makes it a Graphic symbol Run it Add some code to the actions layer: //stop the movie stop(); Run it Change the code to: //jump to frame 20 and stop gotoAndStop(20); Run it Add a keyframe at 20 About keyframes... Why tweening isn't automatic... Add some code to frame 20 //jump to frame 10 then play gotoAndPlay(10); Run it

	Targets		Every action needs a target. A paradigm shift in Flash MX from Flash 5: Don't put your scripts in clips, put them in scripts in the top level timeline (the _root) and target them to the clip!

	Instances		Key Concept: The movieClip/Instance relationship Changing a clip changes all instances, changing an instance changes only that instance. You can't affect a movieClip with actionScript, only its instance. Example... Make a new movieClip symbol Add some animation Drag it to the stage. Bingo! An instance Name your instances well. Suffer'n suffixes!

	Objects		What's an Object: A container, full of properties, functions (called methods) and other containers that may be effected by events. ie. A car is an object A car has properties: Color Mileage Speed A car has functions: Acceleration Braking Steering A car has other objects and properties within it: Engine Size Horsepower Seats Style And cars have events: Start ignition Run out of gas Skid So, you might define a car with these values for its properties Color = red Mileage = 24mpg In actionScript = $100 car.color = "red" car.mileage = 24 car.cost = 100 An objects parameters usually know what datatype it wants (color name, mpg value, dollar value). And you might tell the car object to run some of its functions/methods: "Car, please accelerate fast to 20 mph, then steer left, then brake hard." In actionScript car.onStart = function() { car.accelerate("fast"); while(car.speed < 20) { //loop until the speed is reached } car.steer("left"); car.brake("hard"); }

	Instances as Objects		A movieClip instance is an object. Properties (to name a few): THE FOLLOWING ARE NOT CORRECT IN ACTIONSCRIPT 3.0 - THEY NO LONGER HAVE AN UNDERSCORE IN FRONT OF THEM _currentFrame _height _name _rotation _width _x _y Methods (to name a few): gotoAndPlay() gotoAndStop() play() stop() getBytesLoaded() getBytesTotal() (hint: if there's a (), it's a method) Events (also a few): FLASH ACTIONSCRIPT DOES NOT USE THESE EVENT METHODS ANYMORE onMouseDown onMouseUp onEnterFrame So, some movieClip instance actionScript: circle_mc.gotoAndPlay(3); Or, more complex: if(circle_mc.getBytesLoaded() == circle_mc.getBytesTotal(){ circle_mc.gotoAndPlay(3); }


	Let's Build a Movie

	The movie		New movie Make 24 frames Make 4 layers Labels Scripts Buttons Clip animation Good Habit #2: Make layers for labels and scripts. Insert a new movieClip symbol Edit the new symbol Make 24 frames Make 4 layers Labels Scripts Animation Circle Create a circle graphic symbol Drag it to the Circle Layer, off-center Drag another one to the Animation layer Shrink it and animate it across the bigger circle from frame 1 to 24 Put a keyframe on the script layer at 24 Add this script to it: gotoAndPlay(1); Go back to the _root timeline Drag the movieClip onto the Circle layer Name the instance "circle_mc" Animate it with a CW rotation Run it.

	ACTIONSCRIPT 3.0 WON'T WORK WITH THIS METHOD Let's add some interactivity		Add four buttons; Play, Stop, Play circle_mc, Stop circle_mc Name all instances Button talk: Play button on(release){ play(); } Stop button on(release){ stop(); } Run it. Play circle_mc button on(release){ circle_mc.play(); } Stop circle_mc button on(release){ circle_mc.stop(); } Run it.

	FLASH DOESN'T WORK WITH CALLBACKS ANYMORE. DISREGARD THIS ENTIRE SECTION		A callback is a when we attach a new function/method to an object. Like if we an oil pressure gauge to our car object. First, let's go back to the clip and add some stuff... Add some frames at the end Add a script at 25: stop(); Delete the circles after frame 24 Put a label at 25 "tada" Put some text there: "Ta Da!!!" Now, some callbacking... circle_mc.onRelease=function(){ circle_mc.gotoAndPlay("tada"); } Run it. A big fat Gotcha! Always name the object your going to effect. This will fail, but without any errors in the output window: circle_mc.onRelease=function(){ gotoAndPlay("tada"); }

	Deeper and deeper... FLASH ACTIONSCRIPT 3.0 TRASHES THIS BIT TOO...		Let's add some more to the movie: Add a new layer in main_circle movie clip called "blink". Make an ellipse over the circle. Make it a movieClip called blink Name the instance blink_mc Edit the clip Add a 15 frame blinking animation Back up to _root Add two buttons; Play circle_mc.blink_mc, Stop circle_mc.blink_mc Button talk: Play circle_mc.blink.mc button on(release){ circle_mc.blink_mc.play(); } Stop circle_mc.blink.mc button on(release){ circle_mc.blink_mc.Stop(); } Run it...