Tue, Nov 29

Today's objectives

  • Review assignments
  • Prepare for practical quiz
  • Review quiz

Preparation

  • Have Adobe After Effects and ready to go.

Animation with AfterEffects

AfterEffects is a bit like Photoshop for video. It's a huge and powerful program, and will take some time to understand. A few basic concepts:

Projects

A project is where everything associated with your particular work is located. A project has one or more compositions

Composition

A composition is a combination of graphics. A simple project may only have one composition, a complex one may have hundreds.

Layer

AfterEffects layers are similar (but not identical) to Photoshop layers. They may contain still images, motion graphics, video footage, type, effects or 3d elements.

Timeline

The timeline allows you to move through projects and compositions in time. Each layer has its own sequence of frames/

Frame

A frame is a single point on the timeline. When frames are played back rapidly, the illusion of motion is created. A typical frame represents 1/30 of a second.

Basic animation
  • Transform:
  • Position
  • Scale
  • Opacity
  • Rotation
  • Animate lines with trim paths
  • Import from Photoshop and Illustrator
  • Animate text

Animation with AfterEffects

AfterEffects is a bit like Photoshop for video. It's a huge and powerful program, and will take some time to understand. A few basic concepts:

Projects

Backup task

This plan may be what you are using - if it is adequate - or what you plan to do.

Use phrases like “I am currently…” and “I plan to…” to describe your plan. Be brief - a few sentences is fine. Refer to the section below for details on how to back up data.

Marking: this task is evaluated as pass/fail and is part of your class mark

Submission

Post your personal backup plan to the #backup Slack channel by Mon, Dec 05. You'll need to add yourself to the channel with the Add channel->Browse all channels button in Slack.

Quick topics

Intellectual Property

Michael Geist's web site is the best starting pointing for news on intellectual property in Canada.

A primer on Canadian Copyright Law.

Open source concepts

A good definition of open source

Creative Commons: an "open source" license for creative works

Industrial design

The Graphical User Interface gallery

Coming soon...

Using Processing on the Web.

While Processing sketches can be run within the Processing IDE, or exported as applications for Windows, Linux or MacOS, you can also insert them in web pages. Processing uses Processing.js. To do this, you need to do several things:

  • First, you need to enable JavaScript mode. Choose "JavaScript" from the mode menu at the top right of the Processing IDE window.
  • If you don't see JavaScript mode as an option, choose "Add Mode..." and install it.
  • Switch into JavaScript mode and choose "Export" from the file menu. This should create a "web-export" folder and open it.
  • Within this folder you will find the "processing.js" library, the ".pde" file which is your sketch, and an HTML file that allows you to preview the sketch. You can look the the HTML to see how the sketch is shown on a web page, and insert that code into your own page.
  • Note that some older browsers will have problems displaying Processing files, and some sketches may need changes to work properly in JavaScript mode.
  • A good tutorial on how to do this is here.