COMD3662-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

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

0 Comments
Leave A Response

COMD3662 – Week4

DUE Today:

  • First draft of storyboard and script sketch (paper and pencil is fine). Be prepared to present in class.
  • Gif animation exercise. Please post you and your partners type animation (words opposite in meaning) to a sub domain folder on your server and send me the link via this blog.

Lesson

  • 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 as a layer comp in Photoshop (728x210px – 72dpi)
  • Experiment with Edge Animate

Homework

  • Compose three sentences for banner ad – (typed and handed in as PDF in word)
  • Begin to draft version of storyboard as a layer comp in Photoshop or Illustrator)
8 Comments
Leave A Response

COMD3662 – Week3

DUE

  • Two words opposite in meaning: finish frame-by-frame animation – photoshop gif animation. Create a simple webpage (index.html) – place your partners animation along with yours within – create a sub-directory folder on your server and upload html file along with the two gifs. Please send me the link!
  • Project proposal due. See week 1 for Project1Overview.
  • Example of an existing info graphic (can be static) on the subject you are interested in pursuing.

Agenda

  • FTP: creating a webpage and uploading to server
  • Info graphics. How is what we are doing for project1 and 2 similar?

Lesson

  • File optimization, save for web: PNG, SVG, GIF & JPEG, (www.kraken.io/)
  • 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.
  • 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 of the different scenes of your animation in the order they will appear. Think about compositional information (close up, pan, wide shot, etc.) Storyboards can start off as drawings and can be very simple-stick figures even. We will work on creating the layer comps in class next week.

15 Comments
Leave A Response

COMD3662 – Week2

Hello! Welcome to week2.

DUE

Agenda

  • Week 1 lesson. If time allows week 2 lesson.
  • 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.

Lesson

  • Frame-by-frame animation
  • Type and Motion
  • 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:

  • Finish frame-by-frame animation: photoshop gif animation experiment (I will ask you to save to my dropbox end of class next week)
  • Project proposal due next week. See week 1 for Project1Overview.
  • Find an existing info graphic (can be static) on the subject you are interested in pursuing. I will ask you to post a link to it on a discussion page on Openlab next week.
16 Comments
Leave A Response

COMD3662 – Week1

Welcome to week 1 of Interactive Animation

Handouts
ADV3662_HitchingsSyllabus
ADV3662_Project1Overview

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

1 Comments
Leave A Response

Next Entries »
Go To Top »