merryxmas

connect

dotProject
Dreamhost

forms: click on text fields:
ID is going to be user’s name
add form tag? Yes.

favacons
irregular with Safari at best

favacon.cc
32×32 or 16×16
genfavacon.com

favicon.ico > name the file and put it in the root folder of the site

iphone-icon.png that is 57×57
askdavetaylor website for instructions

spry

sound:
64kbs/ sec is good for web
mono cuts the file size in half
MP3 is good
In Dreamweaver: Insert > Media > Plugin
you can stretch the plugin item and it will scale (so people can see it)
paramiter, autoplay “false” instead of default “true”
if you don’t want people to interact with the interface, make one of the edges of the plugin zero, and it won’t show up

create a new document with only the words “close window to stop music”
open browser window in behaviors

put a note on the browser: “if you are not hearing sound, turn off your pop-up blocker”

The clickable object at the top of web searches is the name of the document
max of 55 characters, but less for web devices (30 is better)
2nd is the title of the document (typed at the top of Dreamweaver)
3rd is the meta description tag

Insert > HTML > Head Tags > Description

Insert > HTML > Head Tags > Keywords (things people search to find your site, what makes your site unique)
only edit thes in the HTML after it’s inserted

google.com/addurl

hit the plus by behaviors, and select “swap image”
change the “on mouse over” using the drop down choose “on click”
to trick the HTML to treating the Java script as a link (with hand instead of arrow mouse) put “#” in “link” box in properties
to get blue highlight to go away in Firefox for linked images to to properties > border > and put in “0″
view AP divs, draw out div box
dissadvantage of AP div > is absoulte and if a table is centered, then the centered table will move while the APdiv stays in place
AP div is under layout

to put an image as a background in a cell, find the cell, and after the , put bkg imag=……… (look up code)

to make an object trigger the dive, name the div, then make the div invisible. (in AP elements you can turn them on and off)

add behavior, change property,
type of element: DIV
Element ID: [name of div]
New value: visible
(alternately, you can make it “hidden”)

http://www.huddletogether.com/

Default is 24 frames per second. But that’s for movies. For web/ screen. Bring it down to 12. 12 should be more than enough for this class.
- don’t change sizes later, because your positioning of your objects will change
- stay in a standard shape usually for web. Flash developers tend to go too small for web sites.
- Janpieterfokkens.com
o This website scales
o Can add scroll bar. In Dreamweaver, even. But you’re at the mercy of the default scroll bar unless you go into more programming than this class goes into
- Jkrowling.com
o Games in flash can use triggers other than the mouse. (keyboard keys)
o The illustration content looks great, flash or not. Flash just gives you more options because of the animation techniques
- Nike.com
o Quick, sharp, modern transitions. These are more unique transitions (not the typical fades)
- Today we’re populating our librarys first. This is what you would do if you designed in Illustrator or Photoshop. Flash preserves layers
o File > Import to Library (grab PSD file we just made)
o You will see all the layers of your PSD doc and you can choose what to do with them. If you have a font, you can force that layer with that text on it, then you can force that layer into a vector graphic. The only problem is that you can’t edit the text.
o Flash layers, bitmap image with editable latyers, center registration, instance name (“car”), this is lossy compression because it is already a vector. Lossless is only for vector graphics.
- Make object interactive
o Now using action scripting
o Giving the sitting there state its own animation
o We’ll add layers to the document for animation
o Name layers so you don’t get confused later
o Begin
• Add a new layer
• Name it “signal”
• Select box > modify > converty to symbol > name it “signal”
• Double click on the signal
o Think of Flash as a DVD juke bax. You can jump from a track on DVD A and then jump to a track on DVD Q.
o Save often and save regularly
• Create an organizatiol unit for this car (a holding pen for it to sit there until I prompt it)
o There are many ways to create navigation in flash. This way uses more hand work and no code, so it’s more work but simpler
• Create a new layer that’s called action. That way it’s not embedded into each object.
• Commands can sit on different layers, just like objects can sit on different layers.
• Click into the firs frame of the action layer
• Under lable, give it a name. no spaces.
• Add a keyframe after the 10 frames of the car sitting
• Window > actions
• These are nicely organized, not like 3.0
• Actions only apply to keyframes. It’s a status. It can be in one place or another.
• Global function, timeline control, add a stop (double click on it NOT triple or quadroupal)
• Window > behaviors
• Plus > movie clip > go to and play at frame or label.
• Root because we’re controlling Scene 1
o Instead of frame number, you can t ype in “moved car”
o Sometimes you have to do this twice to get it to work
- Mindy- minday1@mindspring.com

lots of stuff that I had to work on to keep up

timing in animation frames. looping forever.
can change the visibility of the layers in the frames
can change color on layers or position of layers in frames

save for web and devices

generally keep 10 frames and under. 12 frames is okay for high speed. generally keep files at 100k or less so the download instantaneous.

position, opacity and layer effects can be adjusted with tween- flash like
you want to modify the effect itself in the layer

select both layers. choose tween (bouncy ball effects) and select number of frames and effect between both frames. you can manual change/ tweak the layers on each frame that the tween function made.

great for rollover. One gif or jpg as original. rollover gif animates once. watch file size.

New CS4 functions in Dreamweaver:
you can place a PSD file and convert the graphic type and size before importing and linking to the website. If the original PSD file is then changed, you can update the graphic to match.

GROUP PROJECT
parameters:
table: centered table, a top banner aria, with at least one animation piece in it
content area in the middle
navigation area to the left
whatever to the right
two pages: something on one, and something on the other
should have a basic theme like cats, dogs, store, whatever.
in Dreamweaver you can create a “div”

jamie lynn nuzbach: Portfolio – locked site example

http://www.jamielynnstyle.com/portfolio.html

flash
action script 3.0
view: classic or essentials
.fla files are working files; swf files are final files: not editable
the white area is called the stage
the properties bar is dynamic depending on what you’ve clicked on. it is CENTRAL to what you are working on.
flash is now very strict because of a bad hack a year back
timeline: how files are organized. it works similar to a DVD menu
rectangle primitive allows you to change corner shapes.
the circle you see in the timeline is a key frame. that is an object that has a certain state to it. it is a snapshot of the object as it is right now.
there are frames and key frames
insert > timeline > frame (F5)
hit enter to play a file (preview) to preview at it would in a web page, hit cmd+enter
a KEY FRAME represents a different state
insert a keyframe and move the object with the move arrow tool. Now the preview shows movement.
fps (frames per second) should be set about 12 for web pages. set this in timeline
tweening in Flash can be constructive/ deconstructive
to tween:
first need to convert it to an object (needs to be something to become animated) you can only have one key frame: modify > convert to symbol

vocab:
movie clip: has its own timeline (most generic)
button: specific timeline that has up, over and down states preset for us
graphic: additional graphic control functions

you need to name object so you can call upon it later and have it do something
give it a center registration point. name as simple as possible with distinction. can have caps, but no spaces

objects are stored in the library. you can drag objects out the the library to call them out.

select the first frame

scene one is the root of the file object

each object has its own timeline. but think of each timeline as its own folder. make sure to snap back to scene 1, because that’s your main reference.

it’s dangerous to hit F6 to insert a keyframe

select first frame (and the object in it) Insert > classic tween. it gives you an arrow representing the change between the two
you can dynamically move the next state.
you can also transform a key frame and tween to it

create a motion path:
(when drawing an object freehand, then you need to group the objects)
select the later > right click > add classic motion guide
on the guide layer, draw a line (any tool) that will be a path
add a keyframe later on the layer frames. the guide does not get another keyframe. it just exists.
on the first frame of the object layer.
give the motion guide a frame above the object’s last keyframe
select the first keyframe, add a classic tween, and then move the center point of the object to snap it to the end of the motion line. snap the last frame to the line as well.

Example
“h6 {
font-sie:1.15em;
}

says that anything using “h6” (header 6) follows the following rules

adds a link in the html that links to a file exernally that
the file can be in the same directory or on another server
Dreamweaver sometimes puts the CSS file in the HTML

There’s a trend to move purely CSS, instead of using tables.

Start animated GIF files

Iphone dimensions 720×480

80 frames over and over look like a short movie clip.

Iphone recoreds about 31 frames per second

Save for web and devices > set aspect ratio > GIF 128 Dithered > looping forever > save
Images only, default setting

http://www.entroemcee.com/lessonplan/

import > video frames to layers > limit to every two fram3s > make frames animation > ok

photoshop assumes it’s an actual file size and distoreds the file. When saving this can be fixed.

Opera and Firefox are the mainstay web browsers. Safari is okay. IE 5, 6 (Windows 95), and 7 have problems. It was not web standard. Layout rules, like fixed with wouldn’t render the same. IE 8 has been much better (coincides with Windows 7).

Break
I get filled in on what I missed because I came in late:
Format, CSS styles, attaché style sheets >
In rules > visit, text decoration, none

http://zengarden.com/ -CSS that works on all platforms. Great place to start.

Rollover time

Need two images. One for “on” and one for “off”

Insert> image object > rollover image

Meshing and mashing image rollovers

Primarily rollover buttons will be used for navigation.

Crazy little effects with CSS:
View > page source
Link href and linked to CSS
That goes below the meta in the header tag

Example sites:

http://sharkforum.org/

with drupal you create nodes. Each entry is rendered as a cetain content type.
Druapl isn’t the easiest to learn, but it’s the most robust when people say “I have this idea…”

http://richard-wilkinson.com/

http://raincitystudios.com/

The sitemap will look something like this:
Contact Page
Resume Page
Work Page
• business cards
• general print work
• invitations
• web sites
• art direction (maybe)
• photography (optional)

The home page will have my name or the site name, and a navigation menu. The background will be striped with my color pallet and patterns I have designed.

More details are sketched out in the image I’ve attached to this post.

This is an outline of my site and sketches of the page designs.

images
- how screen resolution differs from print resolution
- usually design for 1024×768 as maximum real estate
- size of page in 800×600. (main elements)
- vector graphics vs raster graphics
everything is a sequence of lines/ grid on screen. No matter what
should be building at 300dpi, in case you want use it later or want to make changes in it
Raster
JPG
color spectrum from RAW to JPG is a huge difference
JPEG and JPG are the exact same thing, but always use “.jpg” (lowercase) for web
GIF
graphics interchagne format
common because it can have multiple frame layers, meaning you can sequentially display them: animation
if have line art: gif is preferred choice because of the way it compresses the art
can be transparent, but will leave outline/ dithering
PNG
newest: so not as common
Started in FLASH
PNG 24 is recommended
PSD file is the other format or AI
Vector
coordinates on a graph paper. Inferring the line between them.

Make page
title
insert table
set size (normally wouldn’t do this)
save in folder
cannot rotate images in Dreamweaver
quick way to make gallery:
link to the actual image
resizing images with Photoshop Automations
resize large version, small version, small b/w, etc.
window > actions > record (name action)
1) file > save for web and devices
2) NOTE if you actually name the file in the automation it will name every file that same name. INSTEAD create a new folder in that folder (ex. thumbnails) hit save (don’t touch the name of the file)
3) NEVER modify the original version, because you will use the file. Hit “Don’t save” It closes, but it saved the recording.
4) stop recording
5) File > automate > batch
6) source: folder / choose the folder
7) destination: folder / thumbnails

Window > actions > new action
name > record
change image to BW
ALWAYS type in 72 dpi, because you will probably change an image that’s larger
create folder > save
close file > DON’T SAVE over the original
STOP recording
File > automate > batch
design page in Photoshop
create an 800×600 page, or up to 1020×468, 800×600 reccomended pixels RGB 72 ppi – use this for Flash or Dreamweaver
Remember: design in 300 dpi. So.. Image > image size > leave all 3 checked (Style, restrain, resample) and make 300ppi. Save.
right hand quadrant
main point of scrolling is pulling from the right.
always stay away from a right hand side hang off.
can make it fade off the right size
slice > save for web > Images AND HTML
image mapping
stay away generally
everything has to align to the upper left corner, otherwise the map and it’s coordinates will not be accurate.

I received my bachelors in graphic design from Dominican University in River Forest two years ago. Since then I’ve been working at Lipman Hearne, a marketing and design firm for non profit organizations.

I can make things bold and italic.

My instructor’s site is hirokoweb2.wordpress.com.