Posts Tagged ‘as3’

Debugging with Adobe Flash CS3

Wednesday, January 21st, 2009

When I started developping a bit seriously in ActionScript, I quite immediatly searched a debugging tool in Adobe Flash Professional, as I use while working in PHP or Java. And fortunately, this feature is available is available.

However, all AS developers I worked with don’t know those debugging capabilities, using extensively trace instead.

Debugging allows you to see, wherever in the execution flow of your code, the state of your objects (object attributes values, local variables, movieClip properties…). It is terribly simple and convenient.

Say you want to know the value of a variable somewhere in the middle of the execution of the function.
Instead of tracing this value (ending up with a code cluttered with “trace” statements, and having to republish each time you put a new trace), you can ask Flash to pause the execution within this function, and to tell you the value of this (and all other) variables.
You just need to

  1. open your AS file in Adobe Flash CS3
  2. set a break point on the line you want to check (right click/toggle breakpoint)
  3. run the movie in debug mode (CTRL+Shit+Enter)

Then the debug window should open. You just have to click the green arrow to get to the line with the breakpoint. You can add new breakpoints as you debug. You can also follow the execution line by line, by clicking the “step over” button.
On the right side of the debug window, you can browse through the variables and properties of the current object.

If you have a main flash embedding other swf, to debug the other swf, you need in the “publish setting” of those to tick “Permit debugging”.

More info here!

Publishing from Flash Develop in AS3

Tuesday, January 20th, 2009

In as2, it was possible to compile and publish your project from FlashDevelop, thanks to the integration of MTASC, an open-source AS2 compiler.The most convenient use of this was that you could check that your code was compiling, without the sometime time-consumming need to publish the animation – by simply pressing F7.

However MTASC does not support AS3.
It is still possible to easily publish your AS3 animation from Flash Developer by
- keeping the corresponding .fla open in Flash CS3
- in FlashDevelop, in the project property (accessed through right click on the project name), in the “output” tab, click the “No output, only run pre/post commands”.
- Then pressing CTRL+Enter while on FlashDevelop will publish whatever file is open in Flash CS3. If there are compile errors, they’ll be shown in the results panel of Flash Develop with a link to the line where is the error.

But you still need to go through the publish process.

It seems it is possible, with the Flex SDK, to compile without using Flash CS3, as explained here. However I did not yet make it work…

Plenty of as3 tips

Tuesday, November 4th, 2008

I discovered yesterday the following awesome thread of “the tip of the day” for as3:

http://www.kirupa.com/forum/showthread.php?t=223798

Cue point improved

Monday, November 3rd, 2008

I just discussed in the previous post about actionscript cue points. We however found out that they had limitations – they are not very accurate.

To be sure to get exactly synchronised with the frame of the video you want to, you better use Event cue points – which needs to be added in the flv itself – using for example AfterEffects.

You then add listeners the same way than with actionscript cue points.:

this.videoComponent.addEventListener(MetadataEvent.CUE_POINT, _handleCuePoint);

Video cue points

Wednesday, October 29th, 2008

If you want to trigger some events at certain times of a playing video, an easy solution is to use cue points.

You need to

a) place an instance of the VideoPlayer component on the stage

b) on the as file for your animation, add cue point on the video:

this.videoComponent.addASCuePoint(5, "firstCuePoint");
this.videoComponent.addASCuePoint(10, "secondCuePoint");

This add 1 cue point at 5.00 seconds of the video, and another at 10.00 seconds

c) add a listener

this.videoComponent.addEventListener(MetadataEvent.CUE_POINT, _handleCuePoint);

d) on the listening function, find out which cue point was triggered, and play along!

private function _handleCuePoint(pEvent:MetadataEvent) {
trace("CUE POINT REACHED!");
if (pEvent.info.name == "firstCuePoint"){
  //do something regarding the first cue point
}else{
  //do something regarding the second cue point
}
}

Use of constants

Monday, October 27th, 2008

In flash projects, there are often a set of colors used and reused through the project. It is quite easier to manage by defining them as constants like GREEN_LEMON rather than obscure 0×123456. Practically, you just need a Config.as file where you define them as static constants

e.g.:

public static const GREEN_LEMON:uint = 0×123456;

And then access

You can them easily access it throughout your application:

myTextFormat.color = Config.GREEN_LEMON;

AS3: checking the environment at runtime.

Friday, October 17th, 2008

It can sometimes be useful to now at runtime in which environment is running our flash animation (from the CS3 flash player, from a test server, from the production server…). For example, you may want to display the framerate when testing, but not on the production environment. Or you may need to access another WebORB (or whatever) server in test and prod environment.

As the flash application runs in the client, I found that the easier was to rely on a flashvars set in the index file.
So all you need to do is:

In the html file embedding the swf: (change “production” to “local” or “testing” on the corresponding environment)

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://macromedia.com/cabs/swflash.cab#version=9,0,0,0"
  id=flaMovie width=800 height=600>
  <param name=movie value="flaMovie.swf">
  <param name=FlashVars value="environment=production">
  <param name=quality value=medium>
  <param name=bgcolor value=#00000>
  <embed src="flaMovie.swf" 
    FlashVars="environment=production" 
    bgcolor=#000000 width=800 height=600
    type="application/x-shockwave-flash">
  </embed>
</object>

And then in the action script code:

var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
var environment:String = paramObj["environment"];

And then you can use this environment flag to show / hide debug informations.