flash native_classes_graphic

The extension of native classes makes sense for graphic sub-classes. In the chapter entitled Interactivity we developed a drawing application which we will now enrich by adding a graphic object in the form of a pencil.

The graphics have been made in 3D Studio Max then an exported as an image to be used in Flash. In a new Flash CS3 document let’s import the graphic and transform it into a clip symbol.

Make sure you modify the coordinates to make the tip of the pencil to be at 0,0.

This clip will become the writing implement for the application and to do this we will need to make the pencil available for programming. In the Linking properties panel we check the Export for ActionScript panel and give it the class name Pencil, we leave the root class name flash.display.MovieClip.

The class Pencil is therefore a sub-class of MovieClip:

When we click on the OK button, Flash tries to find a class of the same name that could have been defined. If it doesn’t find one it displays the following message:

The path class doesn’t contain a definition for this class. A definition will be automatically generated in the SWF file on exportation.

As we saw in the chapter entitled Symbols Flash automatically generates an internal class used to instantiate the symbol.

In this example the Pencil class is generated by Flash in order to be able to instantiate it, it is then displayed in the following way:

// instancing pencil
var myPencil:Pencil = new Pencil();
// added to the display list
addChild ( myPencil );

Flash automatically generates a Pencil class which is inherited from the MovieClip class. Remember that this class is currently inaccessible. If we need access to it we could write the following code:

package
{
import flash.display.MovieClip;
public class Pencil extends MovieClip
{
public function Pencil ()
{
}
}
}

The Pencil class has all the capabilities of a MovieClip:

// instancing pencil
var myPencil:Pencil = new Pencil();
// added to the display list
addChild ( myPencil );
// the Pencil class has all the capacities of a clip
myPencil.stop();
myPencil.play();
myPencil.gotoAndStop (2);
myPencil.prevFrame ();

This automatic class generation proves useful when we don’t want to manually define a class for each object, Flash looks after it which saves us time. On the other hand Flash also gives us the possibility to manually define graphic sub-classes and add anything we want to it.

Alongside our Flash CS3 document we create a pencil class inherited from the MovieClip:

package
{
import flash.display.MovieClip;
public class Pencil extends MovieClip
{
public function Pencil ()
{
trace( this );
}
}
}

We save the class under the name Pencil.as, beware, the name of the class has to be the same as the .as file.

The organisation of our working files has to be the following:

Flash will now use our definition of the class and not the one that is automatically generated. To be sure of this we use the Linking properties panel.

To the right of the Class field there are two icons. When clicking on the first one we can validate the definition of the class in order to verify that Flash is using our definition.

Once the definition is validated a message indicating that the class has been detected is displayed. If we click on the edit icon represented by a pencil situated to the right of the validation icon, the class opens in Flash in order to be edited:

The symbol is correctly linked to our class, we can now instantiate it:

// displays : [object Pencil]
var myPencil:Pencil = new Pencil();
// added to the display list
addChild ( myPencil );
// position at x and y
myPencil.x = 250;
myPencil.y = 200;

When the pencil is created the constructor is triggered, the trace instruction that we have put into place displays: [object pencil].

Our symbol is displayed:

For the moment we have not defined any new functionality in the Pencil class, it simply mimics the flash.display.MovieClip class.

All of the functionalities that we have added to the Pencil class will automatically be available in the symbol, they are linked to the class.

By adding a *test method in the *pencil class:

package
{
import flash.display.MovieClip;
public class Pencil extends MovieClip
{
public function Pencil ()
{
trace( this );
}
public function test ( ):void
{
trace("position on the x axis is : " + x );
trace("position on the y axis is : " + y );
}
}
}

This is automatically available in the instance we create:

// displays : [object Pencil]
var myPencil:Pencil = new Pencil();
// added to the display list
addChild ( myPencil );
// position at x and y
myPencil.x = 250;
myPencil.y = 200;
/* displays :
position on the x axis is : 250
position on the y axis is : 200
*/
myPencil.test();

The first thing that our pencil knows how to do is to follow the mouse. We’re not going to use the startDrag instruction as we need to work on the movement of the pencil, the startDrag instruction wouldn’t let us. To do this we’re going to use the MouseEvent.MOUSE_MOVE event.

Our class is a sub-class of MovieClip and has all of the necessary interactive events that we will need. We need to listen to the MouseEvent.MOUSE_MOVE event in the constructor:

package
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
public class Pencil extends MovieClip
{
public function Pencil ()
{
trace( this );
addEventListener ( MouseEvent.MOUSE_MOVE, moveMouse );
}
private function moveMouse ( pEvt:MouseEvent ):void
{
trace( pEvt );
}
}
}

In the previous code the moveMouse method is listening to the MouseEvent.MOUSE_MOVE event.

Why would we prefer the MouseEvent.MOUSE_MOVE event to the Event.ENTER_FRAME event.?

The latter continuously triggers the mouse movement independently. Even if the pencil is immobile the Event.ENTER_FRAME event is broadcast. This could eventually slow down the performance of our application.

Remember that the MouseEvent.MOUSE_MOVE event is no longer global as in ActionScript 1 and 2 and is only broadcast upon rollover of the pencil. If we need to listen to the mouse movement over the whole stage we have to access the stage object.

Worth remembering

• It is possible to link an existing symbol to a manually defined graphic sub-class.
• The symbol inherits all the functionalities of the sub-class.