Now that the 2014 release of Adobe Creative Cloud is released and available to everyone, I’d like to highlight one of the coolest new workflow enhancements between two of my favourite applications: Flash Professional and Edge Animate!
Flash Professional is a highly flexible asset generation beast. You can use all sorts of internal tools to draw out and animate rich, complex vector assets. Edge Animate does not include a lot of internal tools for asset generation – it relies on other Creative Cloud applications for this task. Flash Professional and Edge Animate make a great pairing due to these facts – as the new release allows us to generate and inject Edge Animate specific sprite sheets.
First, open the FLA document which includes the animation you want to convert to an Edge Animate sprite sheet. Right-click on the symbol within the Library you wish to use and choose Generate Sprite Sheet…
The Generate Sprite Sheet dialog will appear and present us with a bunch of options. Since we are targeting Edge Animate, Adobe has actually built in a preset we can employ here (ad not have to deal with the minutia of sprite sheet generation). Choose Edge Animate as the data format and hit Export to generate the appropriate files.
Alongside the original FLA document, we now have both a PNG file and an EAS file. The EAS file is hugely important as this is a data file which instructs Edge Animate to create a new symbol based upon the data extracted from Flash professional.
Inside of our Edge Animate composition, go to the Library and locate the little plus sign next to Symbols. Click on this icon and choose Import Sprite Sheet… from the menu which appears.
Once we choose the PNG to import, the Define Sprite Tiles dialog appears. This dialog allows us to define both rows and columns for our sprite sheet – and make other adjustments which we may need to make depending upon the data format of our sprite sheet. However… we don’t need to deal with all that as Flash Professional generated an EAS file for us as well! Be sure and select the Load an EAS file option and the ability to do further edits to the tiles will all become disabled. This is because we have the precise data we need inside the EAS file itself! Hit Import to continue.
We now have a new symbol within our Library which has been generated from our Flash Professional sprite sheet! This is just a normal Edge Animate symbol at this point which can be used on the Timeline, employ Playback Actions, have Filters applied to it, et cetera… Note that since sprite sheets (by their nature) are bitmap images… scaling the symbol will produce visual artifacts.
If you want to use vector-based output from Flash Professional within Edge Animate – have a look at my post about exporting SVG!
If you are curious as to how this was all achieved by Edge Animate – have a look at the symbol timeline to see all of the various keyframes which have been established to modify the clipping properties… revealing only one frame at a time to create this animated content.