Week5 – ADV3662
Hello! Welcome to week 5.
DUE:
- If you did not hand in your project proposal – questions 1-4 (see week1). Please do so! If you have not received a confirmation than double check with me.
- First draft of story-board and script sketch.
Lesson
- Edge Animate: pinning, tweening, 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
Start to organize your content for part 2 of the project. See handout: ADV3662_SiteStructure
DUE: Static version of your banner should be built out and ready to animate by end of class next week.
*Note next class meeting is on Tuesday October 15 (no classes on 10.14.13)
Week4 – ADV3662
Hello! Welcome to week4.
DUE:
- If you did not hand in your project proposal – questions 1-4 (see week1). Please do so, that was actually due last week.
- First draft of story-board and script sketch (I actually extended the deadline until next week: 10.07.13)
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?
- 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
DUE: 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.
Week3 – ADV3662
Hello! Welcome to week4.
Announcements
1. Here is a link to the class dropbox folder where you can send me your projects:
https://www.dropbox.com/sh/wifi42y0vxyn5uy/X_Nzt4AKBE
2. Make sure you have a web host set up by the end of the month: 09-30-13
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
In-Class
- Any new inspiration websites?
- Review frame-by-frame gif animations created in Photoshop
- Experiment with Edge Animate
- Time to work on homework
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.
Week2 – ADV3662
Hello! Welcome to week2.
DUE
- Photoshop gif animation experiment (I will ask you to save to my computer in class)
- One inspirational website from www.commarts.com
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 Info-Graphics both static and interactive:
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/
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
In-Class
- Watch short video: Grant Skinner – Interactive Developer
- Finish frame-by-frame animation
- Begin to work on homework
Homework:
DUE: Monday 9.23
Turn in a written description of the PSA, answering the questions 1-4 (see handout week 1), plus any other information and research about the issue the PSA addresses or serves. You may also describe what the PSA will look like, and can make references to the look of other media.
ADV3662 – Week1
Welcome to week 1 of Interactive Animation
Handouts:
ADV3662_HitchingsSyllabus
ADV662-ProjectOverview
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 purpose editor
- The Firefox Firebug extension
- The Google Chrome
Homework
- Read handouts above
- Start to research your topic
- Practice Exercise
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.