Instructor: John Keston

Meeting Times and Location:
Room P112 (The Pence Building on 8th and Hennepin) 2:00pm – 4:50pm

Syllabus: im1480syllabus.doc

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 Dreamweaver 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. In this class you’re not expected to become HTML experts, but it’s important to have a good understanding of it when involved in virtually any technology field. Thursday I’ll demonstrate some of the basic functionality within Dreamweaver, and talk more about our first project, which is a five page website using links, images and tables.

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.

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 duscussion on HTML, look at some functionality within the Dreamweaver application, and discuss the requirements for the next project shown below.

Dreamweaver 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.

Assignment Overview:
Using Dreamweaver create a 6 page website about a country other than the United States. Each page should include images specifically prepared for the web in either jpg, gif, or png format. Use tables to organized the information on each page. Include text content, hard links, relative links and an email link. Also use the properties panel to choose specific fonts, font sizes, font styles and colors.

Content Specifics:
Website size – 6 pages.
Images on each page must be formatted as jpg, gif or png.
Text content must be included on each page. Pages consisting entirely of images are unacceptable.
Must be fully navigable, create universal navigation to get the user from one page to any other page.
Completed project must be uploaded to your OLS account and accessible over the internet.

Competencies:
Proper image formatting
Use of tables for layout
Use of links: email, relative and absolute
Use of page titles
Proper file naming
Use of CSS to format content
Setting document properties for text, tables and images
File transfer
Usability concepts (information design / navigation)
Originality of design and content organization

Grading Standards:
Grading is based on the above requirements (i.e. following the instructions as given in the content area, technical area, and competencies). Presentations of the "Word Almanac" will be held in class on the due date. Not presenting will result in a 5% reduction in your grade for the project.

Check these links for information on countries:
http://www.cia.gov/cia/publications/factbook/
http://www.unicef.org/infobycountry/
http://en.wikipedia.org/

Check these links for tutorials and information:
http://hotwired.lycos.com/webmonkey/
http://www.macromedia.com/support/dreamweaver/
http://www.projectseven.com/tutorials/index.htm
http://www.siteownersdesign.com/design-tutorials/dreamweaver-mx-tutorial

Session 2: Let’s look carefully at tables and how they can improve the look of our web pages. Let’s also take a look at some basic HTML commands. It’s not the goal of this class to learn the HTML language, but a basic introduction 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:
Tables
Table Attributes
Using Dreamweaver
Setting Properties
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
Complete navigation scheme should be applied to your design

Topic covered:
Image Processing
Image Dimensions
File / Asset Management

Session 2: Today we’ll look at some design issues and how to use CSS in Dreamweaver to place web graphics. I will also be looking at your designs for the World Project Milestone 1 due today. Those of you who have questions regarding site mangement, here’s a link to some tutorials which go over the details of setting up your site both locally and remotely:

http://www.macromedia.com/support/dreamweaver/manage.html

Topic covered:
CSS Floats
FTP / Site Mangement

To create the bouncing ball, start a new document in Flash MX. 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 your ball a little more fancy. After your satisfied, 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 10 and another at frame 20 (for a slower bounce try inserting the key frames at 20 and 40). 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. When you’re finished please copy your assignment to the drop off drive for credit.

Flash Exercise – The Bouncing Ball
Due Date – 1st Class or Week 5
Total Points – 10

http://www.flashkit.com
http://www.macromedia.com
http://www.macromedia.com/support/flash/
http://www.actionscripts.org

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. Nest week we will be demonstrating each of the competencies required for this project.

Flash Project – Interactive Flash Animation: "Four Seasons" (4 scenes)
Due Date – 2nd Class of Week 7 (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

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

Session 2:

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

To create the bouncing ball, start a new document in Flash MX. 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

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);
}

1. Remember to convert to symbol (Modify/Convert to Symbol, or F8) before making motion tweens.
2. Use the scale checkbox in the frame properties (next to tween) to apply transform to motion tweens.
3. It’s a good idea to put each shape or symbol on it’s own layer if you before tweening.

Shape Tweens:
Excerpted from the Macromedia Flash MX Help File
1. Click a layer name to make it the current layer, and create or select a keyframe where you want the animation to start.

2. Create or place the artwork for the first frame of the sequence. For best results, the frame should contain only one item (a graphic object or broken-apart group, bitmap, instance, or text block).

3. Select the keyframe in the Timeline.

4. Choose Window > Properties.

5. In the Property inspector, select Shape from the Tween pop-up menu.

6. Drag the arrow next to the Easing value or enter a value to adjust the rate of change between tweened frames. (By default, the rate of change between tweened frames is constant. Easing creates a more natural appearance of transformation by gradually adjusting the rate of change.)

7. Choose an option for Blend: Distributive creates an animation in which the intermediate shapes are smoother and more irregular. Angular creates an animation that preserves apparent corners and straight lines in the intermediate shapes. Note: Angular is appropriate only for blending shapes with sharp corners and straight lines. If the shapes you choose do not have corners, Flash reverts to distributive shape tweening.

8. Create a second keyframe the desired number of frames after the first keyframe.

9. With the second keyframe selected, select the artwork you placed in the first keyframe and do one of the following: Modify the shape, color, or position of the artwork. Delete the artwork and place new artwork in the second keyframe.

Session 2: The last thing we’ll go over in Flash before moving on to our final project is a refresher on how to publish your Flash projects on the internet. Everyone has an account on the OLS which includes at least 5 megabytes of web space. To access your account you can use FTP client software such as RBrowserLite in the Mac labs. Documents you wish to publish on the web need to be copied into the "htdocs" directory, or subdirectories within it.

Make sure you get your project published to your website before Session 2 so we can view them on the web in class. If you’re not absolutely confident on how to do it, make an attempt during lab today and I’ll help any of you who need it.

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).

Full Webiste – Interactive Website with Flash Elements
Due Date – 1st Class of Week 11
Evaluations – 1st and 2nd Class of Week 11
(5% of final project grade)

Components:
Proposal 25 pts. Due week 8 Class 2
Mockups 10 points. Due 1st Class of Week 9
Beta Version 15 points. Due 1st Class of Week 10
Final site 50 points. Due 1st Class of Week 11
Total Points – 100

Assignment Overview:
Using Dreamweaver and Flash create an interactive website with a minimum of 10 content areas. Universal navigation, text content, images, sound, and motion graphics are required in your site. Sites will be evaluated based on the SCANMIC criteria.

Content Specifics:
- Choose a subject, product or service for your site.
– Content of site must be approved by me.
– Design must be your original work.
– Include at least 2 uses of audio (background/sound effects).
– Include a minimum of 8 photo stills.
– Use a maximum of 3 font styles.
– Incorporate self designed buttons, rollovers, and headers.
– A minimum of 10 pages or content areas are required.
– Content must include text as well as graphics (all image sites are unacceptable).
– Universal navigation is required so users can easily get around your site.
– Links to related websites outside of your project are required.
– Final project must be uploaded to your OLS or comparable account and available on the World Wide Web.

Competencies:
Project planning and organization.
Resource gathering.
Using Symbols (Graphics, Movie Clips, & Buttons) within Flash
incorporation of ActionScripting for movie control (Stops & Navigation)
Publishing from Flash
Uploading Flash movies to the web
Processing of Digital Images into a web format
Using Dreamweaver to create html documents
Creating tables within Dreamweaver
Creation of consistent navigation systems.
Creating relative links for navigation and hard links for linking outside your site
Linking to an email address
Targeting links to different areas
Publishing a website to the WWW

Grading Standards:
Completion of the project by the required deadline does not guarantee a passing grade. Your project must demonstrate the knowledge of the project competencies and a moderate level of design detail.

Schedule / Points Breakdown:
2nd Class of Week 8 – Paper copy of the proposal is due (25 points).
1st Class of Week 9 – Mockups required for feedback (10 points).
1st Class of Week 10 – Beta version due for review (15 points).
Week 11 – Final Project Due 1st Class of Week 11 (50 points).
Week 11 – Evaluations: Session 1 / Session 2 (5% of Final Project grade).

Session 2: A very important part of building interactive media projects is the planning stage. Let’s discuss each of the components required for our design documents (often called development plan) for your final project. Here’s a list of components generally included in this type of document:

1. Title page (Title, Author, Table of Contents, etc.)
2. Summary/Overview (A brief summary of what the project does and what it’s for, etc.)
3 . Feature Lists/Requirements (A list of the features with brief descriptions)
4 . Flow Charts (Represent each unique screen of the project with a shape connected via navigation)*
5 . Screen Schematics (Simple pages shown with wire frame boxes for nav buttons, and images. Also include notes describing the purpose of each screen.)
6. Proposal/Bid in hours (time per pages, etc.)

Seasons Project Milestone:
1. Have at least one type of tween in you project
2. Have two working examples of ActionScript navigation

Session 2: Please don’t forget to hand in your printed design documents today. Let’s continue working on our mockups. Mockups are fully designed layouts which we will later convert into templates for our websites. We should create a mimum of three uniques designs for one page. Out of the three designs we will choose the best and use it as a consistent template for the rest of the site.

Session 2: Let’s look at importing flash content into HTML documents.

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.