INFO 424 SCHEDULE

Olympic medals, Phase 2 - Introduction to Edge Animator

a

 

Draw in Edge Animator

The goal of this lab is to briefly introduce you to a new Adobe product, Edge Animator, which is a Flash-like application to help you create animation and interaction that use HTML and Javascript technologies. Edge Animator is currently significantly less full-featured than Flash, but it has evolved rapidly and will presumbly continue to do so. It is available as a "preview" version until October 24, 2012 when it will be available for purchase (and the preview version will now longer work). You can find more info here.

Step 1: Install Edge Animator

a. An older version of Adobe Edge is installed on the lab computers. You'll need to uninstall it before installing the current version. Here's how:

From the Start button, go to the Control Panel, look for Programs and click on the "Uninstall a program" link.

You'll see a list of programs. Click on Adobe Edge Preview, then click the Uninstall button at the top of the window - it doesn't take long.

Now go here to download the new version. Youll need to create an Adobe account if you don't already have one. The path to downloading the program is a bit tedious and complicated. Please ask one of us if you are having troubles.

Step 2: Create a new Edge file

a. Open Edge Animator and create a file named “Medals.html"

In Flash, you were able to import directly from Illustrator. It doesn't work as smoothly In Edge. It is possible to save Illustrator files as SVG files (you'll learn more about SVG later) and then import that SVG file into Edge. The limitation is that it comes in as a single object rather than a collection of objects. So if you did this with the Medals Illustrator file, you would have one image object which contained the Japan & Canada circles and the two tabs - not what you need. So you'll recreate these objects within Edge.

b. Save the file.

You'll find that Edge has created 5 files:

  1. Medals.html
  2. Medals_edgePreload.js
  3. Medals_edgeActions.js
  4. Medals_edge.js
  5. Medals_edge.an

(If you're interested, you can see an explanation of these files here: http://www.adobe.com/devnet-docs/edge/api/current/EdgeAPI.0.1.7.html)

Step 2: Draw circles in Edge

Edge Animator has a small set of tools for creating shapes: shape options in edge

a. Choose the elipse tool and draw an elipse on the stage (it doesn't matter what size, color or shape at this point).

Now you'll modify that elipse to look like the Canada circle. Since you've already imported it into Flash, you can take advantage of the fact that you can see it's properties in Flash and recreate those here - those properties look like this:

Flash Properties

b. Open the Properties panel in Edge, if it isn't already open (Window -> Properties), and modify them to match the properties in Flash (i.e. the x, y, w & h values). Note that you won't be able to be as precise - Flash gives you 2 decimal places Edge doesn't give you any. Be sure the W & H values aren't "locked" - if they are, you'll see a little symbol to the left of the values as shown here:

locked w & h

That maintains the ratio of the Width to Height which can be valuable if you want to resize an object without altering its shape, but in this case, you want to change them independently, so click on that symbol to make it look like this:

unlocked w & h values

The final result should look like this:

edge properties

c. To change the color, click on the colored square to pull up this dialog box:

Edgecolor

...and give it the same value it has in Flash (see the screenshot of the Flash value below):

Flash color

The circle should now be the right size and color and be in the right location.

d. Now use the text tool text tool to write "Canada" (it doesn't matter where you write it).

e. Change the properties (x, y, w, h, pixel size and color) to match the values in Flash:

Flash text properties

The properties panel should now look like this:

Edge text properties

Mine looked like this (the text isn't quite centered):

So I nudged it a bit with the arrow keys - do the same if you have the same problem:

v 2

Now the Canada circle is done, so it's time to create the Japan circle.

f. Draw the Japan circle using the values from Flash as well. Here are the circle values:

Japan Circle properties

Japan color

Here are the text values:

Japan text properties

You'll find that this places the circle in the dark area beyond the stage:

Japan circle off the stage

g. To fix that, click on the stage to so the stage properties appear in the Properties panel:

stage properties

And change the width and height values to match the size of the stage in Flash which is:

Stage w & h values in Flash

Now the Japan circle is on the stage.

Step 3: Create the tabs in Edge

a. Use the rectangle tool: rectangle tool to draw a rectangle anywhere

b. As before, in the Properties panel, modify the position (x,y values) and the size (w, h values) to match the properties they have in flash:

geographicUnselected rectangle properties

c. Choose "solid" from the dropdown list of stroke options to make the stroke visible:

stroke and fill dialog in Edge

d. Set the fill color to #F0F6F9 and the stroke color to #C1C1C1. Your rectangle should look like this:

first tab rectangle

e. Draw a second rectangle to correspond to the active state tab, and give it these properties:

x =8
y = 7
w = 124
h = 21
stroke: (choose "none" in the drop-down menu)
fill: #ffffff

It should look like this (to get a closer look, you can zoom in with View -> Zoom in):

active state rectangle

f. Use the text tool and type "GEOGRAPHIC VIEW" and give that text the same properties as in Flash (the color should be black #000000):

text properties in flash

...again, nudge it with the arrow tools until it looks well positioned:

geographic view text

Before creating the BY RANKING tab, pause to notice what's happening in the Elements and Timeline panels.

Each element you've created appears with a generic name, follwed by <div> to indicate that these have all been represented as HTML <div> elements in the HTML file:

rectangle in elements panel

...all of the elements appear in the timeline as well.

NOTE: This is is different than Flash where each row in the timeline represents a layer that may contain one or more elements.

h. To make the BY RANKING tab, select all three elements of the GEOGRAPHIC VIEW tab by dragging your cursor over them:

selected tab elements

..then copy and paste these elements onto the stage and use your arrow keys to move it into place:

moved second tab

i. Use the text tool to change the text to "BY RANKING" and use the arrow tools to position it:

completed tabs

j. You're done! Go to File -> Preview in Browser to see how it looks.

k. Look at the source code for the page...there isn't much there:

source code

l. Open Medals_edge.js. This is where all of those elements are defined (using JSON notation). For example, the "Canada" text is represented like this:

{
id:'Text',
type:'text',
rect:['103px','150px','43px','17px','auto','auto'],
text:"Canada<br>",
font:['Arial, Helvetica, sans-serif',11,"rgba(255,255,255,1.00)","normal","none",""]
},

m. Zip together your 5 files together. (You'll learn how in class if you don't already know)

If you're on Windows...

  1. Select all the files you want to include in your .zip file
  2. Right click one of the selected files
  3. Choose "Send to" and select "Compressed (zipped) folder"
  4. It should output as one of the file names and .zip extension
  5. Rename file accordingly

If you're on Mac...

  1. Select all the files you want to include in your .zip file
  2. Right click one of the selected files
  3. Choose "Compress x Items" where x is the number of files you have selected
  4. It will be outputted in the same folder and named "Archive.zip"
  5. Rename file accordingly

Files to include in .zip

FINAL FILE: Medals.zip

Edge Animator Resources

For future reference, here are a random handful of sites I've found to be helpful:

http://tv.adobe.com/watch/learn-edge-preview-6/interactivity-looping-and-code/

(video that helps understand where code lives...)

http://transitioning.to/2012/09/an-introduction-to-adobe-edge-animate-for-flash-professional-users/

http://www.adobe.com/devnet/edge/articles/guide-to-edge.edu.html

http://tv.adobe.com/watch/adobe-evangelists-paul-trani/adobe-edge-animate-adding-interactivity-4-of-4/

http://tv.adobe.com/watch/adobe-edge-preview/introducing-interactivity-in-adobe-edge-preview-3/

http://www.adobe-edge-forum.com/2012/01/adobe-edge-tutorial-using-symbols/

Similar Products

Tumult Hype

Sencha Animator