Courses
 
 

 

HUM 203: The World in Motion, Animation in Theory and Practice

Syllabus | Schedule | eReserve | Resources | Student Projects | DXARTS | CHID | Simpson Center | UW Home | Labs | Powerpoints

   

Click here to view the lab notes from module 2

Click here to view the lab notes from module 3

Click here to return to the current module

 

Module 1

Activate your account

  • About: http://www.washington.edu/computing/uwnetid/
  • On the left hand column click on “manage your UW netID resources”
  • Log in with your UW username and password
  • (This page allows you to set your e-mail forwarding options and account services)
  • Click on “Turn services on or off”
  • Under The “services that are off” heading the following services should be turned on:
    • Student Web publishing
    • Dante account

FTP software

You only need to download this software if you intend to use your own computer to upload your website. The computers in Odegaard already have it installed and located on the desktop.

Mac:

Windows:

    • The server address/host to connect to is: dante.u.washington.edu
    • Your username and password is your UW netID
    • All your website files (index.html + images folder) need to be included in the “public_html” folder
    • Your website domain name is “students.washington.edu/(your UW netID username)”
 

GIF animation workflow

  1. Create your first keyframe in Photoshop (using layers, shapes, color)
  2. Be sure to save as a .psd file so you can continue to work on your composition at a later date
  3. Once you are satisfied with your first frame open the animation window (at the top toolbar select: window --> animation)
  4. In the animation window, duplicate the first frame by selecting the duplicate layer icon (it looks the same as the new layer icon)
  5. with that second frame selected in the animation window, begin to translate your objects in your scene to position it for your second keyframe
  6. continue this process (i.e. duplicate last frame, translate objects, hide/show layers) until your story is complete (you can preview your frames by using the playback controls located at the bottom of the animation window)
  7. Once your animation is complete select: file --> Save for web
  8. the right side palette looks confusing, but all you press is save (at the top)
  9. IMPORTANT: the save as type needs to be "HTML and images" (.html) This creates a webpage with your animation already embedded in it and an images folder with your GIF file inside of it
  10. IMPORTANT: the HTML file MUST be named index.html
  11. Log on to your dante account via FTP software and put your index.html file and images folder in your public_html folder on your remote server space
  12. If you followed all steps correctly you can type in your domain name: students.washington.edu/(your UWnetID) and see your animation playback
  13. Note: If you already use your student webpage for something else simply make a link to your HUM 203 files on your homepage

Example

Here is a mediocre example of what we expect for the first project. (Note: I used quite a bit of line drawing in my character, you would be using ONLY primitive shapes to represent a character in your project if you choose to use one). The idea though is that this animation tells a clear story through simple stills of keyframes. It makes use of layers, color, camera movement..etc. Your task is to take this structure and use your imagination to tell a story of your own.

GIF Example: Assignment 1

this .PSD file is in the HUM203example folder which can be found in LabTemp (Any Odegaard computer desktop has a LabTemp icon, double click). You can view layer breakdown and scene structure. Please be sure to tansfer the example file to your desktop so you don't distort the original file/

Important Notes

  • Primitive Shapes = Geometric Solids = circle, square, triangle, trapezoid, pentagon.....
  • If you choose a more abstract route for this assignment keep in mind that your idea needs to be apparent in its progression and trajectory.
  • We are defnitely NOT looking for any fluid motion in this first assignment
  • Assignment one needs to be be up online by the beginning of your lab section, week 3.

REITERATION: In the context of this assignment, primitives are solid geometric shapes, what you choose to do with them is up to you. The example simply outlines the idea of keyframing format of the assignment. The character in the scene is NOT acceptable for assignment 1 because it is not composed of silmple solid shapes.

General Grading Criteria

  • Timely completion
  • Ability to identify keyframes
  • Ability to upload your animation
  • Creative use of primitives

Assignment 1 is worth 30 pts.