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
- Choose one of the 30+ innovators listed under the storytellers. I would like to research them and find two significant projects they have been involved with.
- On Openlab, please list their name, the links to their projects and a brief description (300 words) of why they are interesting to you:
http://openlab.citytech.cuny.edu/groups/adv3662-interactive-animation/forum/topic/2014-visualized-conference/
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
- DAMASCUS – make sure you read all the related links posted under homework week2
- Post your URL on Openlab discussion page:
http://openlab.citytech.cuny.edu/groups/adv3662-interactive-animation/forum/topic/post-your-domain-name-your-url-here/ - Post your URL for inspirational website from www.commarts.com to Openlab discussion page:
http://openlab.citytech.cuny.edu/groups/adv3662-interactive-animation/forum/topic/interactive-websites-examples/ - Animated psd of type exercise (two opposite words 300x250px) – I will ask everyone to save the file as a gif into my dropbox folder
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
- Post your URL on Openlabs discussion page:
http://openlab.citytech.cuny.edu/groups/adv3662-interactive-animation/forum/topic/post-your-domain-name-your-url-here/
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’:
- http://static.businessinsider.com/image/4bbf5bcc7f8b9a4107340600/ipad-infographic-large.jpg
- http://columnfivemedia.com/ (Design agency that specializes in Info-Graphics)
- http://jessandruss.us/
- http://html5readiness.com/
- http://www.evanshalshaw.com/more/effects-of-drug-driving/
- http://www.dangersoffracking.com/
- http://www.breakitdown.ie/
- http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek
Student examples form previous semesters:
Homework:
- 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/ - Read: DAMASCUS handouts: DAMSCUS-Survey and DAMSCUS-AboutSurvey
- 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
- 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 purpose editor
- The Firefox Firebug extension
- The Google Chrome
Homework
- Join Openlab site: http://openlab.citytech.cuny.edu/groups/adv3662-interactive-animation/
- Join this blog
- Set up your own URL if you do not have one.
- Post your URL on Openlabs discussion page.
- Finish Practice Exercise – animated gif.
- READ: http://alistapart.com/column/he-aint-snowfalling-hes-my-brother
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.