Let me explain it to you in video form:

One of the first in a series of What’s Poppin’ from frogdesign.

This place (bigbadcode.com) will henceforth be used for what I’m going to term content pieces. Posts about some programming trick or implementation details. Perhaps interviews or video pieces and of course bragging and smacktalk. The theme will be either things that relate to me or things that I’ve created.

This other place (bigbadcode.tumblr.com) will have more frequently updated content, things I stumble upon in my travels, interesting links, videos etc.

That is all.

Learn how to make this:

Didn’t we see this technology in the original star wars when they rebuilt Luke’s hand?

http://hackety.org/2008/05/05/sneakingRubyThroughGoogleAppEngine.html

Basically he’s shown a proof of converting Ruby bytecode into Python bytecode, enabling ruby to run in python only places, like Google app-engine. Quite cool.

Additionally he’s been creating hackety-hack which is an environment for anyone (children) to learn programming. _why’s built it out of ruby and gecko and his own shoes framework, it looks great so far.

Check out the first bylaw of hackety-hack:

Beginners should be greeted to Hackety Hack by a cartoon character. (For the sake of argument, let’s call this character: Hacky Mouse.)

Check it out:

Or you can see just the important part where I am quoted.

“AIR allows for local caching,” says Josh Bloom, design technologist at frog design. “That was a huge portion of the application – storing the most recent and relevant content was an important feature for agents. Dragging and dropping within and from other apps also made things much easier for agents than using paper and ink.”

To get started create a new “Actionscript Project” in Flexbuilder.

Now we will add some code to testDebug.as that traces out when the application is run:

package {
import flash.display.Sprite;
public class testDebug extends Sprite
{
public function testDebug()
{
trace("I am created")
}
}
}

With that code saved we will Debug this actionscript project and if everything is working correctly you should see something like this in your console window:

So far everything is working correctly in Flexbuilder, now lets get Flash into the action.

Open up flash and create a new Flash file, lets call it TestFlexBuilderIntegration.fla. Add some timeline animation or something so you know it’s coming from the Flash IDE, save this file into the root directory of your new Flex project.

Now set the document class of your Flash file to ‘testDebug.’ The AS class that we wrote in flexbuilder will now be the document class for your flash file as well.

Here come the tricks, under Publish Settings enable “Permit debugging”

Next in the Formats tab of Publish Settings change the .swf file to be published to the flexbuilder bin-debug folder.

The path will be something like

"/Users/YourName/Workspace/testDebug/bin-debug"

Now if you test the movie in Flash you should see your animation as well as the trace “I am created” in the flash IDE.

For the final steps we go back to Flexbuilder and under the html-template folder open index.template.html in a text editor. This is a template file that generates the index.html that is used to launch your app. We are going to update it so it points to the .swf generated by Flash IDE instead of Flexbuilder.

Replace all occurrences of ${swf} with the name of your Flash IDE generated swf file. In this case it would be TestFlexBuilderIntegration.

The moment of truth! In Flexbuilder Debug your project, it should launch the .swf in a browser for you and the animation you created should be playing, additionally the trace(”I am created”) line should show up in your console.

If Flexbuilder has trouble connecting to the debugger, right click in the swf in the browser and change the debugger connection to 127.0.0.1 and that should solve that issue.

Now you have the full power of Flexbuilder to code and debug and you still have the Flash IDE to layout movieclips and rapidly prototype things. Sweet.

Notes:

As you make changes to the code in Flexbuilder, you’ll need to go back to Flash and republish.

Profiling should probably work as well though I haven’t played with it yet.

You can set breakpoints in Flexbuilder without needing to republish.

The D.J. had to kill the music (because you can’t have outdoor music after 10:00PM!!) so I was left to spin music-less, the crowd helped by clapping a beat.

Fire!

Bonus points to any reader who can identify my desktop wallpaper.