Using Actionscript 3 with Flex. Tutorial and Template.
One of the biggest problems of getting into Actionscript with the new open source Framework "Flex" from Adobe is, to make instant use of Actionscript 3 to generate and modify things. Many people will convert from old Flash, Processing or whatever scripting facilities to Flex, because the Flash Player 9, that goes along with Actionscript is really enhanced. And Flex from Adobe offers an open source SDK, where you can develop cool applications straightaway for free.
Instant fun for beginners.
When you start to get this done, Adobe only will throw Flex-examples at you. Or examples and tutorials with Actionscript, that are far too advanced for the beginners "Hello World" level. I also searched forums: most people want to get done quickly and start out coding with Actionscript without all this things in mind, but don't get support. That's why I prepared three files, that let you start immediately with coding pleasure.
The first file is a template, that show two ways to get sprites, that were generated with Actionscript directly on the screen. It shows two techniques, that are not obvious, especially not for beginners. Don't mind the details. Just start your projects and feel free to use my files to build upon.
The other file is more strapped down version of the above. It provides you just with an empty Flex canvas, a stub for the Actionscript and a timer to control and animate things that should appear on the screen. If you download and compile the file, not much happens. Just an empty canvas. But you can easily build scripted animations with it, also with Flex-elements, like text-boxes that jump around or buttons with bouncing width etc.
The third is at the Olympus of simplicity. I create some rotating objects on the screen, that are derived from a custom class I wrote, that extends the Sprite class.
Before you start or never did a Flex/Actionscript3 project: make sure, that you have Flex 3 SDK and the Flash 9 Plugin/Player installed. I highly suggest FlashDevelop to get our code running. It is a great, lightweight IDE for managing Flash-projects and it seamlessly integrates with the Flex SDK. I also included the FlashDevelop Project-files in the available downloads here. Doubleclick to happiness.
1. Sprites Generated in Actionscript 3 directly used and animated in Flex.
This is the main.mxml file. You will not need any other files, since the Actionscript will be handled by the Flex-script object. Just compile this file. Don't forget to set the starting point of the compiler into this file.
If you have some issues in understanding everything, look at the this and that thread.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#123456"
creationComplete="init();">
<mx:Script>
<![CDATA[
import flash.display.Sprite;
import flash.events.TimerEvent;
import flash.utils.Timer;
public var ticker:Timer;
public var mySprite:Sprite = new Sprite();
public var mySprite2:Sprite = new Sprite();
public var mySprite3:Sprite = new Sprite();
public function init():void {
ticker = new Timer(10);
mySprite.graphics.beginFill(0x00FF00);
mySprite.graphics.drawRect(0, 0, 40, 150);
mySprite.graphics.endFill();
// Don't ask why, but you have to add the sprite with rawChilden to finally work!
myCanvas.rawChildren.addChild(mySprite);
mySprite2.graphics.beginFill(0x33BB33);
mySprite2.graphics.drawRect(0, 0, 40, 150);
mySprite2.graphics.endFill();
// the other way is to use a Flex-UIComponent instead of a Flex-Canvas
myUIComponent.addChild(mySprite2);
// This implements the timerEvent
ticker.addEventListener(TimerEvent.TIMER, doWalk);
ticker.start();
// You can also dispatch timed functions like this, with an interval element:
var intervalId:uint = setInterval(doWalkInterval, 100);
// create a sprite to thest the interval
mySprite3.graphics.beginFill(0x55BB33);
mySprite3.graphics.drawRect(0, 0, 40, 150);
mySprite3.graphics.endFill();
myUIComponent.addChild(mySprite3);
}
public function doWalk(evt:TimerEvent):void {
mySprite.x += 1;
if (mySprite.x > myCanvas.width) mySprite.x = 0;
mySprite2.x += 2;
if (mySprite2.x > myUIComponent.width) mySprite2.x = 0;
}
public function doWalkInterval():void {
mySprite3.x += 2;
if (mySprite3.x > myUIComponent.width) mySprite3.x = 0;
}
]]>
</mx:Script>
<mx:Box>
<mx:Canvas id="myCanvas" x="0" y="0" width="300" height="150" backgroundColor="#EEEEEE">
<mx:UIComponent id="myUIComponent" x="0" y="0" width="300" height="150" >
</mx:UIComponent>
</mx:Canvas>
</mx:Box>
</mx:Application>
(cc) 2008 Creative Commons BY
Martin Wisniowski http://digitaltools.node3000.com
Download now!
2. Template for Actionscript 3 in Flex with timer-based animation.
As you can see, in this file is even less is going on. Grasping this will result in a deep understanding in the usage of childs-objects on the canvas and the timer.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init();">
<mx:Script>
<![CDATA[
import flash.events.TimerEvent;
import flash.utils.Timer;
// Don't forget to import your libraries here...
public var ticker:Timer;
public function init():void {
ticker = new Timer(10);
// Create Your objects here and add them to the canvas as childs...
// myCanvas.addChild();
ticker.addEventListener(TimerEvent.TIMER, doStep);
ticker.start();
// You can also dispatch timed functions like this, with an interval element:
var intervalId:uint = setInterval(doStepInterval, 100);
}
public function doStep(evt:TimerEvent):void {
// Apply your timer action on your child-objects here....
}
// use this with the interval-timer
public function doStepInterval():void {
// Apply your timed actions on your child-objects here....
}
]]>
</mx:Script>
<mx:Box>
<mx:Canvas id="myCanvas" width="300" height="300" backgroundColor="#ffffff">
</mx:Canvas>
</mx:Box>
</mx:Application>
(cc) 2008 Creative Commons BY
Martin Wisniowski http://digitaltools.node3000.com
Download now!
3. Custom self-rotating objects.
This simply creates six rotating objects, that are devied from a class. You import that class in the main.mxml by writing import com.rotator.SimpleRotator;. This tells the location and the name of the class we want to import.
I skip here the mxml-markup, and only show the actionscript. The basic concept should be already clear.
// This is the script in the main.mxml
import flash.display.Sprite;
import com.rotator.SimpleRotator;
public function init():void {
// You could made this more easy by using an array
myRotator = new SimpleRotator(50, 60, 60);
myRotator2 = new SimpleRotator(90, 60, 50);
myRotator3 = new SimpleRotator(130, 60, 40);
myRotator4 = new SimpleRotator(170, 60, 30);
myRotator5 = new SimpleRotator(210, 60, 20);
myRotator6 = new SimpleRotator(250, 60, 10);
myUIComponent.addChild(myRotator);
myUIComponent.addChild(myRotator2);
myUIComponent.addChild(myRotator3);
myUIComponent.addChild(myRotator4);
myUIComponent.addChild(myRotator5);
myUIComponent.addChild(myRotator6);
}
The class of the SimpleRotator looks like this:
// This indicated the location of the file as well
package com.rotator {
import flash.display.Sprite;
import flash.display.Shape;
import flash.utils.*;
public class SimpleRotator extends Sprite {
public function SimpleRotator(x:int, y:int, time:Number):void {
this.x = x;
this.y = y;
this.graphics.beginFill(0x00FF00);
this.graphics.drawRect( -13, -13, 26, 26);
this.graphics.endFill();
this.graphics.beginFill(0x00FF00);
this.graphics.drawCircle(0, 0, 15);
this.graphics.endFill();
this.setTime(time);
}
public function setTime(time:Number):void {
var intervalId:uint = setInterval(step, time);
}
public function step():void {
this.rotation += 3;
}
}
}
(cc) 2008 Creative Commons BY
Martin Wisniowski http://digitaltools.node3000.com
Download now!
Spread the word!
Comments (3)
yeah, Martin is flashing! great! ;)
Posted by Fabien | April 19, 2008 9:26 PM
Yes, why not?
Posted by Digital Tools | April 20, 2008 4:27 PM
"Don't ask why, but you have to add the sprite with rawChilden to finally work!"
Ah, thanks! Being forced to use the bloated UIComponent was annoying me.
Posted by Omnidon | April 30, 2008 6:16 AM