Class 14 & 15

Requirements for final project and survey:

You can present up to 5 projects at survey. One of them can be digital if you choose. To present digital at survey you must have it loaded on your laptop. Digital presentation is up to two minutes.

There will also be a computer in the lobby of the 7th floor with interactive work loaded there.

I will create an intro page with all of your names.

It is not required for you to create intro pages for your site.

Due this coming Wednesday the 29th - you need to have the following ready:

Name
Email address
Site Redesign Name
Pratt url address of your site
Blog address of all your work
Photo of you (115 x 95)

2 line description of problems with original site
2 line description of your solution

List the 3 pages that you have redesigned

2 screen shots
1 - of the site that you redesigned
1 - of your homepage redesign
Each at a width of 225 pixels. Height can be whatever you like, but make the two of them consistent.

At least 2-3 pages of your site should be done and up on the server with the following:
All main menu links go to the one submenu page that you have redesigned.
All submenu links go to the one content page.
Banner ad – for review
Flash animation or video for review

May 6 Final Class
Your final presentation
CD of your work and all class files
Site files need to be in a folder with your name with an underscore between your first name and last name, ex. cheryl_stockton
Your site up on the Pratt server with working pages, no broken links.

Class 13

Individual site review
Questions
Changing styles for individual pages

• Adding a class to the body tag
• Creating separate style sheets or global styles

Class 12

Class workshop continues on css and page construction

• Prepare your questions
• Review - using classes to make changes from page to page
• A look at jquery, ajax and javascript (advanced programming)
• Creating Forms in html
  

Banner Ad sizes
webpencil

banner sample images

Banner Ad Guidelines

• Be professional, check your spelling
• Select fonts, sizes, styles and colors that enhance readability.
• Ask for an action - you want users to click on it.
• Keep it simple, clear and concise
• Use words that call to attention - free, special offer. etc. Would you want to click on it?
• State the benefits. Pay less, look great, etc. How can we improve our lives by this product?

Web Survey
An interesting link Jerome just sent me. Thought you would find the info of interest. (Thanks Jerome)
http://aneventapart.com/alasurvey2008/

Flash Overview
Interface

• Toolbar
• Timeline –represents changes in movie content over time
• Stage – displays the content of your frame currently selected in the timeline
• Properties – displays options for tools and movie
• Library - stores reusable elements called symbols
• Panels – palette options –in Flash called Panels

Setting up your page

• Make sure your Properties Window is open
• Set dimensions to match your page
• Frame rate – will change the speed of your animation. 12 fps is the default
• Set background color or image

Layers

• Good practice to keep each element on separate layers for ease of editing. The active layer is the layer that is highlighted
• New layer button-double click to name the layer
• Layer stacking order
• Layer modes
• Show / hide
• Lock / Unlock
• Show all layers as Outlines
• Layer Guides allow you to animate on a specified path

Scenes

• Scenes are used to organize your movie into sections, sections that you can view as independent pieces of a whole movie.
• Flash starts with one default scene
• Helps you to break up content into logical sections

Toolbar

• Drawn objects in Flash consist of strokes and fills, which can be moved and modified separately.
• Flash’s drawing tools have modifiers that control how drawn elements look and respond.
• Tools
• Arrow, fill and stroke color, circle, rectangle, line, paintbucket, bezier, etc

Tool Differences

• Fill and Stroke are separate objects and move separately
• To move them together double click to select both
• Clicking on an outline will select only part of it
• Double click an outline to select all of it
• If you place one object of a different color on top of another it will cut the fill of the object.
• If you place line across one another they will separate into individual pieces
• Place one fill color on another, deselect it and then go back and move it away, it will cut a hole in the object where it was placed.
• If you place one color on top of an object of the same color it will combine with it.
  
• To protect this from happening group the object.
• When an object is grouped it has a blue line around it.
  
• To make changes to stroke, fill, object transformation or exact positioning go to the Properties Window.
• The Ink Bottle changes the color of lines
• The Dropper Tool picks fill color and stroke. It will then switch over to that tool and as you click on another fill or stroke will swap over to what was selected.
• Pencil tool has some special modes to change the line to smooth or straight
• Brush –has a number of unusual options to try, such as paint behind, paint fill, etc.

Symbols
There are three different kinds of Symbols

• Graphic Symbols – static images
• Button Symbols - provides interactivity
• Movie Clip Symbols – independent, self contained movie components

Things to remember about Symbols

• In Flash a Symbol is a particular kind of content component that you can reuse thus making your file size smaller.
• You can convert your existing content into symbols or you can create symbols from scratch.
• These Symbols are stored in the Library
• When you want to use the symbols in the Library simply drag the symbol onto the stage.
• The original symbol stays in the Library and a copy or Instance of the symbol is placed on the stage.
• There is a link between the symbol and the instance. if you change the original symbol it changes the instances.
• You can change the Instance properties (tint, size, etc) without affecting the underlying symbol.
• If you double click on the instance it will take you into Symbol editing mode.

Creating a Graphic Symbol

• Create a New File and go to Insert / New Symbol
• Change the behavior to Graphic Symbol.
• This puts us into Symbol editing mode –not in the Scene
• Give the Symbol a Name
• The crosshair in the middle of the page is a registration mark
• You have layers and a timeline in symbol editing mode that will not affect the scene.
• It can be confusing to know if you are in symbol editing mode or the scene. Look above the Timeline to check.
• Show Info and select your graphic.
• Type in 0 for your X coordinate and 0 for your Y coordinate. This places your symbol in the center of the page.

Working with the Library

• You can now create folders (layer sets) to organize your symbols
• You can change the behavior of your symbol from the library.

Animation
Flash animation is based on the simple principle of representing change over time. When Flash “tweens”, it draws the frames in between two significant moments of action, which are defined by the content of Keyframes.

Motion Tweening

• Moving an object from point A to point B on the stage
• Will only work on Symbols or Grouped shapes
• On frame one draw an object and group it
• Go to frame 30 (for instance)
• Insert a Keyframe
• Go to the Frame tab of the Instance Panel and select Motion from the Tweening drop down menu
• You now should see an arrow showing your tween in the Timeline.
• You can scale objects in your motion animation
• And/ or rotate them

Easing
Use this feature to make your animation look more realistic
Easing in – make your objects start slowly and accelerate (-100 – 0)
Easing out – make your object start quickly and decelerate (0-100)
Create a Bouncing ball


Motion Tweening Effects
Fading with Alpha
Fading with Tint


Motion Guides

• Use a graphic symbol to animate
• Place it on the stage in a keyframe
• Add a new keyframe to the timeline where you want your animation to end.
• Move your object into it’s new position
• Create a motion tween
• Add a motion guide layer at the bottom of the timeline next to the new layer icon
• Select a pencil to draw your guide
• Select smooth for the path
• Draw your path
• On the first frame connect your object to the beginning of the line
• On the last frame do the same

Masking

• Animating a mask
• Have a background image to mask
• Have an object on a separate layer to use as a mask
• Create keyframes
• Move object in final frame
• Create Motion tween
• Control click layer and add a mask

Sound

• Do you need to edit your sound? I use Audacity - it’s free and pretty easy to figure out.
• Import sound into Flash
• Drag it from the Library onto your stage

Test your movie

• Hit the return key to run the animation
• Go to Control –Test Movie
• File / Publish / Preview

Publish your Movie
This creates your swf file to embed in your html document.

Actions
The fundamentals of interaction, events, and event handlers
ActionScript is Flashes programming language.
I suggest you use Action Script 2 for now.


Create your actions
After you have created your animation create a new layer (top layer)
Name it actions
Double click on the last frame
Add action “stop” to stop the animation from looping or not if you want it to continue

Save
Test
Publish
Test

Components
Check out Slideshow Pro
Set it up in Flash, edit components
Use an xml file to load your images and music.

Class 11

CSS Instruction & Review

• The Box Model
• Absolute verses Relative
• Id's and Classes
• Navigation Review
• list menus - vertical and horizontal, graphic and complex with pulldowns
  
• Understanding floats for layout
• Using Classes to make changes from page to page
• Technical Resource Links added to Resource page. Check them out.

Your site questions.

Stay tuned for extra workshop schedule.

Class 10

In class workshop - programming and css

Building navigation

Class 9

CSS stylesheet construction

• Setting up navigation
• graphics
  
• html/csc

• Layout and Column Positioning using CSS

Check the Resources section from January. I added a few new links on navigation design and potential books for your library.

Let's look at your sites and issues.

Stay tuned for extra workshop dates...

Class 8

FTP Construction page to the server

CSS
The Box Model

XHTML - setting up your content in Dreamweaver

CSS - Begin building your style sheet