Wwwebber's Blog

Box2d 2.1 How to use a b2Controller

Posted in actionscript 3, Box2d by wwwebber on July 9, 2010

Box2d 2.1 brought some awesome improvements
1) improved class structure.
2) buyouncy support
3) a set of Controller Classes that are well described by the docs as ” a convience for encapsulating common per-step functionality.” (read about them here)

These improvements were actually worth the fact that none of your prior Box2d code (and I mean none) would compile with the new class structure.

If you used earlier versions of Bo2D, you already used something like these controllers–the Gravity Vector that you passed to the world object at construction.
This was a b2Vec2 (the gravity) that the world applied to all non-static objects. Ie the walls wouldn’t be affected by the gravity vector but all the moving objects would be affected by a constant force downwards (unless your gravity had an unusual orientation)

There are several types of controllers and they all extends b2Controller . The TestBuoyancy class that comes with the TestBed shows an example of how to use the b2BuoyancyController .

All of the controllers have the following methods


I was interested in using a b2ConstantAccelController. There aren’t really any examples out there for this (at least that I could find) so here’s how easy it is to implement a b2ConstantAccelController–which will just apply an additional vector each time step to any bodies added to that controller.

Now, unlike the GravityVector you can arbitrarily add and remove objects from the controller. How could this be useful? Imagine that you have gusts of wind blowing sideways…you can add your objects to a Contoller and have them pushed sideways…then when the wind passes you could remove them from that controller.

How to create a b2ConstantAccelController :

//construct object and its acceleration vector
var myAccelController:b2ConstantAccelController = new b2ConstantAccelController();
const WIND_VEC :b2Vec2 = new b2Vec2(10,0);
//associate controller with vector
myAccelController.A = WIND_VEC

Henceforth, all b2bodies that are stored in myAccelController will have the WIND_VEC applied to them during the b2World.step() function .. you don’t have to do anything else except add and remove bodies to the controller.

//now let’s add something to the Controller

…when you want to remove the body

Tagged with: ,

Actionscript 3 Tween Library Skinner’s Gtween vs Greensock’s tweenlite

Posted in actionscript 3 by wwwebber on July 5, 2010

Just wanted to add a little extra feed back for anyone who is currently trying to decide on an Actionscript 3 tween library. There are many other to choose from. I spent some time over the last month playing with both Grant Skinner’s GTween library and GreenSock’s TweenLight library . In a nutshell, you can’t go wrong with either one. Both are awesome and I’m glad someone did almost all that heavy lifting!

However, after using both libraries over the course of the development of my most recent online maths games Rj The Robot on the topic of how to combine like terms.

First off, why both libraries ROCK!
-Awesome levels of customization of tween types (sinusodal, Bounce etc..) the differences here are small. At the time of this post, Greensock has some that the GTween library does not .
– Optimized performace.

How they Differ

Object Model
Greensock— You can use either static based methods to create tweens or use good old OOP to create tween objects.
GTween –it uses an object model, though a static based interface is also available

ie–they are pretty much the same here.

Greensock wins this–it comes with an awesome component that let’s you visualize tweens and will actually output the code needed to create the tween! Go Greensock (see what I mean here)
GTween–Do not think anything like this is provided.

Greensock– TweenLite does not include an event system. However, if events are important to you then you just use GreenSock’s TweenMax (also free).
GTween– has a great event system.

Error reporting
Greensock– Hands down wins in the experiments I ran. If you pass Greensock a null object, it will throw an Error reporting the null reference.
GTween– In my tests, Gtween silently did nothing when I tried to tween a null object.
The winner here is clearly the Greensock library. Addendum: It turns out there is a reason for Gtween accepting null objects –read comments below. ┬áThat ┬ásaid, Greensock allows the same chaining of events but reports null pointers.

In the end, you really can’t go wrong with either library. They both support object oriented syntax, chaining of tweens,and event dispatching and listening (Greensock only does this with the TweenMax..which is also free). Greensock does have a few extra tween types , the awesome visualizer as well as some amazing plugins –all of which led me to go with using Greensock.

If I you know of any other differences that I missed (and I know there must be many), please fire off a quick comment.

Using Actionscript to make Subscripts with Flash’s Text Layout Framework

Posted in actionscript 3 by wwwebber on June 5, 2010

Here’s a quick post on on some new Actionscript functionality that takes advantage of Flash’s new Text Layout FrameWork to create subscript and superscipt in the new types of text fields that you can create–These new things aren’t the TextField() that you are used to but rather are part of this whole new, much more sophisticated framework.. I used Flash CS5, but this should work with CS4 also. Apparently, the Text Layout Framework (which is just a component that you can install with the extension manager) will work with CS4.

This post will show you how to use Actionscript to perform this task. There are already lots of videos up on web showing designers how to use the Flash IDE to do this..so here’s how to code it.

What our code will produce:

I have made several math based flash programs, and it has always been a pain in the butt to deal with exponents and subscripts. It has definitely been a long time coming–the ability to create sub and superscripts in a Flash. Now with the new TextLayout Framework you can do all sorts of things including subscripts!. I needed to learn how to do this for a new maths game I was working on Rj The Robot-Since this was a math game, I needed to be able to write exponents in dynamic text fields…so let’s make some subscripts in Flash!

Just Tell me the Steps

Step 1) Download The Text Layout Component here (http://labs.adobe.com/downloads/textlayout.html) Note: do not install the ‘open source’ version, go down the page a bit to get the “text layout component

Step 2)
use the Flash Extension Manager to install the “Text Layout Flash Component.mxp” file…and then restart flash.

Step 3) Open up a Flash File , then open up the components panel (window-> components) and open up the “standard components” and drag an instance of the “textlayout” component onto the stage. (After you have done this you can actually delete the component from the stage…we just needed to make sure the component was in our library…I assume you could also just drag the component directly to the library to achieve this )

Ok, now you can use all of the cool text layout features that we will need to be able to make a Subscript in Flash.

Step 4) Now a bit of Actionscript. I am not going to go over all of the details of how the Text Frame Work works(the two links below explain the framework in greater detail).

Download the Source Code here

Good links on TextLayout
Adobe Docs
link 1
link 2

Here’s the code for Main

import flash.display.LineScaleMode;
import flash.display.Sprite;
import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.elements.SpanElement;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.formats.CharacterFormat;

import flash.display.DisplayObject;
import fl.controls.TextLayout;

/* textLayout_flash is the base class for the Text Layout component. If you bring up the properties on the TextLayout Component in the library, you will see this.*/

public class MainTxt extends Sprite

public function MainTxt()

var myTextComponent:TextLayout;
// Instantiate the textLayout_flash class to create a TextLayout Component.
myTextComponent = new TextLayout();

// Add the new component to the Stage.
var myTextComponentOnStage:DisplayObject = addChild(myTextComponent);
// Get the Text Flow from the TextLayout Component.
var textFlow:Object = myTextComponent.textFlow;
var span0:SpanElement = textFlow.getFirstLeaf();
span0.text = “E=MC”;

//get reference to ‘root’ ParagraphElement of the TextFlow
var rootParagraphElement:ParagraphElement = textFlow.getChildAtIndex(0);

var span2:SpanElement = new SpanElement();
span2.text =”2″;

var span3:SpanElement = new SpanElement();
span3.text =”\n\nLog”;
rootParagraphElement.addChild( span3 );

var span4:SpanElement = new SpanElement();
span4.text =”2″;
rootParagraphElement.addChild( span4);

var span5:SpanElement = new SpanElement();
span5.text =” = 3″;
rootParagraphElement.addChild( span5 );

var cf:CharacterFormat = new CharacterFormat(textFlow.characterFormat);
cf.fontSize = 20;
textFlow.characterFormat = cf;

var superScriptFormat:CharacterFormat = new CharacterFormat(textFlow.characterFormat);

superScriptFormat.baselineShift = flashx.textLayout.formats.BaselineShift.SUPERSCRIPT;
span2.characterFormat = superScriptFormat;

var subScript:CharacterFormat = new CharacterFormat(textFlow.characterFormat);
subScript.baselineShift = flashx.textLayout.formats.BaselineShift.SUBSCRIPT;
span4.characterFormat = subScript;



Comments Off on Using Actionscript to make Subscripts with Flash’s Text Layout Framework