F9 for actions

I was fortunate enough to meet Terry Paton at this year's MAX conference. If you don't know, he's a Flash game developer that produces some great work and contributes a lot of knowledge to the online web of Flash resources - definitely a recommended follow.

Anyway, he made a blog post showing simple distance-based radial collision technique that he uses often in his games. The technique wasn't new to me, but something about his post lit a fire in me to explore the idea to an extent that I've never put down in code before.

While playing around with the concept, I thought to myself that knowing when something hits something else is great, but often for games you want to know where something hit the other thing and usually you want one or the other or both of those objects to react upon that collision, much like things react to collisions in the physical world. It's also useful knowing if something collides with a certain coordinate, such as the current position of the mouse.

So I took Terry's code and expanded upon it with the idea that instead of getting back a true or false on whether objects are colliding, instead if there is a collision, you get back a data object with some really useful information about that collision. Here is the Collider Class:

package { import flash.display.Sprite; import flash.display.DisplayObject; public class Collider { public static var lastCollision:Object; private static var pointsprite:Sprite; public function Collider() { // constructor code } public static function checkPointCollision( px:Number, py:Number, o1:DisplayObject, customRadius:Number = 0 ):Object { if( !pointsprite ) { pointsprite = new Sprite(); pointsprite.graphics.beginFill( 0, 0 ); pointsprite.graphics.drawCircle( 0, 0, 1 ); pointsprite.graphics.endFill(); } pointsprite.x = px; pointsprite.y = py; return Collider.checkCollision( pointsprite, o1, customRadius ); } public static function checkCollision( o1:DisplayObject, o2:DisplayObject, customRadius1:Number = 0, customRadius2:Number = 0 ):Object { var dx:Number = o1.x - o2.x; var dy:Number = o1.y - o2.y; var csquared:Number = dx*dx+dy*dy; var dist:Number = Math.abs(Math.sqrt(csquared)); var r1:Number; var r2:Number; if( customRadius1 != 0 ) { r1 = customRadius1; } else { r1 = (o1.width*.5); } if( customRadius2 != 0 ) { r2 = customRadius2; } else { r2 = (o2.width*.5); } var tr:Number = r1+r2; if (dist < tr ) { if(!lastCollision) { lastCollision = {}; } lastCollision.angle = degFromDeg( Math.atan2(dy, dx) * (180/Math.PI) ); //have to convert flash angle (-180 to 180) to real angle (0 to 360) lastCollision.radians = lastCollision.angle * (Math.PI/180); //now I can get a REAL radian! lastCollision.oppositeAngle = lastCollision.angle+180; //opposite angle - in case you want to make the collidee (o2) go in the opposite direction lastCollision.oppositeRadians = lastCollision.oppositeAngle * (Math.PI/180); //cool math to calculate the intersecting x and y... is this useful? maybe. var a:Number = ( ( r1 * r1) - ( r2 * r2) + csquared ) / ( 2 * dist ); var ix:Number = o1.x + a * ( o2.x - o1.x ) / dist; var iy:Number = o1.y + a * ( o2.y - o1.y ) / dist; //return the intersecting coordinate lastCollision.x = ix; lastCollision.y = iy; return lastCollision; } lastCollision = undefined; return undefined; } private static function degFromDeg( flashDegrees:Number ):Number { var realDegrees:Number = flashDegrees; while ( realDegrees >= 360 ) { realDegrees -= 360; } while ( realDegrees < 0 ) { realDegrees += 360; } return realDegrees; } } }

And here it is in action, followed by the timeline code for the swf

import flash.display.Sprite; import flash.display.DisplayObject; var bumpers:Vector.<Bumper> = new Vector.<Bumper>(); var collision:Object = {}; init(); function init():void { for( var i:int = 0; i < 40; i++ ) { var b:Bumper = new Bumper(); //b.x = Math.random()*stage.stageWidth; //b.y = Math.random()*stage.stageHeight; b.x = 90*Math.cos(i) + stage.stageWidth*.5; b.y = 90*Math.sin(i) + stage.stageHeight*.5; bumpers.push(b); addChild(b); } this.addEventListener( Event.ENTER_FRAME, onFrame ); } function onFrame( e:Event ):void { for( var i:int = 0; i < bumpers.length; i++ ) { collision = Collider.checkCollision( player, bumpers[i] ); if( collision ) { arrow.rotation = collision.angle; arrow.x = collision.x; arrow.y = collision.y; player.xvel = 8*Math.cos( collision.radians ); player.yvel = 8*Math.sin( collision.radians ); bumpers[i].xvel += Math.cos( collision.oppositeRadians ); bumpers[i].yvel += Math.sin( collision.oppositeRadians ); } collision = Collider.checkPointCollision( mouseX, mouseY, player ); if( collision ) { player.xvel = 5*Math.cos( collision.oppositeRadians ); player.yvel = 5*Math.sin( collision.oppositeRadians ); } } }

It's not perfect, but for getting you up and running with collisions it does a pretty decent job. Enjoy

So in my latest endeavor of JSFL, I was building a panel that allows one to browse for an XML file that another program I built puts together. The xml file defines a set of FLA files and the number of scenes within that file. The file is loaded in and parsed out by actionscript, and once it's all ready to be built I looped over the data and fired off a JSFL script to build each FLA file based on the specified parameters. Now figuring out how to build the FLA file and add scenes was pretty easy, even the JSFL documentation made it pretty apparent how to do this:

function createFLATemplate( dir, filename ) { fl.createDocument("timeline"); var newDoc = fl.getDocumentDOM(); newDoc.height = 430; newDoc.width = 550; newDoc.framerate = 24; fl.trace( dir+"/"+filename+".fla" ); fl.saveDocument( newDoc, dir+"/"+filename+".fla" ); }

The problems came about when I assumed that it would be no problem to call this JSFL process from AS3 in a loop. For some reason at very seemingly random points, the loop script would just die within the loop, sometimes it might get through half of the FLA files, or just a few, or nearly all of them. But very consistently it was never able to create all of the FLA files in one shot. My first inkling was that instead of doing this within a loop, I should turn it into a batch process and have the AS3 script wait for each file to be created before creating the next, it seemed like a full-proof idea. I was wrong. The batch process worked perfectly in theory, but again the JSFL script would just kill everything at some point in it's processing. The solution that I came up with was to keep the batch process in place, however I used setTimeout with a 500ms timeout. Not the most elegant solution, but this has fixed the problem, the JSFL script no longer dies, so I guess whatever processes that were running and getting tangled up now have sufficient time to clean themselves up for the next process to run.

public function fileComplete():void { curFile++; setTimeout( buildModule, 500 ); }

One of my latest projects had me scratching my head while I was doing my R&D. The project was to build a Flash panel that could pull assets in from another FLA that acts as a library. My first thought was to see if there was any way to copy items directly out of the library and add or paste them into the current working FLA. In my research this just isn't possible, but I was still able to get the panel built.

Basically the process that works is as follows:

Open the library FLA file

Put the wanted library item on the stage with library.addItemToDocument()

Use fl.getDocumentDOM().clipCut() to add the item to the clipboard

Close the library

Use fl.getDocumentDOM().clipPaste() to add the asset to the FLA

It seems pretty simple and it is, truly the hardest part was figuring out that that was the process to use. Here's what my JSFL looks like:

//Loads an asset from the libraryFile into the current working FLA //libraryFile - the filename of the library (icons.fla) //AssetName - the asset name as it is in the FLA library function LoadAsset( libraryFile, AssetName ) { var originalDoc = fl.getDocumentDOM(); fl.openDocument( librariesPath() + libraryFile ); var libDoc = fl.getDocumentDOM(); fl.getDocumentDOM().library.addItemToDocument({x:0,y:0}, AssetName); libDoc.clipCut(); fl.closeDocument(fl.getDocumentDOM(), false); originalDoc.clipPaste(); } //this is where I'm keeping the library FLA files function librariesPath() { return fl.configURI + 'Resources/AssetLibraries/'; }

And here's the panel:

The way it all works is the panel loads an XML file that defines all the library files and populates the combo box. Then when a file is selected from the combo box, I have another JSFL function that opens the FLA and grabs all the top-level (not in folders) asset names from the library and returns them back to the panel as a comma delimited string. The string is broken up into an array and populates the asset list. The 'Add to Stage' button then uses the name in the list to call back to the JSFL referenced above.

Just wanted to link up a really helpful blog post for migrating to how Flash CS5 does Font embedding. You can no longer use the [Embed] tag to accomplish this in your classes.

In my attempt to make my custom components compatible with Flash CS5 from CS4, I found that my Inspectable parameters that were Objects were not working, and in fact would cause all parameters that come after it to not work.

Before I continue on with the main topic here, I just want to note that regardless of what order you define your Inspectable parameters, Flash reads them in Alphabetically by the variable name. So when I say the parameters that come after the Object parameter, I mean all those that come after it Alphabetically.

To get right down to it, the problem ended up being that I defined my parameter's defaultValue property with single quotes rather than double. CS4 didn't ever care about this, but it seems CS5 is a lot more picky about how you define things. Here is the before and after:

BEFORE (broken):

[Inspectable (name="Parameters", variable="ButtonParameters", type="Object", defaultValue='command:"",event:undefined,frame:1,group:undefined,scene:undefined')]

AFTER (fixed):

[Inspectable (name="Parameters", variable="ButtonParameters", type="Object", defaultValue="command:'',event:undefined,frame:1,group:undefined,scene:undefined")]

So I just upgraded to Flash CS5 this week at work and I found a really finicky problem that does not seem to be documented anywhere. I build a lot of custom components for my job, and if you've ever done it you know that building custom components for Flash is a little like an Indiana Jones adventure - you get beaten up a bit, there's some problem solving, and a whole lot of improvising before you reach the end, oh yeah and snakes too.

Anyway, the problem I came across was that with my custom components moving from CS4 (where they worked great) to CS5, my components no longer had their parameters visible in the component inspector, or in CS5 the properties panel. After an hour of Google searching with no answer to be found I decided it had to be an edge case of some sort.

The way I had previously listed my Inspectable tags in my code had been after my class declaration and before my property declaration - so it looked a little like this:

public class NavigationButton extends UIComponent { [Inspectable (name = "Button Type", variable = "ButtonType", type = "List", defaultValue = "Text", enumeration = 'Text,Blank,Hidden')] [Inspectable (name = "Disabled", variable = "Disabled", type = "Boolean", defaultValue = 'false')] [Inspectable (name = "Label", variable = "ButtonText", type = "String", defaultValue = 'Next')]

In CS4 this was a completely acceptable way to define your inspectable parameters for your custom components. However in CS5 they just do not register. After looking at how a few tutorials organize their Inspectable tags, I found that a few of the more recent tutorials define their Inspectable parameters just before the getter and setter functions for that parameter. So with a little cut and paste I moved the Inspectable tags just above the getters and setters like so:

[Inspectable (name = "Label", variable = "ButtonText", type = "String", defaultValue = 'Next')] public function set ButtonText( t:String ):void { btnlabel = t; draw(); public function get ButtonText():String { return btnlabel; }

And viola! The Component Definition now shows all of my Inspectable parameters that I have defined in the component class. Also note that when you make the change, you'll want to open the Component Definition window twice, because it does not recompile the clip until you hit the OK button on that window. So the parameters won't show up the first time, but they will after the clip gets recompiled.

I've researched and tested a few ideas, but for the most part the conclusion is that there is no nice way to monitor the stage for some sort of "Selection Event" when building WindowSWF panels or JSFL scripts. JSFL does allow you to listen for some events, however I found none of these to suffice for wanting to know when the user has selected an instance item on the stage.

Adding an ENTER_FRAME event listener to your panel works. Basically calling out to a JSFL script on each frame to see if anything is selected, but the thought of having this execution loop running is like nails on a chalkboard when it comes to being efficient. Also I noticed bugs when trying to drill into objects - double clicks not registering on the stage, etc. So that idea was pitched out the window. A timer would do the same to a lesser degree, but again it's not as nice a solution as having Flash tell us that something was selected.

I couldn't find any online resource to talk about how people are passing data from JSFL scripts to their Flash Panels. When you use MMExecute you can return a String value back to Flash, or if you're making a function available via ExternalInterface you can also pass primitive datatypes into the functions. However when you start talking about passing Objects of any significant structure, things get a little hairy.

So it was my conclusion that I needed to serialize my data object in JSFL in order to pass it to Flash. And when you talk serialize in Javascript you should think JSON, so I set in search for an out-of-the-box Javascript Object to JSON serializing function - should be easy to find right? Unfortunately, after two days of struggling with different implementations, I found that some of the String functions like match and replace cause errors (not saying they aren't implemented, just for whatever reason they didn't work for me like they do in regular JS).

So without further delay, here is my very less-than perfect, less-than optimized JSFL Object to JSON String functions. (Also note that these will convert any Arrays nested in your Objects to Objects themselves with keys being the string equivalent of their indexes.

-- UPDATE --

I wrote this post before testing it completely against sending the JSON string over to Flash via the SWFPanel.call() method. What I found out while trying to do this is that you can not, for whatever reason, send literal single or double quotes embedded within the string variable. So I changed up my function to use tildes (~) instead of quotes, which I then replaced with quotes over on the AS3 side of things.

function serializeObject( o ) { var s = '{'; s += so( o ); //remove the last comma s = s.slice( 0, s.length-1 ); s += '}'; return s; } function so( o ) { var s = ''; for( var key in o ) { if( o[key].toString() == '[object Parameter]' ) { s += '~' + key + '~:{'; s += so( o[key] ); //remove the last comma s = s.slice( 0, s.length-1 ); s += '},'; } else if(o[key].constructor === Array ) { for( var key2 in o[key] ) { if(key2 != "" && o[key][key2].value != '""') { s += '~' + key2 + '~:~' + o[key][key2].value + '~,'; } } }else { if(key != "" && o[key] != '""') { s += '~' + key + '~:~' + o[key].toString() + '~,'; } } } return s; }

And here is what I do on the AS3 side to convert it into an Object from JSON (note I'm using the as3corelib to JSON decode the string).

//function exposed via ExternalInterface and called from JSFL public function setParameters( s:String ):void { var p:RegExp = /~/g; var t:String = s.replace(p, '"'); var o:Object = JSON.decode(t); }

I am building a Flash Panel for a Custom Component I have built. I didn't want to use the CustomUI setting for components because I wanted to be able to allow this panel to edit multiple instances of this component at once. The problem I have run into is figuring out how to get my component instances on the stage to update or redraw themselves when a property changes.

I searched and searched for a way to do this and didn't find anything that worked. The problem lies in the fact that the Flash Panel doesn't (and shouldn't in my opinion) know about the specific instances on the stage. JSFL does know about those instances but only as it's predefined Element object type, so there is no way to access public functions of that component from JSFL. You can access the Inspectable properties of the component, but changing these values does not tell Flash's live preview to redraw the components.

So, if you were able to follow all of that, the problem here is that I can update properties of my components using my Flash Panel and JSFL, but there is no way to force redraw those components on the stage when I change the properties... until now.

I found that when deselecting my components that I had just changed properties on, the stage would redraw them. So all I did in JSFL was deselect the components and reselect them. Thankfully this forces a redraw of the live preview components. Here's what that JSFL code looks like:

function invalidateStage() { var selectedArray = fl.getDocumentDOM().selection; fl.getDocumentDOM().selectNone(); fl.getDocumentDOM().selection = selectedArray; }

I recently needed to convert an XML object to an XMLNode object in Actionscript 3. It's not exactly rocket science, but the way to do it is hard to track down via the tubes. Here's how I did it:

var my_xml:XML = new XML("<foo><bar></bar><bar2></bar2></foo>"); var xmldoc:XMLDocument = new XMLDocument(); xmldoc.ignoreWhite = true; xmldoc.parseXML(my_xml.toXMLString()); var my_xmlnode:XMLNode = xmldoc.firstChild;

And there you have it. my_xmlnode is now an XMLNode object containing the data of my_xml. I needed to do this while using an AS3 Library that required an XMLNode, but I wasn't about to go AS2 style and construct the node one attribute at a time.

It’s Tuesday Morning here in San Francisco. I’m sitting by a defender arcade game listening to a conversation of AIR and Flex Data service development and sipping coffee. So far, the conference has provided some great sessions. Right now is a great time to to be a Flash/Fex/AIR Developer. Adobe is providing more food for the community, almost too much. If you’re not hungry, if you’re not an Actionscript fan-boy, It may become hard to keep up with all that is happening. This is both good and bad.

Since the release of Actionscript 3 we’ve seen a split in the Flash community mostly between those who code and those who don’t. Now with Flex, AIR and all the services that extend them, there is yet another narrowing of skill requirements. This is great because now the Flash Developer is really becoming defined while still being able to provide a wide range of solutions to those in need. The bad news is, the narrower the community gets, the less Adobe will pay attention to it.

My strategy is to find a niche as a Flash Developer. Find your process and master the pieces needed to go from concept to completion. But always strive to keep up with what is going on around Adobe and around the Flash community.

Check out my twitter http://www.twitter.com/walpolea to see more updates at MAX.

What I've yet to see in the AIR marketplace is an application that uses the SWF format as it's content that it distributes. I can envision a fantastic gaming platform created in AIR that allows for a Flash developer network to create a myriad of playable online and offline Flash games.

The app could distribute a framework FLA that anyone could use to create a game. Games could be uploaded to a server and then sold in an online marketplace navagable through the AIR application or an online Flex app. Once bought and downloaded, games could be played online and offline, cross-platform.