ARTDM 170 Week 1: Introduction


Published on

Published in: Spiritual, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • BEFORE CLASS•    Check if books are in student bookstore or across the street•    Fill out Office Hours Form in Dean’s office•    Post name, email, and course title and section on the board: ARTDM-171 Web Design, Section: 0465, Lecture and Lab: Tuesdays 2-4:50pm in A-303, Open Lab: Tue 1-2pm, 5-6pm, A-303.•    Print out the roster •    Print out 26+ syllabi•    Take attendance
  • In addition to Animation, you'll also learn how to make these things INTERACTIVE!
  • Where to get it:
    Peachpit Press


    DVC Bookstore

    Used Bookstores

    Borders and other places...
  • Take a 15 minute break during this!
  • computer is an animation machine, continually refreshing each pixel at the monitor's refresh rate. undetectable and significant.  brain perceives a persistent unflickering visual field, despite the changing data coming through our eyes.
  • HW:

    * Meta tag refresh animations
    * At least 10 frames
    * Recycle these frames for GIF animation next week.
  • ARTDM 170 Week 1: Introduction

    1. 1. ARTDM 170 Week 1: Introduction Gilbert Guerrero
    2. 2. ARTDM-170 Animation and Interactivity Fall 2009, section: 8082 • Gilbert Guerrero • Open Lab: Wednesdays, 5:00-7:00pm, Room ATC-110 • Lecture and Lab: Wednesdays, 7:00-9:50pm, Room ATC-110
    3. 3. Class Blog
    4. 4. What will you learn in this course? • Adobe Flash Animation • GIF Animation • HTML Slideshows  • Dynamic HTML Scripting • Processing Applications
    5. 5. Interactivity
    6. 6. Required Text • ActionScript 3.0 Cookbook by Joey Lott, Darron Schall, Keith Peters. OʼReilly Media, 2006.  
    7. 7. Required Portable Storage • USB Drive • iPod • some other media or device  • Scratch Drives are emptied once a month
    8. 8. Evaluation Procedure • 50% – Projects • 30% – Homework • 20% – Attendance and Class Participation
    9. 9. 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
    10. 10. Attendance • Let me know if you're going to miss a class. • Dropped after two missed class (without telling me.)
    11. 11. 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.
    12. 12. 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 field of concentration 6. Are you taking other courses related to this course? 7. Why are you taking this course? Email your answers to
    13. 13. Animation and Interactivity? What is an animation?  What makes something interactive?
    14. 14. Meta Tag Refresh Animation • Most basic form of animation on the web • Pre-dates gif animations
    15. 15. 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.
    16. 16. 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>
    17. 17. 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>
    18. 18. 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
    19. 19. Duplicate pages and change the code to make a sentence with five 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
    20. 20. 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
    21. 21. 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>
    22. 22. 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
    23. 23. 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>
    24. 24. 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>
    25. 25. 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!