Graphic Design Exercises

Hype: Web Banner Ad (Beethoven)

 

Objective

To learn motion design by example. To learn Web animation techniques by recreating this banner ad by John Havlik.

 

 

Discussion

At one time, Flash was the web animation software of choice for designers. Flash was vector-based, powerful, scriptable and loved by many. Flash was poised to take over the web until Steve Jobs decided not to support it on the iPhone due to battery drain.

Since Flash's demise, web animation became a programmer's domain as custom-written HTML5, CSS3 and Javascript was needed to make pixels move across the screen. Adobe responded with EDGE, but it's looking like HYPE is quickly becoming the designer's favorite WYSWIWG web animation tool. Unfortunately, HYPE is currently only available for Mac.

Note: The default frame rate in HYPE is 30 fps. The timeline is shown in minutes, seconds, followed by frames. For example: 2.5 seconds is indicated as 00:02.15.

See HYPE documentation

 

Overview

Prep pixel art in Illustrator. Import pixel elements into HYPE and animate objects. Export as HTML5 document. Center art vertically in Dreamweaver and publish (see vertical centering source).

 

Procedure

preparing for the exercise

  1. download starter file
  2. open "beethoven.ai", examine layers
  3. export keyframes (GIF)
  4. export individual art elements (PNG; clip to artboard=no)
  5. place keyframes in a new AI document
  6. export presentation keyframes layout image

creating a layout in HYPE

  1. launch HYPE
  2. view > layout: widescreen layout
  3. view > document inspector (cmd+1): w=400, h=225
  4. file > save "beethoven.hype"
  5. insert > image: all PNGs; stacking order:
    • beethovenLarge
    • BeethovenSmall
    • complete
    • alexander
    • oct
    • lines1
    • lines2
    • beethovenLayout (reveal as needed)
  6. view > show ruler; draw guides
  7. arrange > guides > lock guides
  8. position all elements based on template
    tip: view > metric inspector (cmd+3): original size

animating "beethoven"

  1. go to "beethovenLarge" layer (hide others)
  2. position art on frame 1
  3. click RECORD (cmd+R)
  4. edit tween: linear
  5. 12.00: move art off stage to left
  6. view > scene inspector (cmd+2): bg=black
  7. go to "beethovenSmall" layer (hide others)
  8. 12.00, 15.00: add keyframes (opacity)
  9. 15.00: view > element inspector (cmd+4): opacity=0
  10. 12.00, 13.15: add keyframes (origin-top)
  11. 12.00: move art off stage down
  12. stop RECORD (cmd+R)
  13. 00.00: delete keyframe
  14. play (SPACE)

animating "complete"

  1. go to "the complete" layer (hide others)
  2. 01.00, 03.15: add keyframes (opacity)
  3. click RECORD (cmd+R)
  4. edit tweens: linear
  5. 00.00, 04.15: view > element inspector (cmd+4): opacity=0
  6. 03.15: add keyframe (origin-left)
  7. 04.15: move art to right
  8. stop RECORD (cmd+R)
  9. drag playhead to test

animating "alexander"

  1. go to "alexander" layer (hide others)
  2. edit tween: linear
  3. 04.15, 05.15, 08.15: add keyframes (opacity)
  4. click RECORD (cmd+R)
  5. 04.15, 08.15: view > element inspector (cmd+4): opacity=0
  6. 05.15: add keyframes (origin-left)
  7. 04.15: move art to right
  8. stop RECORD (cmd+R)
  9. 04.15, 08.15: edit tween: instant (opacity)
  10. 00.00: delete keyframe
  11. drag playhead to test

animating months

  1. reveal "october" layers (hide others)
  2. edit tween: instant
  3. 08.15, 11.15: add keyframes (opacity)
  4. click RECORD (cmd+R)
  5. 00.00, 11.15: view > element inspector (cmd+4): opacity=0
  6. stop RECORD (cmd+R)
  7. draw rectangle to cover up "february", "april"
  8. view > element inspector (cmd+4): fill=black, stroke=0
  9. duplicate rectangle (cmd+D); rename layer "rectangleLeft"
  10. move "rectangleLeft" to left of "october"
  11. 08.15: add keyframe (origin-left) (2x)
  12. click RECORD (cmd+R)
  13. edit tween: instant
  14. 09:15: move both rectangles to right
  15. 10.15: move both rectangles to right again
  16. stop RECORD (cmd+R)
  17. play (SPACE)

animating lines

  1. go to "lines1" layer (lock others)
  2. click RECORD (cmd+R)
  3. edit tween: ease in/out
  4. start with keyframes at 3.00, 6.00, 9.00, 12.15 (adjust these later)
  5. move art
  6. repeat with "lines2"
  7. duplicate "lines1", rename "lines 1b"; repeat with "lines2"
  8. adjust time and/or position until art fills the screen most of the time
  9. pay particular attention to the ending
  10. stop RECORD (cmd+R)
  11. reveal all layers
  12. play (SPACE)
  13. view > show timeline actions
  14. 15.15: add keyframe: action=start timeline (main timeline)
  15. draw new rectangle "button" (400x225px): stroke=0, fill=none
  16. view > action inspector (cmd+6): on mouse click, go to "http://www.krannertcenter.com/"; open in new window
  17. file > preview in browser (cmd+RETURN)

publish the animation

  1. file > export as HTML5 > folder (cmd+shift+E)
  2. duplicate "beethoven.html", rename "beethoven-publish.html"
  3. open "beethoven-publish.html" in dreamweaver
  4. 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%
  5. select <body>
  6. insert > layout objects > div tag: wraparound, class=centerVertical
  7. insert > layout objects > div tag: wraparound, class=centerVerticalWrapper
  8. file > preview in browser (opt+F12)
  9. link HTML file from your process page and publish