COAP:COAP-2160/week1

Week 1 - Create fancy animated presentations with impress.js

Prerequisites

• Getting started with HTML (mandatory reading for Ghazzawi and other students without prior HTML knowledge). Ignore the Advanced guide. It's outdated.

• HTML and XHTML elements and attributes or any other good HTML tutorial on the Web...

• CSS tutorial or any other good CSS tutorial on the Web...

Monday

Impress.js demos

• impress.js (Tutorial in this wiki)
• Examples and demos (from the official site)

Student activities / impress.js

• Download impress.js from

https://github.com/bartaz/impress.js

(find the Download ZIP button to the right)

• Unpack the zip archive

• Copy index.html to project1.html
• Copy index.html to save.html

• Modify contents of project1.html

Wednesday

• Impress.js continued (Styling with CSS)
• Flash Crash course (to be confirmed)

Student activities (hw 1 preparation)

Get the following files ("save link as"):

• test.html
• impress.js
• impress-min-presi.css

Students who already started working on their own presentation, may only have a look the file (your choice ...)

Flash CS6 crash course

(Starting on Monday, continued on Wednesday, for students without prior knowledge)

Elements of the Flash Desktop

• Handout: Flash CS6 desktop tutorial
• Handout: Flash CS3 keyboard shortcuts

Creating simple Drawings

Topics: Stage size, Drawing modes, Selecting objects, Drawing and painting tools, Erasing and alignment, Colors, Adding text

• Handout: Flash drawing tutorial

Simple use of Layers

• Handout: Flash layers tutorial

Importing clipart and textures

• Resource: Clipart and texture
• In a nutshell: Get SVG objects from http://openclipart.org/ and import via Illustrator

Introduction to motion animation

• Previews: flash-cs-4-motion-tweening.html
• Handout: Flash CS6 motion tweening tutorial
• Summary: Flash animation summary (optional)

Embedded movie clips

• Previews: flash-cs-6-motion-tweening-a-clip.html
• Handout: Flash embedded movie clip tutorial

Homework

Option A (Students with prior Flash knowledge)

• Create a presentation with impress.ch
• You can freely choose a topic and reuse prior work.

Option B ((to be confirmed !!, Only for students without prior Flash knowledge !)

• Create an animation with Flash CS6 using motion tweens.
• The moving object must have an embedded animation. In other words, there will be an motion animation on the main time line and another one within the symbol that is being animated.

Due

• Wednesday, week 2 before class
• Option A (impress.js): Your presentation must be uploaded as a zip file to the Worldclassroom (Canevas)
• Option B (Flash): Upload the *.fla file to the Worldclassroom (to be confirmed !!)

Documentation / Links

Impress.js

• impress.js (documentation in this wiki)
• Official impress.js website (including downloads, examples and links to other resources)
• Building Impressive Presentations with impress.js - Ebook (E-book, $14.99, half price of that in Aug 2013)

CSS tutorial

• CSS tutorial

Documentation for techies

• CSS transforms tutorial (Follow up the links)

Flash

• Flash tutorials and/or COAP-2110 program
• ... more to come, but probably we will do this later, e.g. in week 2 or 3