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

Edge Animate: Absinthe Quiz!

absinthequiz
Psst! The correct answer is #1

I recently gave a short set of talks for the Adobe Apps for Education: Live! series which aims to demonstrate uses of Adobe products for educational purposes in short, 30 minute project examples. These are divided into two talks; a morning talk for beginners, and an evening talk for advanced concepts.

Most of the questions for the quiz are derived from the Absinthe 101 Flyer hosted by The Wormwood Society.


pins
There is also a neat Pinterest board with links to various resources, if you are into Pinterest!

Adobe Day at DU

duadobeday

As part of my “day job” at the University of Denver, I try to both get university people interested in Adobe solutions and provide the means for Adobe people to get information to the university. One mechanism that has been set up for this is the ability to hold small, mini-conferences on campus with Adobe representatives. I was able to help organize one such event, yesterday.

The focus of this event was Creative Cloud and the Digital Publishing Suite. I was asked to speak on some of the Edge Tools and Services and also touch upon some of the good things happening with Flash Professional and the Flash Runtimes.

My slides are below for those who might be interested.

Audio and Responsive Scaling in Adobe Edge Animate 3.0

animate_mnemonicWith a brand new version of Adobe Edge Animate CC (v.3) out in the wild… I have published a short video demonstrating how an audio project from my book, Learning Adobe Edge Animate, using Animate 1.0 can be successfully adapted to use both the new integrated audio feature and true responsive scaling with Edge Animate CC. Two really nice features worth noting!

Edge Animate CC new features include:

  • Audio support: Import and sync audio files with animation playback or user interactions
  • Responsive animations: Apply scaling or percentage-based layouts to fit mobile and desktop screens.
  • Script loading: Integrate 3rd-party libraries like Greensock or jQuery UI for extended capabilities.

Want to update? You can now choose from three different versions:
Animate

Adobe Apps for Education: Live

Seminar Series

Want to attend an eSeminar that supports you to develop new skills and find inspiring uses for Adobe Applications in the classrooms? Come along to these short 30 min seminars and take away a new skill set and activity to use tomorrow. Come to one or come to many. All sessions can be joined from desktop, laptop, tablet or mobile devices.

I’ll be offering the following presentations:
Labrecque: Edge Animate

Beginning Edge Animate for Education

Wednesday 21 May 2014 8am (PST)
Learn the basics of Adobe Edge Animate from a fellow educator as you explore a simple project you can implement in your classroom. Find out more here.

Labrecque: Edge Animate

Advanced Edge Animate for Education

Wednesday 21 May 2014 3pm (PST)
Explore advanced features of Adobe Edge Animate with a fellow educator and push your definition of what’s possible in your classroom. Find out more here.