ARTDM 170 Week 1: Introduction

ARTDM 170 Week 1: Introduction Gilbert Guerrero gguerrero@dvc.edu http://gilbertguerrero.com/blog/artdm-170/

ARTDM-170 Animation and Interactivity Fall 2009, section: 8082 • Gilbert Guerrero gguerrero@dvc.edu • Open Lab: Wednesdays, 5:00-7:00pm, Room ATC-110 • Lecture and Lab: Wednesdays, 7:00-9:50pm, Room ATC-110

Class Blog http://gilbertguerrero.com/blog/

What will you learn in this course? • Adobe Flash Animation • GIF Animation • HTML Slideshows • Dynamic HTML Scripting • Processing Applications

Interactivity

Required Text • ActionScript 3.0 Cookbook by Joey Lott, Darron Schall, Keith Peters. OʼReilly Media, 2006.

Required Portable Storage • USB Drive • iPod • some other media or device • Scratch Drives are emptied once a month

Evaluation Procedure • 50% – Projects • 30% – Homework • 20% – Attendance and Class Participation

Workload • Weekly Exercises – One or two per week, no less. • Reading Assignments – Do the reading • Class Blog – Usually, write about what you read • Final Project – Ongoing work

Attendance • Let me know if you're going to miss a class. • Dropped after two missed class (without telling me.)

Class Setup • 5 - 7 pm – Open lab. I'll be there for one-on-one help. • 7 - 9 pm – Lecture and hands-on learning. 15 minute break in the middle. • 9 - 10 pm – In-class lab. Work on what you learned.

Student Survey 1. First and last name 2. Preferred e-mail address 3. Phone number (last minute cancellations) 4. Year in college 5. Focus or ﬁeld of concentration 6. Are you taking other courses related to this course? 7. Why are you taking this course? Email your answers to gguerrero@dvc.edu

Animation and Interactivity? What is an animation? What makes something interactive?

Meta Tag Refresh Animation • Most basic form of animation on the web • Pre-dates gif animations

Meta Tag Refresh code •This meta tag will cause the browser to refresh with a new web page. •The code is placed in the header of your web page.

Create a basic web page called slide1.html with this code: <html> <head> <meta http-equiv="Refresh" content="1; URL=slide2.html" /> </head> <body> <center>Hello</center> </body> </html>

Create a second web page called slide2.html with this code: <html> <head> <meta http-equiv="Refresh" content="1; URL=slide1.html" /> </head> <body> <center>World</center> </body> </html>

The Meta Refresh tag causes the pages to go from one to the next and then loop back again Hello World slide1.html slide2.html URL=slide2.html URL=slide1.html

Duplicate pages and change the code to make a sentence with ﬁve words Hello World How Are You? slide1.html slide2.html slide3.html slide4.html slide5.html URL=slide2.html URL=slide3.html URL=slide4.html URL=slide5.html URL=slide1.html

Add a “pause” button by creating a link that goes to a duplicate page which does not contain the refresh tag World slide2stop.html Pause Hello World How slide1.html slide2.html slide3.html URL=slide2.html URL=slide3.html URL=slide4.html

Code for slide2.html with a pause button <html> <head> <meta http-equiv="Refresh" content="1; URL=slide3.html" /> </head> <body> <center>World</center> <center> <p><a href=”slide2stop.html”>Pause</a></p> </center> </body> </html>

Add a “play” button by creating a link that goes to the next slide To start playing the World slideshow, add a link that takes them to the next slide2stop.html slide that has a refresh tag Pause Hello World How slide1.html slide2.html slide3.html URL=slide2.html URL=slide3.html URL=slide4.html

Code for slide2stop.html with a play button. Notice: there is no refresh tag! <html> <head> </head> <body> <center>World</center> <center> <p><a href=”slide3.html”>Play</a></p> </center> </body> </html>

Replace the word with an image: <html> <head> <meta http-equiv="Refresh" content="1; URL=slide2.html" /> </head> <body> <center><img src=“images/pic1.jpg” /></center> </body> </html>

Homework, due Aug 26 – Make a short slideshow animation • Create a slideshow animation using HTML pages with Meta Tag Refresh • Create at least 10 frames • Use images, so there will be at least ten images • Place the images in a folder called “images” with your slide html pages • Add Play, Pause, Forward, and Back buttons (By the end youʼll have at least 20 pages) See you next week!

ARTDM 170 Week 1: Introduction

0 comments

Notes on slide 1

Favorites, Groups & Events