Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Sprites to Flash AIR Application
1190
single,single-post,postid-1190,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
spritesToFlash

Sprites to Flash AIR Application

What this Application does

In short, this AIR Application will convert an un cropped png sequence into a cropped png sequence that is correctly placed on the Flash timeline.

This is beneficial in a number of ways.

First, by removing transparent pixels, rendering speeds increase improving performance.

Secondly, the amount of time it would take to manually import all cropped images and position them on the Flash timeline would be enormous.  Bonus!

 

Under the hood – JSFL Extending FLash CS5

This Application takes advantage of JSFL.  Flash Javascript allows us to manipulate a .fla (Flash Document) just as we would if we were using the Flash interface.

Documentation can be found here –> Extending Flash CS5 JSFL

To write your own scripts simply create a .jsfl file, write some javascript, and execute the file.

This Application does all of that behind the scenes.

 

How to use this Application

First, download SpritesToFlash and install the .dmg and Zoe.air applications.  You will need to use both.

Open SpritesToFlashV2 and you should see an application like this.

It’s pretty straight forward following the steps from here, however, here’s the steps in further detail.

Step 1: Selecting a directory of un cropped .pngs.

-  The best way to create this directory is to export your flash animation as a .mov.

-  Using photoshop or after affects you can export frames of the movie giving you a .png sequence.

-  Now select the directory of .pngs and press build.  What this does is import all images onto the flash timeline, set’s them to lossy compression, and exports a swf file named ZOE.swf to the desktop.  This swf is required for step 2.

Step 2: Open the installed Zoe.air and load the published ZOE.swf created from step 1.

-  Zoe is going to export the ZOE.swf as png sequence, however, the images will get cropped and a .json file is exported giving the image positions.  This is how step 3 imports the images correctly positioned on the timeline.

-  Set some settings in Zoe.

-  In the Source Tab select an output directory to export the png sequence created from Zoe.

-  In the Settings Tab check variable frame.

-  In the Export Tab select the Image Format drop down and choose Frames.

-  Now select Export in the top right.  This will export a .png sequence to the output directory.

Step 3: In the last step select the directory containing the .png’s exported from Zoe and press Build.  Now all images are imported to the Flash timeline correctly positioned.

 

Files:

Extending Flash CS5 JSFL

SpritesToFlash