Flash Professional CC 2014 – Edge Animate Sprite Sheets

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.

flashprobunnyFirst, 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…

bunnyssThe 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.

ssfilesAlongside 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.

animateimportInside 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.

easfilecheckedOnce 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.

newsymbolWe 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!

sstimelineIf 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.

11 comments

  1. When is Edge Animate going to support vector animations? It’s such a waste of bandwidth using sprite sheets for simple animations. Not to mention the fact that you have to have multiple sprite sheets for high-density displays and scaling sprite sheets looks like garbage.

    So many issues solved elegantly by Flash long ago.

      1. Waiting for the day when the individual paths inside the SVG can be animated. Is that what you are talking about, Bill?

  2. Thanks for the tutorial – and it is different from the documentation (and how things are currently working). The docs say that each tile is imported as a separate symbol when using an .eas file. Which, indeed, they are. Why aren’t they brought in as a single symbol as your tutorial (and common sense) would argue?

    Here’s the doc page: http://helpx.adobe.com/edge-animate/using/import-sprite-sheets.html

    The animation cannot be previewed as they say when using an .eas file.

    Importing a sprite sheet based on columns and rows (not using the .eas file) does indeed create a single symbol. Is this how this is supposed to work? Should I say something to someone?

    I don’t really understand why using an .eas file should precipitate the import of separate symbols. Under what circumstance would you ever want to do that?

    Wait.

    Come to think of it, this facility would be useful when the source file is not sprite data. It would be nice to chop one image file into chunks – the size and shape of the chunks being determined by images in the source file. Art boards could be used as delimiters in Illustrator for example. Photoshop could generate CSS too. It would speed up download times and reduce file management. In other words, a single image file could supply multiple images for use in Animate – a generalization of the sprite idea.

    Is that what the developers were thinking?

    Maybe there could be a “single symbol/separate symbols” option on the import? That would be cool.

    1. Hi Chip.

      You can have seperate symbols in a sprite sheet from Flash Professional but I’m unsure how that translates into Animate. I should be able to check this later and let you know.

      Things should be functioning exactly as detailed here – but I have pinged the dev team in case they have anything more to add.

      1. It’s me. I’m sorry. I created the sprite sheet by selecting all the images I imported instead of from a symbol – the way you said in your instructions. My bad.

        Thanks for your patience.

      2. I figured out why I was confused. I never created a symbol in Flash. I just imported a bunch of files (frames from a 3D rendering), put them on the timeline to check them, selected all of them, and with a right-click, created the sprite sheet. It seems that Flash interprets individual files as individual symbols. The .eas file called out individual symbols, the detail I missed when I briefly looked inside of it.

        Again, thanks for the article, patience, and the follow-up work. All very much appreciated. This is a great workflow.

        Now I just need to figure out how to get this animation into Captivate 8. I wish Flash worked on mobile.

Comments are closed.