ADV3662 – Week5

DUE Today:

  • First draft of story-board (as a layer comp in Photoshop or Illustrator)
  • And script (typed and handed in as PDF in word)

Lesson

  • Edge Animate: pinning, tweening, importing images, key frame tools and symbols

In-Class

  • Any new inspiration websites?
  • Time to work on story-board
  • Experiment with Edge Animate
  • Once storyboard is approved you can begin to save graphics for web and begin to set up Edge file

Homework
Take a look at this website: http://visualized.com/2014/#storytellers

DUE: Second draft of banner comp should be finaized (Photoshop or Illustrator layer comps are fine). You will be asked to present them to client – via PDF posted on dropbox.

ADV3662-Week4

Here are a number of resources passed on to us by Barbabra Arrindell. Please read them for Tuesday. I will post our class agenda on Monday. Have a nice weekend!

Resources

TheSkyisPink<–watch the fim…read the intro
DamascusCitizens.org/TheSkyIsPink

Maps of gas drilling in Bradford County, PA – the first map, an animated GIF is of permitted gas wells by quarter year intervals – take a moment to watch it advance with a different color for each quarter
http://www.bradfordcountypa.org/Natural-Gas.asp?specifTab=2

NY Times – GasDrilling is a Ponzi Scheme
http://www.nytimes.com/interactive/us/natural-gas-drilling-down-documents-4-intro.html?_r=0

Aug 28, 2012 – Natural Gas (UNG): From “Ponzi Scheme” to Huge Write downs. A little over a year ago The New York Times published a very controversial … doubt on the wells in shale formations in Barnett, Marcellus, and Fayettesville
http://seekingalpha.com/article/832831-the-natural-gas-ponzi-scheme

AND the NY TImes article on “Heart’s Disease” or Solastalgia
http://www.nytimes.com/2010/01/31/magazine/31ecopsych-t.html?_r=1

Artwork by Kate MacDowell;  photograph by Dan Kvitka for The New York  Times
http://www.nytimes.com/2010/01/31/magazine/31ecopsych-t.html?pagewanted=all

Attached here is their latest appeal letter – it gives more info about DCS:
DCS Appeal Letter 9:06:13

DUE Today:

  • First draft of story-board and script sketch (paper and pencil is fine)
  • Gif animation exercise
  • Reading (see above)

Lesson

  • Review introduction to Edge Animate: Interface, palettes, creating graphics, creating animations
  • Pinning, tweening and key frame tools
  • Download class lesson files here: week4-lesson

In-Class

  • Any new inspiration websites? Discuss reading
  • Time to work on story-board as a layer comp in Photoshop (728x210px – 72dpi)
  • Experiment with Edge Animate

Homework

First draft of Story-board (as a layer comp in Photoshop or Illustrator) and script (typed and handed in as PDF in word)

ADV3662 – Week3

DUE Today

Agenda

  • Meeting Client – we will have a client skype call with Barbara Arrindell from Damascus Citizens group.
  • Clarify questions related to project overview I handed out in class last week: ADV3662_Project1Overview
  • Be prepared to ask questions. What do you need to know in order to move forward with the project?

Lesson

  • Review layer comps in Photoshop. Here is an example: LayerComp-Example.psd
  • Review file optimization, save for web: PNG, SVG, GIF & JPEG, (www.kraken.io/)
  • Introduction to Edge Animate: Interface, palettes, creating graphics, creating animations
  • Download class lesson files here: week3-lesson

Project 1 Specs

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 for web at 72dpi

Homework

DUE: First draft of 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.

ADV3662 – Week2

Hello! Welcome to week2.

DUE

Agenda

  • Watch short video: Grant Skinner – Interactive Developer
  • Project1: ADV3662_Project1Overview
  • Finish frame-by-frame animation
  • Photoshop gif animation experiment (I will ask you to save to my dropbox end of class)
  • Begin to work on homework

Lesson

  • Frame-by-frame animation
  • File optimization, save for web: PNG, SVG, GIF & JPEG, (www.kraken.io/)
  • Photoshop animation exercises and experiments: Lessons-week2
  • Setting up a web hosting plan. You will need to have a host and a domain name for the class. Here are two options: Kionic.com or Aplus.net. If you already have you do not need to set up a new one for this class.

Example of interactive ‘mini-sites’:

Student examples form previous semesters:

Homework:

  1. Find one inspirational website from www.commarts.com. Post to Openlab class blog
    http://openlab.citytech.cuny.edu/groups/adv3662-interactive-animation/forum/topic/interactive-websites-examples/
  2. Read: DAMASCUS handouts: DAMSCUS-Survey and DAMSCUS-AboutSurvey
  3. Study these two links:

ADV3662 – Week1

Welcome to week 1 of Interactive Animation

Handouts
ADV3662_HitchingsSyllabus

Agenda

  • Introduction of the course
  • Course Objectives
  • Website – Hosting and Domain (you will need one for the class – if you have an existing site that will be fine. If you have none you will need to get one. Department recommends: Kionic
  • Interactive storytelling and animation – examples
  • Grant Skinner –

“Grant Skinner is an innovator who thrives on pushing through problems and is inspired by the unknown technological possibilities ahead.

As the CEO of gskinner.com, a rich interactive design firm based in Alberta, Canada, he loves playing with technology in a research and development role. It was his passion for exploring new frontiers that led him to the Internet, where he began building content that no one had seen before.” – Lynda.com

Lesson
lesson-week1

Exercise: Create Animated GIFs with Photoshop (300 x 250px, 72dpi)
Choose two words, opposite in meaning. Create one animation to show meaning in each word.

Inspiration Resources

Tutorials

Tools

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

Homework

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.