Graphic Design Exercises

Hype: Web Banner Ad (Cirque)

 

Objective

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

 

 

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

Import pixel elements into HYPE and animate objects. 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 > layout: widescreen layout
  4. view > document inspector (cmd+1): w=400, h=225
  5. file > save as "cirque.hype"
  6. insert > image: all PNGs; stacking order:
    • breathtaking
    • unforgettable
    • cirqueEloize
    • cuSymphony
    • cirqueOrchestra
    • figure1
    • figure2
    • cirqueTemplate (reveal as needed)
  7. view > scene inspector (cmd+2): bg=black
  8. position all elements based on template

animating "figure 1"

  1. go to "figure 1" layer (hide others)
  2. click RECORD (cmd+R)
  3. edit tween: ease out
  4. 07.15: move art to right
  5. convert origin to motion path
  6. adjust motion curve (opt+drag handles from anchors)
  7. 07.15: view > metrics (cmd+3): rotation z = -100
  8. 07.15: view > element inspector (cmd+4): opacity=0
  9. stop RECORD (cmd+R)

animating "figure 2"

  1. go to "figure 2" layer (hide others)
  2. duplicate "figure2"
  3. rename "figure3", re-position, hide
  4. draw rectangle (opacity=50%); group with "figure2"
  5. scale group so that center of rotation lower left corner of figure
  6. click RECORD (cmd+R)
  7. edit tweens: ease out
  8. move "capo" to 01.15
  9. 06.00: move group to left
  10. 10.00: move group to right, rotation=380
  11. smoothen motion path (opt+drag handles from anchors)
  12. adjust position
  13. 02.15, 08.15: add keyframes (opacity)
  14. 01.15, 10.00: view > element inspector (cmd+4): opacity=0
  15. stop RECORD (cmd+R)
  16. select rectangle: fill=none, border=0

animating type

  1. go to "breathtaking" layer
  2. click RECORD (cmd+R)
  3. edit tweens: instant
  4. 02.00: view > element inspector (cmd+4): opacity=0
  5. go to "unforgettable" layer
  6. move capo to 02.00
  7. 02.00: add keyframe (opacity)
  8. 03.15: view > element inspector (cmd+4): opacity=0
  9. go to "cirqueEloize" layer
  10. move capo to 03.15
  11. 03.15: add keyframe (opacity)
  12. 05.00: view > element inspector (cmd+4): opacity=0
  13. go to "cu sumphony" layer
  14. move capo to 05.00
  15. 05.00: add keyframe (opacity)
  16. 06.15: view > element inspector (cmd+4): opacity=0
  17. go to "cirqueOrchestra" layer
  18. edit tweens: linear
  19. move capo to 06.15
  20. 07.15, 09.00: add keyframes (opacity)
  21. 06.15, 10.00: view > element inspector (cmd+4): opacity=0
  22. stop RECORD (cmd+R)

animating "box"

  1. draw purple rectangle (fill stage)
  2. click RECORD (cmd+R)
  3. edit tweens: linear
  4. 02.00: add keyframe (opacity, origin, size)
  5. move "capo" to 01.24
  6. 01.24: make rectangle small, center
  7. 01.24, 02.04: view > element inspector (cmd+4): opacity=0
  8. stop RECORD (cmd+R)
  9. duplicate "rectangle-1" 3x; rename "rectangle-2", "rectangle-3", "rectangle-4"
  10. "rectangle-2": move keyframes to start at 03.09
  11. "rectangle-3": move keyframes to start at 04.24
  12. "rectangle-4": move keyframes to start at 09.24

adding one more figure

  1. go to "figure3" layer
  2. click RECORD (cmd+R)
  3. edit tweens: linear
  4. move "capo" to 07.15
  5. 08.00, 08.15: add keyframe (opacity)
  6. 07.15, 10.00: view > element inspector (cmd+4): opacity=0
  7. stop RECORD (cmd+R)
  8. animation > jump to start (cmd+opt+shift+ LEFT ARROW)
  9. play (SPACE)
  10. view > show timeline actions
  11. 11.00: add keyframe: action=start timeline (main timeline)
  12. draw new rectangle "button" (400x225px): stroke=0, fill=none
  13. view > action inspector (cmd+6): on mouse click, go to "http://www.krannertcenter.com/"; open in new window
  14. file > preview in browser (cmd+RETURN)

publish the animation

  1. file > export as HTML5 > folder (cmd+shift+E)
  2. duplicate "cirque.html", rename "cirque-publish.html"
  3. open "cirque-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