Embedded Device Videos for McAfee

We wrote and developed these videos for McAfee:

We created relatively simple 2D animations, and moved them in space to tell the story more effectively, and to give a sense of space and depth. 


This allowed us to keep close to the McAfee brand guide for illustrations, and give a fresher, more interesting feel to each piece.

The Truc Designs Holiday Card

The HTML 5 Holiday Card:

Notes: 

• jQuery is the framework
• All of the elements are divs, animated with a spritesheet in a background image 
• Loading image sequences was very cumbersome, with too many browser requests, especailly on mobile. There may be a way to request multiple images simultaneously.
• Animations were done in Lightwave > Swift3D > Flash. Spritesheets were created with SpritesheetSWF by Keith Peters:  http://www.bit-101.com/blog/?p=2939
• Positioning each element absolutely by manually writing CSS is tedious - (for example, placing and aligning the shadow of each element)  -  could something WYSIWYG like Adobe Edge or Dreamweaver be worth the effort here?
• Multiple-frame svgs or svgz's seem like a possibility once Firefox and IE reliably support them
• The string between the lights is a canvas element
• Would all elements animate more smoothly if they were rendered directly on canvas instead of within divs?
• An animated intro starts jQuery animations at various frame numbers
• The mobile version removes the plane and robot elements to improve performance
• Elements are made draggable depending on whether the broswer is mobile or not
• Each elements position, velocity, frame number, and z-index is modified every frame
• Collisions are checked between all elements
• This seems especially processor-intensive on mobile
• A background gradient provided visual depth 
• Performance was by far the best on Chrome. This may carry over to Android once Chrome becomes the default Android browser.