ADV3662 – Interactive Animation

ADV3662 – Week4

Hello,

We will continue working in Edge Animate today. Hopefully everyone was able to sign up for a free Adobe user ID and download a free version of the software onto your computer. Once installed, take the application from the applications folder and drop it on to your thumb drive. We will be running the application off of your thumb drive in class.

DUE today: Project 1 handout – questions 1-4 (see week2) – please bring a printed copy with you to class.

Lesson

Layers Comps – Photoshop
Review Edge Animate: Interface, palettes, creating graphics, creating animations
Save for web: PNG, SVG, GIF & JPEG
Smart Object
Slice Tool
Download class lesson files here: week4-lesson

In Class

Edge Animate exercise
Time to work on story-boarding ads (728x210px – 72dpi)

Homework

-> Complete in-class exercise
In Edge Animate (728x210px – 72dpi)
Create animation using: transformation, opacity, positioning, rotation with at least 3 shapes/objects. One of those objects should be an animating gif (created in photoshop and animating statically – see the heart example in the lessons folder).
-> Continue to send me interesting website URLs

-> DUE: Monday 2.25
Story-board and script sketch. A storyboard is a visualization in drawing of the different shots (shot sketches) in the order they will appear in the finished work, and includes compositional information (close up, pan, wide shot, etc.). Your drawings can be very simple-stick figures even. Hand in to me the three sentences that will appear in your ad (keep the sentences short!).

-> DUE: Monday 3.4
Static, realized design comp of your storyboard. This should basically be the finalized PSA designed statically.

ADV3662 – Week3

Hello,

Today we will begin to look at Edge Animate. For this you need to have signed up for a free Adobe user ID. You are then able to download and install a free version of the software onto your computer. Once installed, take the application from the applications folder and drop it on to your thumb drive. We will be running the application off of your thumb drive in class.

Lesson

Edge Animate: Interface, palettes, creating graphics, creating animations
Save for web: PNG, SVG, GIF & JPEG
Smart Object
Slice Tool
Download class lesson files here: week3-lesson

In Class

Experiment with Edge Animate
Discuss homework reading, look at URL, review animated gif assignment
Break into groups: share your project topic and research to date
Time to work on homework

Homework

1. DUE next week Project 1 handout – questions 1-4 (see week2)
2. Here are the list of inspiration websites collected to date by everyone (this should continue to grow over time so please send me interesting links):

Justin Jackson
http://www.saltfilms.com.sg/

Angel Nunez
http://slaveryfootprint.org/

P. Wesolowski
http://www.nike.com/jumpman23/aj2012/ – This website simply left me speechless, and i’m not even a big fan of air jordans.

Zhourong Zhang
http://www.yodabaz.com/

Matthew Zagada
Lynx Excite Angel Ambush London Victoria Secret (Youtube video)
One Show 2012 TBS Ad
McDonald’s Pick and Play (Youtube video)
National Geographic (Vimeo Video)

David Cayetano
davidcayetano.com

Yuki Lin
http://www.coraline.com/

ADV3662 – Week2

Hello! Welcome to week2.

Semester Project Overview
Over the course of the semester you will be asked to define a well thought-out online promotional strategy. Project 1 entails a Public Service Announcement (PSA) in the from of an animated banner with a clear ‘call to action.’ This will lead directly into Project 2, a one page, interactive info-graphic website about the PSA. The two pieces collectively should produce a polished, professional quality persuasive interactive online campaign.
Download Project 1 handout here >>ADV3662_Project1Overview

-> Specifications for Banner ad:
728 x 210 Large Leaderboard – after the ad is designed and approved (static version) we will build the animation over the next few classes using Edge Animate. All images will need to be saved as PNG files at 72dpi

Lesson

Frame-by-frame animation
Photoshop animation exercises and experiments: lessons-week2
Setting up a Cloud account (When you are on the page, select the link at the bottom: Don’t have an Adobe ID?)
Example Info-Graphics both static and interactive:
http://www.msnbc.msn.com-k.us/2013/?Article87520
http://static.businessinsider.com/image/4bbf5bcc7f8b9a4107340600/ipad-infographic-large.jpg
http://www.sunrunhome.com/solar-for-your-home/guide/advantages/environmental-infographic/
http://columnfivemedia.com/ (Design agency that specializes in Info-Graphics)
http://www.onlineschools.org/state-of-the-internet/soti.html
http://jessandruss.us/
http://html5readiness.com/

In-Class

Finish frame-by-frame animation
Begin to work on homework

Homework
1. Select project topic and begin research (see Project 1 handout above – questions 1-4 DUE 2.20)
2. Read these two relevant articles about info-graphics:
Design Quality Info-Graphics (at the end of this article you can find lots of examples and additional resources)
Visual Communication: Motion Graphics

ADV3662 – Week1

Welcome to week 1 of Interactive Animation

Handouts:
ADV3662_HitchingsSyllabus

Class Files:
lesson-week1

Resource Sites
Inspiration

Communication Arts: www.commarts.com
Webby Awards: www.webbyawards.com/webbys (look for ‘Interactive Advertising’)
The One Club: www.oneclub.org/os (click the ‘One Show Interactive’ button and look for winners in the ‘banners dynamic’ category)

Tutorials

Codeacdemy: www.codeacademy.com
Mozilla Developer Network’s Javascript Area: www.developer.mozilla.org/en-US/docs/JavaScript
Khan Academy Computer Science (javascript-based) http://khnaacademy.org/cs
jQuery docs: http://docs.jquery.com/Main_Page
Lynda: www.lynda.com

Tools

Adobe Edge Animate
Dreamweaver
TextWrangler (free for Macs) – general purpose editor for HTML and Javascript
Notepad++ (free for PC) – general prupose editor
The Firefox Firebug extension
The Google Chrome

Homework
Read: The 7 1/2 Steps to Successful Info Graphics