Make it move in Edge Animator
Step 1: Convert to symbols
In Flash, you have three types of symbols: Graphics, Buttons and MovieClips. In Edge Animator, you just have 1 kind of symbol. Edge symbols are more like MovieClips than Graphics or Buttons because they have their own timeline.
a. Open Medals.html in Edge and save it as MedalsMovement.html
b. Use the select tool to drag your cursor across both the Canada circle and its text to select them:
c. Go to Modify -> Convert to Symbol and name the symbol "Canada":
...it's appearance will change:
[In Flash, each symbol has a transformation point represented by a circle and a registration point represented by a plus sign. In Edge, there is just a registration point, represented by a plus sign.]
In the Elements panel, the text and circle elements that made up the Canada circle have been converted to a symbol element:
And the symbol has been added to the Library:
e. Convert Japan to a symbol called "Japan"
For the tabs, you will eventually want to be able to click on a tab and have the white rectangle appear or disappear to make it look like the tab has been selected or unselected. To be able to use code to make the rectangle appear/disappear, it needs to be a symbol, so...
f. Turn the two white rectangles into symbols named "selectedGeographic" and "selectedRanking"
Now there are four symbols in the library:
Some element needs to act as the object that is clicked in order to trigger the actions (which include changing the appearance of the button and moving the circles). It could be the selected rectangle (but that isn't always visible), or the unselected rectangle (but that's sometimes covered up). The text is always visible and never covered up, so it makes sense to use it as the element that responds to the click.
Right now, the text elements aren't the same size and shape as the rectangles (you can see that if you select them):
If we just turn them into symbols right now, the click area won't correspond to the tab area which would be awkward for the user. It is possible to modify the symbol after creating it to address this, but I've found it's easier to do it before...
g. Start by resizing the text elements so they fit the tabs (it's okay if they're a little bigger):
h. To center the text left-right, click on the "Center align" option in the Elements panel:
i. To center it top-top bottom, first modify the text (using the text tool) to add a carriage return - this pushes the text down):
j. Then use the arrow keys to move the whole text element back up. You'll end up with the text entered and the text boxes extending a bit above the rectangles, but that's okay:
h. Now turn the text elements into symbols named "geographicBtn" and "rankingBtn"
i. To make the cursor turn into a pointing finger when the user mouses over the symbol, go to the Cursor in the Properties panel, click on the button that says "auto" and choose the pointing finger:
j. Preview in the browser (File ->Preview in Browser) to see that when you hover over the tabs, the cursor turns into a pointing hand, and the area of the button corresponds to the area of the tab rectangle.
k. Save your file
Step 2 Add animation
a. Watch these videos explaining animation in edge
First you'll animate the Canada circle in two dimensions - to the right (the x dimension) and down (the y dimension)
b. Click on the Canada circle, then click on the diamond next to the X attribute in the Properties Panel, then click on the diamond next to the Y attribute. Your time-line should now show rows for those two attributes:
c. Move the play head to 0:01 (1 second), and click on those two diamonds again to create more keyframes:
d. With the playhead at 0:01, change the x attribute value to 566 and the y attribute value to 236:
e. Hit the spacebar to run the animation - there is no transition yet so the Canada circle stays in place and then suddenly jumps to its new location.
f. Right-click on one of the keyframes and choose "Create transition" (or Time -> Create Transitions). Do this for both attributes.
g. Now when you hit the spacebar to run the animation, the Canada circle will move smoothly.
h. Create the transition for the Japan circle too (it needs to move to x = 369, y = 236)
i. Zip together your 5 files together.
If you're on Windows...
If you're on Mac...
Files to include in .zip
You're done!
FINAL PRODUCT: MedalsMovement.zip
