Creating objects in Flash – an overview
Flash has a class-based OOP system which is very similar to that of Java (but note that it is slightly different to that used by Javascript).
Example 1 – Following the mouse – a MouseFollower object
In Flash, an object (instance) is created from a recipe (Class file) through the use of the new keyword: -
var MyObject:MyCustomClass = new MyCustomClass();
In ActionScript, a simple class can contain 3 things: -
- A Constructor function which initialises the instance.
- Variables or properties which hold each instance’s data.
- Functions or methods which allow each instance to do things.
To use this class, we make a new instance, sending it the greeting we wish it to have, and then get it to return that greeting for a specific name by calling its sayHello() function: -
// make new instance
var myGreeter:Greeter = new Greeter("Hello there");
// get it to display a greeting in the Output window
trace(myGreeter.sayHello(“Ian”));
// or to get it to display a greeting on stage,
// we would use a text field and load the text into it:
this.greetingDisplay.text = myGreeter.sayHello(“Ian”);
In this example, we will make a simple object which moves a MovieClip instance towards the current mouse position. It will use the built-in Timer object to update itself regularly. Since we will only move the clip part of the way on each update, it will appear to ‘follow’ the mouse, changing direction and speed as it moves.
Further developments
- Make a new movie and create 2 extra layers, naming them scripts, labels, and ball.
- Select frame 10 in all of your layers and then choose Blank Keyframe from the Insert menu.
- Do the same for frame 20.
- Select Frame 1 of the labels layer and then, using the Frame palette, give it the label init.
- Select Frame 10 of the labels layer and give that the label main.
- Lock the scripts and labels layers. Your timeline should look something like this: -
- Save your movie as following1.fla in a new project folder.
- Choose Insert > New Symbol… and then choose movieClip.
- Create a simple ball shape which will follow your mouse around.
- When you have done, return to the main timeline.
- Pick up your new symbol in the Library and drag it onto the stage to create an instance.
- Name your instance ball1_mc.
- Choose New from the file menu and then select ActionScript File. This opens a new .as external script file – the only place you are allowed to create classes.
- Carefully type the following: -
- Save the file as MouseFollower.as in the same folder that the flash Movie is in. Make sure the file name is exactly the same as the Class name.
- Select the frame actions for frame 10 of the scripts layer. Edit the script so it is as follows: -
- Check your code syntax and close the Actions pane. Your movie is finished.
- Test it by pressing the CONTROL and ENTER keys together.
package {
// these are the built-in Flash objects we are using
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.display.MovieClip;
public class MouseFollower {
// the properties of the class
private var myClip:MovieClip;
private var myTimer:Timer;
// the constructor function
public function MouseFollower(targetClip:MovieClip){
myClip = targetClip;
myTimer = new Timer(33,0);
myTimer.addEventListener(TimerEvent.TIMER,timerListener);
myClip.addEventListener(Event.REMOVED,removedListener);
myTimer.start();
}
// the event listener for the Timer
// called every 33 milliseconds (30 times per second)
private function timerListener(e:TimerEvent):void {
// find how far away the mouse is on the stage
var xdif:Number = myClip.stage.mouseX - myClip.x;
var ydif:Number = myClip.stage.mouseY - myClip.y;
// move clip a tenth of the way toward the mouse
myClip.x += (xdif/10);
myClip.y += (ydif/10);
}
private function removedListener(e:Event):void{
myTimer.stop();
myTimer.removeEventListener(TimerEvent.TIMER, timerListener);
myTimer=null;
}
}
}
// script for main
// make a new MouseFollower that moves the 'ball1_mc' MovieClip
var follower:MouseFollower = new MouseFollower(this.ball1_mc);
// hold the main timeline here
stop();
- Fading in a movieClip
Try editing the class so that instead of moving the clip, the object sets its clip’s alpha to 0.3 when it is instantiated and it then reacts to the mouse going over the clip (you’ll need to add an additional EventListener for MouseEvent.MOUSE_OVER). When this happens, the timer is started and the timerListener function gradually increases the alpha property of the clip - and then stops the timer by calling the myTimer.stop() function when it reaches 1.0. - Fading out when the mouse leaves
Try adding to your fade-in example so that when the mouse leaves the Clip (the event is MouseEvent.MOUSE_OUT), the clip is faded out again to 0.3. - Changing the size of a movieClip
A common Flash effect is for the instance to grow when the mouse goes over it and then shrink back when the mouse leaves. This is particularly effective when a (large) number of shapes are on stage. Each one will need its own instance (hint – try using a loop to set up several instances automatically).
This page was last updated on 31st October 2013