Archived copy for reference only
 

 

Graphic Design / Interactive Design / Fine & Applied Arts / Parkland College

Interactive Design Exercises
Animate: Interactive Map

(Archived from 2019)

Objective

To explore Adobe Animate's interactive features by developing an interactive map similar to this example.

Discussion

Adobe Animate is the grandchild of Adobe Flash, which was killed by Steve Jobs back in 2010 because it was a battery drain on his iPhone.

In 2016, Flash was renamed Adobe Animate which retained most of the functionality of Flash (the ability to animate vector objects, unlimited embedding of fonts, a robust scripting language for advanced interactivity). In fact, the app's user interface has changed very little since the days when it was called Flash.

Today, Animate can publish HTML5 Canvas objects instead of SWF files which can be viewed by all browsers and devices. HTML Canvas renders vector graphics extremely fast using CSS and Javascript. The resulting art can be interactive, scalable, and responsive — ideal for today's interactive and animation-intensive web.

In this exercise, we will explore the interactive possibilities of Animate for developing web graphics.

Note: Frame numbers in javascript start at 0 instead of 1. For example, this will affect gotoAndStop and gotoAndPlay calls where you will have to subtract 1 from the frame numbers used by Animate.

Procedure

Overview: Import Illustrator art into Animate. Add javascript code to frames and buttons. Publish as HTML canvas.

Preparing for the exercise

  1. download starter files
  2. open "map.ai" in Illustrator: examine layers
  3. launch Adobe Animate
  4. file > new: 1188x918px, html5 canvas, 12fps
  5. window > properties: click PUBLISH SETTINGS: loop = no, include hidden layers=no, center stage = no, make responsive = both, scale to fill = fit
  6. file > import to stage "map.ai" (cmd+R): select all layers=yes, convert layers to: animate layers
  7. lock all layers
  8. resize timeline view: less frames

Preparing the timeline

  1. "American Museum" layer: move art to frame 2, reveal
  2. repeat with other venues (total of 10 frames)
  3. frame 11, select all other layers: RMB > insert frame (F5)
  4. add new layer "actionsStop", move to top
  5. window > code snippets > html5 canvas > timeline navigation: "stop at this frame", RMB > copy to clipboard (cmd+C)
  6. frame 1: window > actions (F9): paste javascript code (cmd+V):
    this.stop();
  7. window > timeline: frame 1: RMB > copy frames
  8. frame 2: RMB > paste frames
  9. frame 3: edit > repeat paste frames (cmd+Y); repeat to frame 11
  10. control > test (cmd+RETURN)

Making buttons for the legend

  1. new layer "legend buttons", move above "legend" layer
  2. rectangle tool: draw hot spot for first venue (stroke=none, fill=green)
  3. select box: RMB > convert to symbol: name=blank, type=button (F8)
  4. window > properties: instance name = v1
  5. RMB > edit in place (double-click)
  6. drag keyframe from "up" state to "hit" state, return to "scene 1"
  7. dupe "v1" to make "v2" (opt+drag); scale box as needed (opt+drag handle), change instance name
  8. repeat until every venue has its own hot spot

Making buttons for "website" links

  1. frame 2: select "website" in venue overlay
  2. window > library: drag "blank" button to stage
  3. scale/position "blank" button over "website"
  4. window > properties: instance name = w1
  5. copy "w1" to clipboard
  6. frame 3: select "website" in venue overlay, paste
  7. window > properties: instance name = w2
  8. repeat until every venue has its own "website" hot spot

Making "X" buttons to hide venue overlays

  1. frame 2: select "X" in venue overlay: RMB > convert to symbol: name=x1, type=button (F8)
  2. window > properties: instance name = x1
  3. RMB > edit in place (double-click)
  4. go to "hit" state, RMB > insert keyframe (F6)
  5. draw hot spot (stroke=none, fill=green), return to "scene 1"
  6. copy button to clipboard
  7. frame 3: delete existing "X", paste "X" button, instance name = x2
  8. repeat until every venue overlay has its own "X" button with unique instance names

Add javascript (for "actions" layer)

  1. code snippets > timeline navigation: "click to go to frame and stop" (cmd+C)
  2. window > timeline: add new layer "actions": click frame 1
  3. window > actions (F9): paste javascript code; edit to match this sample:
    this.v1.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));
    function fl_ClickToGoToAndStopAtFrame() {
    this.gotoAndStop(1);
    }
  4. dupe above code; match this sample:
    this.v2.addEventListener("click",
    f2_ClickToGoToAndStopAtFrame.bind(this));
    function f2_ClickToGoToAndStopAtFrame() {
    this.gotoAndStop(2);
    }

  5. repeat a total of 10 times, edit each instance name/frame numbers
  6. dupe above code; match this sample:
    this.x1.addEventListener("click",
    x1_ClickToGoToAndStopAtFrame.bind(this));
    function x1_ClickToGoToAndStopAtFrame() {
    this.gotoAndStop(0);
    }

  7. repeat a total of 10 times, edit each instance name (do not edit frame numbers)
  8. control > test (cmd+RETURN)

Add javascript (for "actionsStop" layer)

  1. code snippets > actions: "click to go to web page" (cmd+C)
  2. window > actions (F9): paste javascript code into actionsStop:frame 2; edit to match this sample:
    this.w1.addEventListener
    ("click", fl_ClickToGoToWebPage);
    function fl_ClickToGoToWebPage()
    {window.open(
    "http://www.museumofthegrandprairie.org/", "_blank");
    }
  3. copy above code, paste into actionsStop:frame 3; edit to match this sample:
    this.w2.addEventListener
    ("click", fl_ClickToGoToWebPage);
    function fl_ClickToGoToWebPage()
    {window.open(
    "url for venue", "_blank");
    }
  4. repeat for a total of 10 times, see example map for URLs

Create pulsing buttons

  1. "museum" layer: frame 1: select circle for venue 1
  2. RMB > convert to symbol: name=c1, type=button, registration=centered (F8)
  3. window > properties: instance name = c1
  4. RMB > edit in place (double-click)
  5. RMB > insert keyframe (F6) on "over", "down", "hit" states
  6. "over" state: select circle
  7. RMB > convert to symbol: name=c1-over, type=movie clip, registration=centered (F8)
  8. RMB > edit in place (double-click)
  9. select circle: RMB > convert to symbol: name=c1-animated, type=movie clip, registration=centered (F8)
  10. RMB > insert keyframe (F6) on frame 4, 7
  11. frame 4: w/h=30px
  12. RMB > create classic tween on frame 1, 4; return to scene 1
  13. control > test (cmd+RETURN)
  14. repeat for a total of 10 times, edit each symbol/instance name
  15. window > actions (F9): actions:frame 1: copy/paste the following code, edit to match sample:
    this.c1.addEventListener("click",
    c1_ClickToGoToAndStopAtFrame.bind(this));
    function c1_ClickToGoToAndStopAtFrame() {
    this.gotoAndStop(1);
    }

  16. repeat for a total of 10 times, edit each instance name for each button
  17. control > test (cmd+RETURN)

Grading

  1. publish the HTML and JS files (instructions)
  2. make a link from your Process Page to this exercise

BACK TO TOP
Last updated: 5/7/21