Flash Builder 4 : vertical+horizontal centering
of swf in ActionScript projects

Posted by Thomas – May 31, 2010

Flashdevelop The other day I wanted to edit the html wrapper that Flash Builder generates for the swf – so that it centres any swf both horizontally and vertically without applying the Flash/Flex Builder default scaling.

After some tinkering, going back and looking at my Flashdevelop html templates for the I found that what I usually do to center an swf with swfObject is write some CSS:

<style>
      #divFloat {
      position:absolute;
      top:50%;
      left:50%;
      right:50%;
      bottom:50%;
      margin:-300px;       /* Half the height of your SWF*/
      margin-left:-400px; /* Half the width of your SWF*/
   }
   </style>

To get this to work all that is needed is a div with the matching id ‘divFloat’ added to the html body of the html page that acts as a wrapper for the swf; and this will centre the swf vertically and horizontally. (A more old school approach would be using nested tables…)

Based on the CSS above we can device a similar approach and apply it to Flash Builder’s publishing method. The part to figure out is how to insert it into Flash Builders template based creation of the html wrapper.

To do so we must edit the index.template.html in the html-template folder in the Flash Builder project directory: which is the blueprint for the html file generated in the bin-debug folder.

In Flash Builder our html wrapper and swf will be based on what name we choose for our main application file (the one that initializes our application). This value is held by the variable ${application} in index.template.html. It is also the id of our embedded content in the html page that results in bin-debug, based on our index.template.

So we can write in index.template.html:

<style>
body { margin: 0px;}
#${application} {
      position:absolute;
      top:50%;
      left:50%;
      right:50%;
      bottom:50%;
      margin:-300px;       /* Half the height of your SWF*/
      margin-left:-400px; /* Half the width of your SWF*/
   }
</style>

If our application class has the name ‘OrangeApp.as’ that will translate into #OrangeApp{ in the resulting html file in the bin-debug folder and target the id of the embedded swf so that the CSS is applied to centre it.

Of course the swf still needs to have the following code in it’s application class:

stage.scaleMode = StageScaleMode.NO_SCALE
stage.align = StageAlign.TOP_LEFT

And we should also specify the width and height of the swf in the index.template.html as usual by just replacing ‘width’ and ‘height’ with the real width and height of our swf. That will center our html wrapped SWF in Flash Builder; and remove the pesky default ‘Flex scaling’ without too much work!

Bookmark and Share

Formatting XML text with html tags +
the TextFormat class

Posted by Thomas – May 25, 2010

A while ago I came to the conclusion that you can not apply a TextFormat to dynamic textfield set to htmlText = “My text” without that the TextFormat overwrites the formatting done with html tags in the XML.

Of course you can. It turns out that the issue I was having had more to do with not referring to the fonts I’d embedded + not embedding all versions of a font and not using defaultTextFormat.

Let us take Arial as an example. To embed it in AS3 in bold, italic, and normal formatting we would like so:

package
{
   import flash.display.*;
   import flash.text.*;

   /**
    * ...
    * @author Thomas James Thorstensson
    */
   public class TextFmt extends Sprite
   {

      [Embed(source='C:/Windows/Fonts/arial.ttf'
      ,fontFamily ='arialNormal'
      ,fontStyle ='normal' // normal|italic
      ,fontWeight ='normal' // normal|bold
      ,unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E'
      //,cff='false'
      )]
      public static const arialNormal:Class;

      [Embed(source='C:/Windows/Fonts/arialbd.ttf'
      ,fontFamily ='arialBold'
      ,fontStyle ='normal' // normal|italic
      ,fontWeight ='bold' // normal|bold
      ,unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E'
      //,cff='false'
      )]
      public static const arialBold:Class;
     
      [Embed(source='C:/Windows/Fonts/ariali.ttf'
      ,fontFamily ='arialItalic'
      ,fontStyle ='italic' // normal|italic
      ,fontWeight ='normal' // normal|bold
      ,unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E'
      //,cff='false'
      )]
      public static const arialItalic:Class;

      public function TextFmt()
      {
         Font.registerFont(arialNormal);
         Font.registerFont(arialBold);
         Font.registerFont(arialItalic);
      }

   }
}

In our XML we can then directly refer to one of the versions of the font like so:

<xmlnode>Lorem ipsum<font face="arialItalic"> and some italic text</font> and end.</xmlnode>

If we set a dynamic textfield to the above content, we can still apply additional formatting to it
with a regular TextFormat as long as we use defaultTextFormat rather than setTextFormat :

arialNormal = new TextFormat();
arialNormal.font = 'arialNormal';
arialNormal.size = 11;
arialNormal.color = 0xCCCCCC;
myText.defaultTextFormat = arialNormal;
myText.htmlText= xmlnode;

The dynamic textfield will take the ‘arialNormal’ format without the arialItalic format being overwritten. The italic style will so to speak take on the arialItalic and the arialNormal (thus it will be white, but still italic).

If we instead would use setTextFormat after myText.htmlText= xmlnode; it would be the case that the formatting in the html would be overwritten by the TextFormat.

Bookmark and Share

Augmented reality, lab 1

Posted by Thomas – April 2, 2010

Better late than never as I’ve began to delve into Augmented Reality.

There’s so much inspiring work going on in the AR community. The QT movie above is just a brief demo based on the start toolkit for FLAR over at http://saqoosha.net/en/flartoolkit/start-up-guide/ – slimmed down by me for Flashdevelop. The bitmap material is from Scuba’s latest album, Triangulation…

I’m currently looking at learning more about markers; and it’s been pointed out to me that there’s a useful marker generation tool here: http://flash.tarotaro.org/blog/2009/07/12/mgo2/.

-I aim to post more frequently now and will keep you updated on my digs.

Bookmark and Share

New dubstep track written

Posted by Thomas – March 16, 2010

‘Bow’ listen @ http://www.myspace.com/thomasjamest

Bookmark and Share

Papervision3D, FlashDevelop template

Posted by Thomas – November 27, 2009

Flashdevelop Here’s a simple FlashDevelop template to speed up the creation of a 3D render in Papervision3D 2.0. Download the template from here or copy the code below and save it as View3D.as.fdt.

In FlashDevelop go to Tools –> Application files. This will open your Explorer: Now go into the folder Templates > ProjectFiles > AS3Project and drop the template in there.

You will now if you left click on your src package and go to Add > see the option ‘BasicView’ in the menu that pops up.

The custom arguments available for template creation are listed at http://www.flashdevelop.org/community/viewtopic.php?t=1521

Here’s the template:

package $(Package) $(CSLB){

   import flash.events.Event;
   import org.papervision3d.view.BasicView;

   public class $(FileName) extends BasicView {
      $(EntryPoint)
      /**
      * $(FileName)
      */
     
      public function $(FileName)():void {
         init();
         startRendering();
      }

      private function init():void {
      }
     
      override protected function onRenderTick(e:Event=null):void{
         super.onRenderTick();
      }
   
   }
}

Lastly, a good set of templates can be found over at http://www.actionscriptdeveloper.co.uk/puremvc-first-thoughts-flashdevelop-templates/

Bookmark and Share

Greensock v11

Posted by Thomas – October 25, 2009

The new Greensock engine is out and looking great performance wise! Check out the new features here. What the point of my below example is I don’t know but it runs smooth,

Get Adobe Flash player
Bookmark and Share

Papervision3D, interactive material

Posted by Thomas – October 17, 2009

With the aid of the Papervision3D class org.papervision3d.events.InteractiveScene3DEvent it’s easy to create an interactive papervision 3D primitive such as this Cube (click on it’s sides):


Get Adobe Flash player

The cube uses the BitmapMaterial class (the sides are embedded jpg’s) and all we need to do to make them interactive is to remember to set interactive to true:

bitmapMaterial6.name = "6";
bitmapMaterial6.interactive = true;

Once we created our cube the last bit is just to add the event listener to the InteractiveScene3DEvent which is dispatched by the Cube. And we can use the event property evt.face3d.material.name of the current material side clicked to retrieve the name of the same:

// create a cube based on the list
primitive = new Cube(materiallist, 400, 400, 400, 3, 3, 3);
primitive.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, handleClick);
//.../
private function handleClick (evt:InteractiveScene3DEvent) :void {
testText.text = "__side clicked : " +evt.face3d.material.name;
}

The InteractiveScene3DEvent is not limited to click events however, the documentation at http://papervision3d.googlecode.com/svn/trunk/as3/trunk/docs/org/papervision3d/events/InteractiveScene3DEvent.html – shows that we can also listen for MOVE, OVER, OUT, etc. Nice.

If you would like to get hold of the full code for this example then you can download it here (Flashdevelop project).

Theres some great Papervision tutorials over at http://www.madvertices.com where I’ve taken several myself!

Bookmark and Share

AS 3 Dictionary Object: a way to map instances of sealed Classes

Posted by Thomas – October 16, 2009

In Action Script 3 most classes are sealed. This means that for most Objects we are not able to create new properties run time beyond those that where available compile time. This is not the case with Array and Object though which are both dynamic and regularly come in handy to us for example in the creation of an associative array (or sometimes called a ‘hash’) :

var myAssoc:Object = new Object();
myAssoc["oranges"] = 101;
trace ("number of oranges " + myAssoc["oranges"])

But what to do if you’re in need of creating properties upon an instance that belongs to a sealed class. For example say that we with flash.display.SimpleButton would like to add the property counter which tells us how what time interval to start a timer with. We could not:

(//import flash.display.SimpleButton etc...)
var myBtn:Simple Button = new SimpleButton();
myBtn.timestamp = 1000;

The above would throw an error as SimpleButton like most classes in ActionScript 3 are sealed. The solution would be to extend SimpleButton with a dynamic class like so :

package  
{
   import flash.display.SimpleButton;
   public dynamic class DynamicButton extends SimpleButton
   {
      public function DynamicButton()
      {
         
      }
   }
}

Making use of our dynamic button we could now :

var dynBtn:DynamicButton = new DynamicButton();
dynBtn.timestamp = 1000;
trace ("dynamic button timestamp value " + dynBtn.timestamp);

And this would compile without errors and work nicely. However there is an other approach to this which comes very handy as a way of creating dynamic properties and referring to them. Here enters the Dictionary Object. This object is a bit like our associative array above but with the big difference that it can take an object itself as lookup key to find a value. For our oranges we get:

var dict:Dictionary = new Dictionary();
var myOrange:Object = new Object();
dict[myOrange] = 101;
trace ("number of oranges dictionary approach " + dict[myOrange]);

Using a Dictionary Object we thus have a way to lookup properties using the objects themselwes rather than using the variable names to refer to properties. This also works for instances of sealed classes such as our button example. We can write:

dict = new Dictionary();
var myButton: SimpleButton = new SimpleButton ();
dict[myButton] = 1001;
trace ("dictionary button counter value " + dict[myButton]);

Since the button is the key, it does not matter that SimpleButton is a sealed class. We are not trying to assign a new property to the SimpleButton instance by using a variable name. Instead we use the instance itself and thus we here have a handy way of assigning values also to instances that don’t take new dynamic properties.

Some further readings:
http://www.gskinner.com/blog/archives/2006/07/as3_dictionary.html
http://www.zombieflambe.com/actionscript-3/as3-dictionary-class-array-object-benchmark/
http://pixelwelders.com/blog/best-practices/2008/speed-tests-objects-vs-arrays-vs-dictionaries/

Bookmark and Share