Instructor: John Keston

Meeting Times and Location Section M1 (M/W):
M/W 8am – 11am (with appropriate breaks), Room 305, Pence building

Meeting Times and Location Section M3 (T/R):
T/R 5pm – 8pm (with appropriate breaks), Room 217, Pence building

Syllabus:
IM1480 M1 Fundamentals of IMD
IM1480 M3 Fundamentals of IMD

Required Reading:
Speaking in Styles: Fundamentals of CSS for Web Designers

Week 1 | Week 2 | Week 3 | Week 4 | Week 5 | Week 6
Week 7 | Week 8 | Week 9 | Week 10 | Week 11

We will start the class by using a text editor to create a basic five page website. Dreamweaver is an HTML editor. It does not create Dreamweaver documents, it is used to help you build and edit HTML documents, allowing you to publish content on the World Wide Web.

Before getting started in Dreamweaver it’s important to understand a little about HTML and how websites operate. Therefore we will start by using a text editor like TextEdit, TextMate, or Smultron.

Assignment 1: "Project Portal" Static Web Page
Due Session 1, Week 2 (10 points)

For the official assignment requirements, download the assignment sheet in MS Word format.

This assignment is an introduction to the most basic concepts of building a web page (i.e. hyperlinks, uploading files, creating directories, creating HTML pages in Dreamweaver). It is also the mechanism through which I will grade all of your subsequent assignments. First you will log in to your OLS account and create four new directories within your /htdocs directory. You will then build one web page with links to the new directories you created, and upload the page. This page will be the "project portal" for this class. You are free to use it for other classes too, just make sure to label your assigment links clearly.

Reading Assignment:
Speaking in Styles – Introduction and Chapter 1

Session 2: Today I’ll be demonstrating a couple of ways to produce the "Project Portal" assignment that we discussed last time. We will also start our discussion on XHTML, look at some functionality within the text editors and FTP applications.

Full Webiste Project – “The World” Website
Due Date – Session 2, Week 6
Total Points – 40

For the “The World” project requirements, download the assignment sheet in MS Word format.

Word Project Resources:
Wikipedia.org
The CIA World Factbook
Getty Images Login Information

This weeks reading:
Speaking in Styles – Chapters 2, 3, and 4 (Pages 17 – 88)

Resources:
Tutorials and Documentation at W3 Schools

Session 2: Let’s look carefully at ways to organize content on a computer screen using XHTML and CSS. Knowing more about the XHTML language will help you understand how your website works. It will also help you understand how to fix technical problems when they arise, such as bad links, broken images and alignment issues.

Topics Covered:
DIV tags
Box Model
CSS positioning
Web Dimensions

World Project Milestone 1 Due Session 2, Week 3
Have a mostly complete design of one page in XHTML. Dimensions, colors, fonts and typesetting should be adjusted. A complete navigation scheme should be applied to your design.

Next week’s reading:
Speaking in Styles – Chapters 5 and 6 (Pages 89 – 175)
Brainjar CSS Positioning article

Topic covered:
Image Processing
Image Dimensions
File / Asset Management

Session 2: Today we’ll look at the remainder of design issues to finish our template for the world project. One of these components is Navigation. Use XHTML lists and CSS to create effective and user friendly universal navigation bars. Your navigation should have rollover behaviors and appear distinct from other content and links.

Use this resource as inspiration for your navigation:
Max Design: Listamatic – One List Many Options

I will also be looking at your designs for the World Project Milestone 1 due today.

Topics covered:
CSS Navigation
Navigation Layout
Hover Behaviors

Speaking in Styles – Chapters 7 and 8 (pages 176 – 223)

<link rel="stylesheet" type="text/css" href="worldstyles.css" />

This makes it so that we can use the same CSS for all of our pages. Anytime we make a change to “worldstyle.css” every page in the site will take on the new rules. Also, be prepared for the 2nd milestone due next class.

World Project Milestone 2 Due Session 2, Week 4
1. Show two or more complete pages linked through universal navigation
2. Upload the pages to your server space and present them on the web
3. Make sure that all images and links are working properly
4. Apply the styles as a linked stylesheet

Session 2: Today we will review the competencies for the World project and demonstrate some of the tips and techniques to improve the look of your sites. This includes properly setting up your project environment locally and remotely, using background images to enhance your designs, and properly uploading your content to the remote server (via the student webspace on MyAICampus) on the internet.

An excellent set of usability criteria goes by the acronym SCANMIC. These guidelines can improve the design of your site in many ways. Here’s a brief overview of the criteria:

1. Screen Design (Space, choice of color, readability, image placement, etc.)
2. Content (Who, What, Where, When)
3. Accessibility (Fast Load Times, Browser Compatibility, Easy to Read)
4. Navigation (Title Bar, Headers, Highlighted Navigation Links. Good navigation is like a roadmap, know where you are where you’ve been and where to go next.)
5. Media Use (Graphics help keep users attention and can enhance usability, poor use slows down sites and distract users, Sound, Animation, and Video)
6. Interactivity (e-commerce, feedback, discussions, chat, user customization)
7. Consistency (Page size/page layout, navigation buttons/ images, menus, etc. text – font, font size and color).

Flash is an extremely versatile application which allows it’s users to create an infinite array of applications from something as simple as motion graphics to as complex as fully functional arcade style games. Our first assignment will be to create a bouncing ball in Flash. Click here to view a simple example or look at the more complex example here.

New Requirements for the Bouncing Ball Project:
Download the Bouncing Spheres Project Requirements in MS Word format

To create the bouncing ball, start a new document in Flash. From the insert menu choose “New Symbol”. Call the symbol “Ball1″, check “Movie Clip” and set the registration to the center of the object. Inside the new symbol. Select the oval tool and draw a circle. To constrain your ball to a perfect circle, hold down the shift key while dragging. You can also choose to select a fill color or gradient to make you’re ball a little more fancy. At this stage your ball is a shape and need to be converted to a graphic in order for you to be able to apply motion tweens. Select your shape with the selection tool and from the Insert menu choose “Convert to Symbol”. Make sure you name it and select graphic as the type.

Insert a key frame at frame 20 and another at frame 40 (for a slower bounce try inserting the key frames at 30 and 60). Select the middle key frame and shift+drag the ball to the bottom of the scene. Here you can also adjust the height property of the ball so that it appears to squash down a bit as it strikes the floor.

Now select the 1st key frame and in the properties panel choose “motion” under “Tween” and set the ease to -100. On the middle turn on the motion tween as well and set the ease equal to 100. Hit ctrl+enter to watch the animated ball bounce. After you have added a shadow and sound, duplicate the movie clip and adjust the new movie clips timeline. When you have at least three new Ball movie clips drag them to the stage in the main timeline and test your movie. Publish your movie and put the appropriate files on the server to connect your project to your project portal.

Flash Exercise – The Bouncing Ball
Due Date – Session 1, Week 7
Total Points – 15

World Project Milestone 3 Due Session 2, Week 5
1. Show all six pages linked through universal navigation
2. Upload the pages to your server space and present them on the web
3. Make sure that all images and links are working properly

Session 2: Today we’ll be discussing the main Flash project. Below is an outline of the requirements for the project. Please carefully review the assignment. In the coming weeks we will be demonstrating each of the competencies required for this project.

Flash Project – Interactive Flash Animation: "Four Seasons" (4 scenes)
Due Date – 1st Class of Week 11 (beginning of class)
Total Points – 45

Assignment Overview:
For the "The Four Seasons " project detailed requirements, download the assignment sheet in MS Word format. Using Flash as an interactive tool, you will create a 4 scene interactive animation based on the four seasons. You will create 4 animated landscapes or city scenes representing the seasons of the year. For example, one animated element during the winter scene could be snow falling.

Content Specifics:
Animation Length – 10 second minimum per scene.
Minimum of 4 unique landscape scenes.
Design can be a combination of raster and vector artwork.
Must be your original artwork, including any photos (vacation photos would work great).
Must be fully interactive, navigate to any scene from any scene.
Completed project must be uploaded to your OLS account to be on the WWW

Competencies:
Importing of Digital Images into Flash
Using vector tools within Flash
Using Symbols (Graphics, Movie Clips, & Buttons) within Flash
Use of Motion tween
Use of Motion guides
Use of Shape tweening
Use of Masks
Incorporation of ActionScripting for movie control (Stops & Navigation)
Publishing from Flash
Uploading Flash movies to the web

Overall Use of Flash (scenes, tweens, ActionScripting) – 20 points
Design – 15 points
Use of OLS – 10 points

Flash Samples:
http://analogik.com/multimedia_samorost.asp
2advanced
Adobe Flash Showcase

The following curriculum is out of sync, please ignore until later in the quarter:
Incorporation of ActionScripting for movie control including stops & navigation is probably the trickiest thing in Flash that we will be doing. However, just a couple of very short scripts are what is needed to accomplish this.

Stops are needed to prevent your movie from looping and give the user a chance to make a choice based on navigation options that have been presented in the piece. The ActionScript command "stop();" can be placed on a keyframe to accomplish this.

stop();

To create navigational behaviors, place ActionSricpts on buttons. Usually the "on" method is used to handle mouse click functionality, such as "release" for mouse button up actions. Apply the following example to navigate to the first frame in a different scene:

on (release) {
gotoAndPlay(“Scene 2″,1);
}

Also, let’s take a look at scenes, buttons, navigation, and some simple ActionScripting in Flash MX. ActionScript allows us to control navigation throughout a Flash project. Certain "Actions" can only be applied to buttons, while others only to movie clips. Take a look at this example of the seasons project by Corvis.

http://www.pjsattic.com/flash/seasons.htm

Use Freesound.org to find sounds that you can apply as events or sounds that you can stream in your project.

Session 2: Today we will be presenting the World project. After the presentations I will be demonstrating more techniques in Flash, including streaming audio. Also, let’s take a close look at publishing Flash documents on the web.

Session 2: Today we’ll look at creating scenes in a new document as well as renaming scenes and Flash interface basics.

on (release) {
    gotoAndPlay("Scene 2", 1);
}

Seasons Project Milestone #1 (Week 8, Session2):
1. Have at least one type of tween in your project
2. Have two working examples of ActionScript navigation
3. Have all four scenes added to your Flash document

Session 2: Today we will be looking a several ways to tween objects in Flash beyond the classic motion tweens.

Session 2: Please be prepared for the second seasons project milestone today. Here are the points that must be demonstrated to meet the requirements for the milestone.

1. Navigation must be in place on every scene and allow the user to get from any season to any other season.

2. Show a minimum of one movie clip object that contains a timeline of its own with tweening behaviors.

3. Show an example of the following in your project so far: a shape tween, motion tween, and a motion guide.

Session 2: Today is the last chance to get my feedback on your final projects and work out any difficulties you may be having.

Session 2: Evaluations.