Flash Professional CC 2014 – SVG Export for Edge Animate

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 vector-based SVG files that can be used inside of Edge Animate.

exportsvgThe first thing you need is some vector assets you’ve drawn out in Flash Professional. I have a complex MovieClip Symbol on my main Timeline here which I’d like to use as SVG. Move the playhead to the appropriate frame and choose File > Export > Export Image…

savesvgA system dialog will appear, prompting you to save the image file. Be sure and choose SVG Image (*.svg) from the Save as type dropdown and click Save to continue.

svgoptionsAn additional dialog titled ExportSVG appears, allowing us to make some selections about how the SVG file is generated. We can include or exclude any hidden layers and choose whether to embed (potential) bitmap images or not. Our bunny asset is purely vector as it was created within Flash Professional using vector tooling – so this selection doesn’t really matter in our example. Click OK to generate the SVG file.

svgfileThe SVG is now generated in the chosen location. We can open this file in Illustrator, Chrome, or anything else which can ingest SVG image data. Next, we’ll describe how to import the SVG file into Edge Animate.

dragbunnyInside of a new Edge Animate composition, set up your Stage using any colors or dimensions you desire. I’ve made my Stage green because bunnies like leafy green stuff. To import the SVG file, I simply drag the file itself from my desktop and onto the Stage. One of the neat things about importing SVG in this way is that you can see a coordinate system preview before dropping it onto the Stage. Besides… this method avoids all application menus.

importedsvgWe now have the SVG data within our Library (under Images) and can use it throughout our composition. Since we pulled the file itself onto the Stage to import it, we also have an instance of this SVG data on the Stage as well. Once of the major benefits to using SVG inside of Edge Animate is that vector objects can be scaled flawlessly with no visual degradation (as present in bitmap images).


Leave a Reply

Your email address will not be published. Required fields are marked *