ADV3662 – Interactive Animation

Welcome to ADV3662 (Interactive Animation) online. Here you will find regular postings for handouts given in-class.

Course Description:

Animation and interactivity are important presentation tools for engaging the user. The goal of this course is to teach the development of time-based animation skills and introduce fundamental concepts in programming interactive graphics. This course is a prerequisite for the Interactive Art Direction course and Interactive Interface Design course.

Please make sure you are a member of Openlab! You can access this site through the course posted on Openlab

ADV3662 – Week14

Hello!

Here we are – going into our final class.

All final work DUE

Please check and update the dropbox folder. You should have something saved into each of the class folders.
If you have submitted just URLs in the past, you must submit the actual files for your final grade. Test your project! I should be able to unzip the archive, load “index.html” into a browser, and see everything works correctly.

Project 1 – Banner

Make sure you loop and link your project to the survey.
Make sure you have saved stage 1-4 into the dropbox folder. I should have your original Edge file as well as your linked and looped ‘published folder’ inside that folder should be a ‘packaged’ folder and a ‘web folder’
Here is an example file (I used Tommy’s project – thank you Tommy!). If you open the edge file you will see it links to the survey and loops: Tommy-Frackin

Project 2 –

Make sure you have saved stage 5-7 into the dropbox folder. I should have your original Edge file as well as your ‘published’ and your ‘packaged’ folder

Final Project Presentation

Presenting in class is part of your final project grade.
You’ll be in front of the class using the main computer and projector. You may bring your file on flash drive or download it from the class site if you prefer (do both to be safe!).
I would like you to include the following information:
1. A demonstration of your final project (project 1 & 2)
2. What your original layout looked like – PDF comps
3. Problems you encountered, or the reasons things changed from the draft, or the other things you examined or tried.

ADV3662 – Week13

Welcome to week 13!

In Class

Make final edits to project 1 based on class critique. Then update Packaged file via dropbox: ‘Stage4-Banner(DeploymentPackage)’
Take-home quiz: create a button with roll-over states in edge
Finalize draft of project 2 layout – should be created as a mock-up in either Photoshop or Illustrator. Goal to present next week (see week 8 homework for content)
Make sure your latest version of the banner is posted to your URL

Lab-time to design part 2. Make sure you set up accurate project dimensions. Recommended size: 960px X 500px.

Lesson continued – Week12-lesson

Packaging files for WordPress
Review last weeks lesson:
Timeline Triggers
Labels
Cursor change
Instance Name
Symbols

Homework

Read: http://blogs.adobe.com/edge/2012/07/18/
Finalize draft of project 2 layout – should be created as a mock-up in either Photoshop or Illustrator. Goal to present next week (see week 8 homework for content)
Make sure your latest version of the banner is posted to your URL

ADV 3662 – Week 12

Welcome back from Spring break! I hope you all had a chance to catch your breath.
Here is our agenda for the day:

In Class

Due Today: first draft of project 2 layout – should be created as a mock-up in either Photoshop or Illustrator
I should have everyone’s banner uploaded to a URL and posted on our discussion page in Openlab
In-class final critique of project 1 – client feedback.
Review layout for project 2
Lab-time to design part 2. Make sure you set up accurate project dimensions. Recommended size: 960px X 500px.

Lesson continued – Week12-lesson

Packaging files for WordPress
Review last weeks lesson:
Timeline Triggers
Labels
Cursor change
Instance Name
Symbols

Homework

Make final edits to project 1 based on class critique. Then update Packaged file via dropbox: ‘Stage4-Banner(DeploymentPackage)’
Take-home quiz: create a button with roll-over states in edge
Finalize draft of project 2 layout – should be created as a mock-up in either Photoshop or Illustrator. Goal to present next week (see week 8 homework for content)
Make sure your latest version of the banner is posted to your URL

ADV3662 – Week11

Hello welcome to week 11!

In Class

By now I should have received everyone’s banner uploaded to a URL and posted on our discussion page in Openlab.
You should have also ‘published’ your animation through Edge Animate and then zipped the folder and upload it into the appropriate class dropbox folder.
In-class final critique.
Inspiration sites anyone?
Lab-time to design part 2. Make sure you set up accurate project dimensions. Recommended size: 960px X 500px.

Lesson continued – lesson-week11

Timeline Triggers
Labels
Cursor change
Instance Name
Symbols

Homework

First draft of project 2 layout/ storyboard due next week.
Make final edits to project 1 based on class critique. Then update URL and via dropbox.

ADV3662 – Week10

Hello welcome to week 10!

In Class

Upload banner. – Create a sub-directory within your existing domain. Post your link on the discussion page on (click here >>) openlab.
You should also ‘publish’ your animation through Edge Animate and then zip the folder and upload it into the appropriate class dropbox folder.
In class lab time to begin designing storyboard part 2. Make sure you set up accurate project dimensions. Recommended size: 960px X 500px.

Lesson continued – lesson-week9 – part 2: Week10-Lesson

Interactive (scripting) part of the program.
Timeline Triggers
Labels
Cursor change
Instance Name
Typography – online web fonts

Homework

Continue designing the layout/ storyboard for part2 of the project.
Make final edits to project 1 based on class critique. Then hand in via dropbox.
I recently came across this video. It’s already three years old but I think it’s worth watching: http://www.aiga.org/video-gain-2010-harris/

———————————

I need your animations! I was supposed to receive a link to everyone’s posted ad – even if it is a work in progress. I would like to pass on to the client for feedback.
Also I would like to encourage you all to apply to the CUNY service corp. The deadline is tomorrow March 31st – so you have very little time left. But it is really a great opportunity and you will get paid for your work. http://www.cuny.edu/site/servicecorps/students-form.html

I will be posting here again before our next class so please check back!

ADV3662 – Week9

Hello welcome to week 9!

DUE Today:

PSA Due – first draft end of class. Make sure you send me a link of your uploaded finalized banner

Lesson – lesson-week9

Symbols
Responsive layouts
Tweening effects
Buttons
Cursor change

In Class

Upload banner. – You will need a URL (domain name and host) – if you have an existing one that is fine. You can create a sub-directory. Please email me a link. You can also ‘publish’ your animation through Edge Animate and then zip the folder and upload it to the class dropbox folder.
In class lab time to finish part 1 or get started on part 2.

Homework

Continue collecting data for part 2 of the project and begin storyboarding the layout.

ADV3662 – Week8

Hello everyone, here is a recap of Week 8.

DUE:

By now I should have received the first draft of your Banner Ad comp (saved into the Stage2 folder in dropbox as a PDF) and your Banner Ad copy (saved into the Stage1 folder in dropbox). Your name should be on all files. You will be marked late if it is not in there.
Note the banner specs changed to: 468px x 210px
Start to save individual images for web from your Banner Ad comp (PNGs, JPEGs, Gifs). We will begin to build out the animation in Edge Animate.

Lesson –

Review Edge Animate: animation tools – key frame tools and timeline

In-Class

Any new inspiration websites?
Peer Assessment worksheet from last week
Time to work on animation
Experiment with Edge Animate
Once storyboard is approved you can begin to save graphics for web and start to set up Edge file

Homework

Start to build out your animation in Edge – first rough draft is due next week.
Please watch this video on responsive layouts: http://tv.adobe.com/watch/learn-edge-animate/creating-a-responsive-layout-dc/
For part 2 of the project, read the first draft of content for part2: Part2-Conent

ADV3662 – Week7

Hello everyone! Welcome to week7.

DUE:

I should have received the first draft of your Banner Ad comp (saved into the Stage2 folder in dropbox as a PDF) and your Banner Ad copy (saved into the Stage1 folder in dropbox). Your name should be on all files. You will be marked late if it is not in there.
Note the banner specs changed last week to: 468px x 210px

Lesson –

Review Edge Animate: animation tools – key frame tools and symbols
We will cover Week6’s lesson

In-Class

Any new inspiration websites?
Peer Assessment worksheet from last week
Time to work on animation
Experiment with Edge Animate
Once storyboard is approved you can begin to save graphics for web and start to set up Edge file

Homework

Start to save individual images for web from your Banner Ad comp (PNGs, JPEGs, Gifs). We will begin to build out the animation in Edge Animate.
Start to organize your content for part 2 of the project. See the first draft of content for part2: Part2-Conent

ADV3662 – Week6

DUE Tuesday:

Reminder: please make sure you have saved a text copy of your banner ad into the drop box folder: ‘Stage1-BannerAdCopy’ (Thank you if you have done so!)
Static, realized design comp of your storyboard. This should basically be the finalized PSA designed statically in Photoshop or Illustrator).
Post research to the discussion board on Openlab: http://openlab.citytech.cuny.edu/groups/adv3662-interactive-animation/forum/topic/2014-visualized-conference/

In Class

Client meeting
Break into groups. Review peer-assessment worksheet: ADV3662-PeerAssessment
Time to work on storyboard and layer comps for your PSA in Photoshop (728x210px – 72dpi)

Lesson

Review Edge Animate: Interface, palettes, creating graphics, creating animations
Working with symbols
Intro to triggers
Download lesson here: week6-lesson

Homework

Refine PSA ad based on in-class feedback
Research at least 3 inspirational sites
Begin to save PSA images for web and organize document in Edge Animate

M. Genevieve Hitchings