Objective

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

Discussion

Adobe Animate can create rich interactive experiences for the web. The benefits of using Animate to create HTML5 Canvas objects are:

• loads extremely fast (with very small file sizes)
• infinitely scalable (therefore responsive)
• ability to embed any desktop fonts for the web
• uses a robust scripting language for advanced interactivity (Javascript)
• can be animated
• supports embedding of vector graphics
• supported by all modern browsers and devices

The only possible disadvantage to using Animate is the learning curve associated with learning a scripting language (like Javascript). Fortunately, beginners can take advantage of Animate's code snippets to invoke some of the more common interactive features.

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 "logos.ai" in Illustrator: examine layers
3. launch Adobe Animate
4. file > new: 750x560, html5 canvas, 12fps
5. window > properties: click PUBLISH SETTINGS: loop = no, include hidden layers=no, center stage = vertically, make responsive = both, scale to fill = fit
6. file > import to stage "map.ai" (cmd+R): select all layers=yes, convert layers to: keyframes
7. rename current layer as "art"
8. resize timeline view: less frames
9. new layers: numbers, numbers-hit, arrows, actions, actionsArrows, actionsStop

Preparing the art

1. cut arrows, go to "arrows" layer: edit > paste in place (cmd+shift+V)
2. cut numbers, go to "numbers" layer: edit > paste in place (cmd+shift+V)
3. copy numbers from "numbers" layer to "numbers-hit" layer
4. numbers-hit layer: type = black
5. frame 2: insert > timeline > keyframe (F6); repeat to frame 24
6. edit each frame: only one black number should show; hide layer
7. control > test (cmd+RETURN)

Making buttons

1. arrows layer: select first arrow: modify > convert to symbol (F8)
2. window > properties: name = arrowLeft, type = button; instance name = arrowLeft
3. edit symbol "arrowLeft" (double click button):
   - go to "hit" frame
   - modify > timeline > convert to keyframes (F6)
   - draw hotspot with rectangle tool: stroke = none, fill = red
   - copy hotspot to clipboard
   - return to scene 1
   - repeat with right arrow
4. numbers layer: select "1": modify > convert to symbol (F8)
5. window > properties: name = b1, type = button; instance name = b1
6. edit symbol "b1" (double-click button):
   - go to "hit" frame
   - modify > timeline > convert to keyframes (F6)
   - draw hotspot with rectangle tool: stroke = none, fill = red
   - copy hotspot to clipboard
   - return to scene 1
7. go to frame 2: repeat until all 24 numbers are buttons with unique instance names
8. control > test (cmd+RETURN)

Add javascript (for "actionsStop" layer)

1. window > code snippets > html5 canvas > timeline navigation: "stop at this frame", RMB > copy to clipboard (cmd+C)
2. go to "actionsStop" layer; select frame 1 (note blank keyframe)
3. window > actions (F9): paste javascript code (cmd+V):
   this.stop();
4. window > timeline
5. go to "actionsStop" layer: select "a" in frame 1: RMB > copy frames
6. click frame 2: RMB > paste frames
7. click frame 3: edit > repeat paste frames (cmd+Y); repeat to frame 24

Add javascript (for "actions" layer)

1. code snippets > timeline navigation: "click to go to frame and stop" (cmd+C)
2. go to "actions" layer: click frame 1
3. window > actions (F9): paste javascript code; edit to match this sample:
   this.b1.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));
   function fl_ClickToGoToAndStopAtFrame() {
   this.gotoAndStop(0);
   }
   
4. dupe above code; match this sample:
   this.b2.addEventListener("click",
   f2_ClickToGoToAndStopAtFrame.bind(this));
   function f2_ClickToGoToAndStopAtFrame() {
   this.gotoAndStop(1);
   }
   
5. repeat a total of 24 times, edit each instance name/frame numbers
6. copy all 24 events, paste below; modify each event per example:
   this.b1.addEventListener("mouseover", fl_ClickToGoToAndStopAtFrame.bind(this));
   function fl_ClickToGoToAndStopAtFrame() {
   this.gotoAndStop(0);
   }
   
7. control > test (cmd+RETURN)

Add javascript (for "actionsArrows" layer)

1. code snippets > timeline navigation: "click to go to frame and stop" (cmd+C)
2. go to "actions" layer: select frame 1
3. window > actions (F9): paste javascript code; edit to match this sample:
   this.arrowLeft.addEventListener("click",
   left_ClickToGoToAndStopAtFrame.bind(this));
   function left_ClickToGoToAndStopAtFrame() {
   var previousFrame = this.currentFrame - 1; this.gotoAndStop(previousFrame);
   }
   
4. dupe above code; match this sample:
   this.arrowRight.addEventListener("click",
   right_ClickToGoToAndStopAtFrame.bind(this));
   function right_ClickToGoToAndStopAtFrame() {
   var nextFrame = this.currentFrame + 1; this.gotoAndStop(nextFrame);
   }
5. control > test (cmd+RETURN)
6. window > timeline: go to "arrows" layer: select frame 2
7. insert > timeline > keyframe (F6)
8. select frame 1: rename instances "arrowLeft1", "arrowRight1"
9. repeat with frame 24
10. open "arrows.js": copy/paste code into frame 2
11. edit code by following instructions in comments

Edit javascript code for first and last frames

1. window > timeline: go to "actionsArrows" layer
2. insert > timeline > blank keyframe (F7) on frame 2, 24
3. select "a" on frame 1: RMB > copy frames
4. RMB > paste frames on 2, 24
5. select frame 1, window > actions (F9): edit to match this sample:
   this.arrowLeft1.addEventListener("click",
   left_ClickToGoToAndStopAtFrame.bind(this));
   function left_ClickToGoToAndStopAtFrame() {
   this.gotoAndStop(23);
   }
   
6. dupe above code; match this sample:
   this.arrowRight1.addEventListener("click",
   right_ClickToGoToAndStopAtFrame.bind(this));
   function right_ClickToGoToAndStopAtFrame() {
   this.gotoAndStop(1);
   }
   
7. select frame 24, window > actions (F9): edit to match this sample:
   this.arrowLeft24.addEventListener("click",
   left_ClickToGoToAndStopAtFrame.bind(this));
   function left_ClickToGoToAndStopAtFrame() {
   this.gotoAndStop(22);
   }
   
8. dupe above code; match this sample:
   this.arrowRight24.addEventListener("click",
   right_ClickToGoToAndStopAtFrame.bind(this));
   function right_ClickToGoToAndStopAtFrame() {
   this.gotoAndStop(0);
   }
   
9. control > test (cmd+RETURN)

Fine-tune javascript code for frame 2

1. "actionsArrows" layer: select frame 2, window > actions (F9):
2. copy/paste code from "arrows.js" into frame 2
3. edit code by following instructions in comments
4. control > test (cmd+RETURN)

Grading

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