Adobe Edge Animate Tutorial
  • Home
  • Written Tutorial
    • Lesson 1: Set-up
    • Lesson 2: Click events
    • Lesson 3: Animate a symbol
    • Quick Instructions
  • Videos
  • Quiz
    • Edge-made Quiz
  • Exercise

For Adobe Edge Animate experts

If you're already comfortable with the main functions of Animate, but you want to learn the specifics of this project, these quick steps are for you:

SETUP
  • Size stage to 100% and make the background colour black or dark grey.
  • Import all images.
  • Place harbour map on stage at x 80 and y 0.
  • Place city map on stage at 10, 10; size to 350x403 and add shadow.
  • Draw a circle in contrasting colour.  Add shadow.
  • Size the circle to 20x20 or so. Right click and make symbol (so you can edit all of them at once).
  • Drag more on to the stage, and label them for the landmarks.

CLICK EVENTS
  • Add a click event to the web page of each landmark. Change "_self" to "_blank".
  • Make the cursor a pointing finger.
  • Make mouseover and mouse out event for each dot.
  • Cmd+E/Ctrl+E to check all code is in place.

MOUSEOVER POP UP IMAGES
  • Drag an imported image onto the stage and make it the right size.
  • Change the anchor corner to be the once closest to the dot.
  • Right click and convert to symbol.
  • Double click to edit.
  • Change easing to ease out, elastic.
  • Make a 1 second transition of size 0-100%, with stop at beginning.
  • Go back to stage and select landmark dot code.
  • In Mouseover click Get Symbol and change variable name and symbol name.
  • Click Play from, change sym to your variable name and make sure 0 is in brackets.
  • Do the same in mouseout event but with a Play reverse with 500 in brackets.
View final product
Powered by Create your own unique website with customizable templates.