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:
(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:
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:
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:
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:
The final result should look like this:
c. To change the color, click on the colored square to pull up this dialog box:
...and give it the same value it has in Flash (see the screenshot of the Flash value below):
The circle should now be the right size and color and be in the right location.
d. Now use the 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:
The properties panel should now look like this:
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:
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:
Here are the text values:
You'll find that this places the circle in the dark area beyond the stage:
g. To fix that, click on the stage to so the stage properties appear in the Properties panel:
And change the width and height values to match the size of the stage in Flash which is:
Now the Japan circle is on the stage.
Step 3: Create the tabs in Edge
a. Use the 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:
c. Choose "solid" from the dropdown list of stroke options to make the stroke visible:
d. Set the fill color to #F0F6F9 and the stroke color to #C1C1C1. Your rectangle should look like this:
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: #ffffffIt should look like this (to get a closer look, you can zoom in with View -> Zoom in):
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):
...again, nudge it with the arrow tools until it looks well positioned:
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:
...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:
..then copy and paste these elements onto the stage and use your arrow keys to move it into place:
i. Use the text tool to change the text to "BY RANKING" and use the arrow tools to position it:
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:
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...
If you're on Mac...
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-edge-preview/introducing-interactivity-in-adobe-edge-preview-3/
http://www.adobe-edge-forum.com/2012/01/adobe-edge-tutorial-using-symbols/
Similar Products