Graphic Design Exercises

Hype: Interactive Slide Show (Robin Luebs)

 

Objective

To learn motion design by example. To learn Web animation techniques by recreating this interactive slide show.

 

Discussion

The web is an interactive media. HYPE allows designers to program complex actions without writing code. In this exercise, we will gain some experience with creating an interactive slide show.

See HYPE documentation

 

Overview

Import pixel elements into HYPE. Create scenes (pages). Program interactive elements (buttons). Export as HTML5 document. Center art vertically in Dreamweaver and publish (see vertical centering source).

 

Procedure

prepping for the exercise

  1. download starter file
  2. launch HYPE
  3. view > inspector: document: w=960, h=440
  4. file > save as "robin.hype"
  5. insert > image: all large JPEGs first (01 to 24)
  6. arrange layout: arrange > align or distribute
  7. hide all large images except for "01"
  8. insert > image: all small JPEGs next (t01 to t24)
  9. arrange layout: arrange > align or distribute
  10. arrange > group "thumbs"
  11. insert > image: gray arrows
  12. fine-tune layout
  13. view scenes (click button)
  14. rename "untitled scene" as "01"

programming "scene 1"

  1. view > scene inspector (cmd+2)
  2. on swipe left: jump to scene: next scene (push right to left)
  3. on swipe right: jump to scene: previous scene (push left to right)
  4. view > action inspector (cmd+6)
  5. select "arrow_01"
  6. on mouse click: jump to scene: previous scene (instant)
  7. select "arrow_02"
  8. on mouse click: jump to scene: next scene (instant)
  9. view > element inspector (cmd+4)
  10. select "arrow_01"
  11. edit > show button controls (hover)
  12. background: image: choose "arrow-over_01"
  13. select "arrow_02"
  14. edit > show button controls (hover)
  15. background: image: choose "arrow-over_02"

making scenes

  1. scene > duplicate scene (23x)
  2. rename scenes "02", "03" etc
  3. go to scene "02"
  4. delete all large images except for "02"
  5. repeat with other scenes
  6. file > preview in browser (cmd+RETURN)

looping first and last scenes

  1. view > scene inspector (cmd+2)
  2. go to scene "01"
  3. on swipe left: jump to scene: last scene (push right to left)
  4. go to scene "24"
  5. on swipe right: jump to scene: first scene (push left to right)
  6. view > action inspector (cmd+6)
  7. go to scene "01"
  8. click "arrow_01"
  9. on mouse click: jump to scene: last scene (instant)
  10. go to scene "24"
  11. click "arrow_02"
  12. on mouse click: jump to scene: first scene (instant)
  13. file > preview in browser (cmd+RETURN)

programing thumbnails

  1. go to scene "01"
  2. view > action inspector (cmd+6)
  3. select t01
  4. on mouse down: jump to scene: 01 (instant)
  5. on mouse over: jump to scene: 01 (instant)
  6. select t02: repeat, etc
  7. insert > image: t00
  8. view > element inspector (cmd+4)
  9. opacity = 20%
  10. view > action inspector (cmd+6)
  11. pointer = pointer (hand)
  12. move t00 on top of t01
  13. select t00 and "thumbs" group
  14. copy/paste into other scenes
  15. move t00 on each scene to new position
  16. file > preview in browser (cmd+RETURN)

publish the animation

  1. view > document inspector (cmd+1): show loading indicator = yes
  2. file > export as HTML5 > folder (cmd+shift+E)
  3. duplicate "robin.html", rename "robin-publish.html"
  4. open "robin-publish.html" in dreamweaver
  5. window > css:
    • edit body: bg=white
    • add new css: .centerVertical: block: vertical align=middle,
    display=table-cell
    • add new css: .centerVerticalWrapper: block: display=table;
    box: width/height=100%
    • add new css: html, body: box: height=100%
  6. select <body>
  7. insert > layout objects > div tag: wraparound, class=centerVertical
  8. insert > layout objects > div tag: wraparound, class=centerVerticalWrapper
  9. file > preview in browser (opt+F12)
  10. link HTML file from your process page and publish