Looking back at my previous post and the comments, I don’t think the vector versus bitmap comparison was very clear, so I tried to show it differently with the applet above. In the meantime I also got some hands-on time with matrix transformations in Flash. It’s not really needed, but if you’re interested, you can do some reading up on matrix transformations on Wikipedia and many other sites.
Every DisplayObject (Sprite and others) in ActionScript has a transform object associated with it. This can completely transform the object, among others you can manipulate the position and size with the Matrix object. You could directly change that matrix with the maths you’ve just learned, or you can use a number of handy shortcut functions. In the example I use:
- rotate: this will rotate the object around the (0,0) point. If you are drawing on the main stage, this point is located in the upper left corner. This means that if you want to rotate something around its center, it has to be located at (0,0). That is why we need to ..
- translate: this moves the object around the stage. You can actually define a coordinate system for every individual object to avoid having to translate it. This is possible if you place your sprite inside another sprite. To keep things simple I haven’t done this here, I might to it sometime later, but if you want to try it out, here are two helpful articles.
- scale: allows you to scale the image in both directions.
And here is the full source code:
package {
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Matrix;
import flash.ui.Mouse;
public class Test extends Sprite {
[Embed(source = 'library/starsmall.png')]
private var starPNGClass:Class;
private var starPNG:Bitmap = new starPNGClass ();
[Embed(source='library/star.svg')]
private var starSVGClass:Class;
private var starSVG:Sprite = new starSVGClass ();
private var scaleDir:int = +1;
private var scaleCount:int = 0;
public function Test() {
trace("started");
starSVG.height = 30;
starSVG.width = 30;
starSVG.x = 150-15;
starSVG.y = 100 - 15;
addChild(starSVG);
starPNG.height = 300;
starPNG.width = 300;
starPNG.x = 50 - 150;
starPNG.y = 100 - 150;
addChild(starPNG);
stage.addEventListener(Event.ENTER_FRAME, mouseMove);
stage.addEventListener(MouseEvent.CLICK, click);
}
private function mouseMove(evt:Event):void {
var starSVGMatrix:Matrix = starSVG.transform.matrix;
starSVGMatrix.translate( -150, -100);
starSVGMatrix.rotate(.02);
starSVGMatrix.scale(1+scaleDir*.02, 1+scaleDir*.02);
starSVGMatrix.translate( 150, 100);
starSVG.transform.matrix = starSVGMatrix;
var starPNGMatrix:Matrix = starPNG.transform.matrix;
starPNGMatrix.translate( -50, -100);
starPNGMatrix.rotate(.02);
starPNGMatrix.scale(1+scaleDir*-.02, 1+scaleDir*-.02);
starPNGMatrix.translate( 50, 100);
starPNG.transform.matrix = starPNGMatrix;
if (scaleCount++ > 100) {
scaleCount = 0;
scaleDir *= -1;
}
}
private function click(evt:MouseEvent):void {
trace("clicked @ " + evt.stageX + "," + evt.stageY);
}
}
}
You will also need those two images in your library directory (see previous posts):
And that should get you going. As you probably noticed, you’re going to need a lot of maths to do visual animations. And this is just the tip of the iceberg, 3D graphics are a little more complicated. That’s why there are libraries like Sandy3D to help you out. But that is something for a future post.