Having Fun with Flash, webOS, haXe and Actuate

I am not sure if every Flash developer would agree with me, but I believe that a good animation library is the bread-and-butter of good Flash development. Sure, Flash allows you to create animations by hand using the timeline, but being able to spontaneously and reliably generate animations through Actionscript goes a long way to giving projects polish and flair.

Add to that a healthy arsenal of easing functions like exponential, quad and elastic easing, and you can easily create animations that burst with life. There is no reason why you should need to perform a “cut” when transitioning from one screen to another. With a good tween library behind you, it’s just as simple to create a fade animation, which looks much better in most cases.

(By the way, if you’ve never heard the term “tween” before, it is a coined phrase for the “between” that occurs from one “key” frame to another. Tweening allows you to define an end state and have all the in-between animation steps generated for you. Very useful!)

There are many tween libraries for Actionscript, but my favorite is Actuate. I made it to be that way, actually. Actuate is my own tween library which uses syntax similar to jQuery to simplify its use, and to also make it aggressively compatible with applications that provide code completion while you are programming. When last benchmarked, Actuate performed faster than TweenLite, and included more features. It doesn’t include as many plugins as TweenMax, but it does everything I need it to, plus some extras.

http://joshuagranick.com/code/haxe/Actuate%20Example.zip

Here’s the code for this example. Like the “Getting Started” sample I shared yesterday, it compiles to Flash, webOS and as a native desktop application. It should also be possible to run this example on an iPhone since it is also supported by hxcpp and nme.

Actuate is available through haxelib, so download it to your system using this command:

haxelib install actuate

All you need to do to add Actuate to a haXe project is use “-lib actuate” when you compile. The transparency and animation all work great on webOS. I am not using any anti-aliasing in OpenGL for performance reasons, so the edges of each circle is a little bit rough, but this could easily be resolved by loading bitmaps instead of using the native draw command for circles.

Here’s a picture of it running on my phone. It also runs fullscreen on the TouchPad, but we’ll leave that one to your imagination.

Of course you’ll be able to see the source code if you have downloaded the example already, but I’ll post it here as well so it is easy to see. The code should look especially familiar to Flash developers — in fact, the syntax highlighter I am using on my blog doesn’t have highlighting for haXe, so I told it to highlight my code as if it were Actionscript.

package;
 
 
import com.eclecticdesignstudio.motion.Actuate;
import com.eclecticdesignstudio.motion.easing.Quad;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageQuality;
import flash.display.StageScaleMode;
import flash.filters.BlurFilter;
import flash.Lib;
 
 
/**
 * @author Joshua Granick
 */
class ActuateExample extends Sprite {
 
 
	public function new () {
 
		super ();
 
		initialize ();
		construct ();
 
	}
 
 
	private function animateCircle (circle:Sprite):Void {
 
		var duration:Float = 1.5 + Math.random () * 4.5;
		var targetX:Float = Math.random () * stage.stageWidth;
		var targetY:Float = Math.random () * stage.stageHeight;
 
		Actuate.tween (circle, duration, { x: targetX, y: targetY }, false).ease (Quad.easeInOut).onComplete (animateCircle, [ circle ]);
 
	}
 
 
	private function construct ():Void {
 
		var creationDelay:Float;
 
		for (i in 0...60) {
 
			creationDelay = Math.random () * 10;
			Actuate.timer (creationDelay).onComplete (createCircle);
 
		}
 
	}
 
 
	private function createCircle ():Void {
 
		var size:Float = 5 + Math.random () * 35;
		var blur:Float = 3 + Math.random () * 12;
 
		var circle:Sprite = new Sprite ();
		circle.graphics.beginFill (Std.int (Math.random () * 0xFFFFFF));
		circle.graphics.drawCircle (0, 0, size);
		circle.x = Math.random () * stage.stageWidth;
		circle.y = Math.random () * stage.stageHeight;
		circle.alpha = 0;
		addChildAt (circle, 0);
 
		Actuate.tween (circle, 2, { alpha: 0.2 + Math.random () * 0.6 } );
 
		animateCircle (circle);
 
	}
 
 
	private function initialize ():Void {
 
		Lib.current.stage.align = StageAlign.TOP_LEFT;
		Lib.current.stage.scaleMode = StageScaleMode.NO_SCALE;
		Lib.current.stage.quality = StageQuality.BEST;
 
	}
 
 
 
 
	// Entry point
 
 
 
 
	static function main () {
 
		#if flash
 
		Lib.current.addChild (new ActuateExample ());
 
		#elseif webos
 
		Lib.create (function () { Lib.current.addChild (new ActuateExample ()); }, 0, 0, 31, 0xFFFFFF, Lib.HARDWARE);
 
		#elseif cpp
 
		Lib.create (function () { Lib.current.addChild (new ActuateExample ()); }, 320, 480, 60, 0xFFFFFF, Lib.RESIZABLE);
 
		#end
 
	}
 
 
}
  • Awesome, Can’t wait to see it on the touchpad 🙂

  • Krzysztof Różalski

    Hi Joshua,
    I’ve just discovered your blog. Great stuff here!
    Also I am very-happy-user of Actuate 🙂 
    Keep up the great work!

  • martin_lindelof

    Thanks for making actuate for haXe!

  • Hi! Thanks for the example! I do have a problem though. When I compile it to ‘windows’ then the colours are wrong – there are only blue-ish colours present in the animation. When I do a trace of [Std.int (Math.random () * 0xFFFFFF)] then I get hex numbers all ending in FF. See attached screenshot. What can I do about it? Any ideas?

  • Hmm, that’s strange. Well, ultimately random colors are not that important. Perhaps there’s a cleaner/better way that I could be generating random numbers?

  •  Hi! I found a solution to the problem. You can read about it on my blog: http://code.finkjensen.be/2012/04/compiling-the-haxe-nme-actuate-example-using-conditional-compilation/