More Flash Notes

IT inserts the widgets into the actual website: Tom only provides the html and accompanying files.**

Made test box style div with bracket - *note Tom is not adding alligators to the divs or naming them divs he's adding brackets

Give height and width attributes: border-radius: 10 pixels | mozilla-border radius: | web kit border radius:

Everything you need to make any fancy things is already on the web

You can copy and paste and edit the code within | You can do one size | 50 10 100 0 border pixels

Gradient

Define webkit and linear gradient: Background - webkit -  linear gradient 

Firefox does not support linear backgrounds by themselves

Internet Explorer is horrible

CSS3 Pie Website will make background boxes for you

maybe no more webkit ** asked Tom to save the junk file

Shadowing on the text

text shadow and box shadow | text-shadow 5px (shadow) 5px (shadow) -15px (blur) - color

Box shad (can put a box shadow)

Weight width and a height  makes the text a box..so it takes on text  attributes

 If it's just for small text do 1: First number is your horizontal offset

-- 20 vertical offset - could give something 2 different color drop shadows in the CSS

Google is your friend. Add in the CSS and rock and roll. Find the CSS on google.

alpha = transparency| rgba (set the colors and then the transparency)

Blending is very nice. Can't do any of this in email.

Set the style type and put it in the head

Can Swap the bitmap ( to add the flash style to a different symbol).

Notes on Flash

These are my notes on flash I collected through one of our sit in meetings.

Run through the whole creation of a banner ad because they are not intuitive.

Flash goes poorly with scaling > make image the size you want it > import the png - best to build in photshop and then manually one image at at time.

Use flash action script  2.0

anytime you want to use text use vector text or movie clip > option command arrow (left and right) in flash > insert a keyframe on  20 > this is our text > insert classic tween > everything in flash - button movie clip or graphic symbol

Convert to symbol..make movie clip -

text 1 > rotate text on first or last keyframe > click on the tween

fix ease in and out from the properties > custom ease

Masked text

Convert text to symbol > going to mask with an animation > made a shape tween on top make sure animation is above the layer to be revealed > right click and click "mask" >Same amount of frames

by default picture is solid object

selet it and hit command b to break it apart >take lasso and take pixels out of it >Very simple and it looks cool

script based animation

put different objects on different layers

opacity changes - 

classic tween > alpha property - 0 > Convert an image to a symbol

draw path first > after path > cut > right click > add classic motion guide> paste into layer > get anchor point> motion path

doing with keyframes is too angular > pen tool - draw path (on a separate layer) 

add classic motion guide > copy path

add classic motion guide > get center point as close to end as possible add new keyframe at the end

click tags -serving ads

as flash you need javascript to make it run screen takeovers - reaches out to grab the ad

flash needs javascript to get ads >when serving the ads needs to come from ad trafficking company 

put invisible button on there called a click tag - to track things

to do the button - go to properties - 300 x 250 . 24 fps 

alot less messy to put all animation on one keyframe

unlimited choices in flash with button selected - in action window 

add new item to script > browser network controls > get url (on release)

global functions movie control on on .......etc.. 

on release

come into the quotations get the beliefnet url

underscore blank is open up a blank new window  _blank

only flash

modify shape - add shape hint - folding shape

copy all the frames/Layer - main holder took all that animation in one keyframe by copying and pasting > Choose a new symbol > insert the button

flash up over down hit state > just want this to be hit state

invisibile draw a shape > invisible buttons are viewed as grey colors

ripples make a distortion map

Go to any flash site

psd tuts - part of a larger - envato

pixel hive design > realistic flash water effect 

picture with water

add picture

import picture

align to stage

break it apart

delete the bottom

movie clip - make it an instance ( unique)

water_mc

grab the action script create a new layer 

paste in the actions window

Cause of the Month Ads

300 x 280 Animated Gif

320 x 280 Static Ad (Not Flash)

728 Animated Gif

These were approved quickly by B & S - but for the future to reduce the pixelation around the edges, possibly cut back on gradient uses, special effects. Also "static" when listed on eventum means make it animated unless it's flash. 

Critiques on Instructions Project

1. Very text document like
There are occasions for that but this being the
first thing they see when they open the box, should be a little more
exciting and attention grabbing.  I wanted it to be immediately
identifiable as instructions.

2. Layout should immediately convey... first step1, then step 2.  Its very important when designing
to think of what the piece is supposed to do, and how can it best covey that.  Another thing that just didn't feel right about the first one wasthe phones.  They felt as though they were just used to quickly fill a
hole rather than used as a part of the whole design.  Notice on the new one how the phones have the rich diffused shadow that gives they the feel of really being physical objects, and how the phone breaks out of the border.  Anytime I have a project to be printed in house with no bleed, I try to think of a way to make that work for me rather than against.

3.  I often see big differences in designers styles when
creating in ID or PS.  It usually becomes flatter and more Word Doc like.
And that is because InDesign is just MS Word on steroids.  It is
essentially just a page layout and text editing tool.  I always use it
(or Illustrator) for my final export to get nice reliable vector text,
but I always design it in photoshop first.  Trying to design in InDesign
limits you and because of the differences in how they work you
subconsciously even don't do things you would do if you were in
photoshop. 

Linking Images

Absolute vs. Relative

An absolute link is if the URL and file name can be found from anywhere on the Web, not just from a single Web site. An absolute link specifies a fully-qualified URL; the protocol must be present in addition to a domain name, and often a file name must be included as well.

A relative link specifies the name of the file to be linked to only as it is related to the current document
This link will be valid only from within the same directory that jpg.html is saved in.

For example the absolute link for the files I work from are...
http://www.affinity4.com/misc/email/a4-email/2011.7.5_ConsumerNews
(for the consumer news letter).

Paste the path and before the slash add the a4 info.
Or whatever server you work from.

Notes from EPAC Interview

CMS =Content management system, allows content creators to submit content without requiring any technical knowledge of html.  (example = joomla).

HTML = building block of all websites, allows image & objects to be embedded and can be used to create interactive forms

CSS = Cascading style sheets = define the layout and appearance of text and other materials

Make efforts to memorize these.

Stationery in Word

• View - header & footer
• Insert - picture from file
• Double click on file in front of text
• Make files png. 

Buttons & Verticals

Buttons
If you do fancy bevels/drop shadows for website >it has to be made into a piece of art> so it is best to minimalize amount of work on objects that are repeting.

Verticals
The outer edges need to be matching solids so the graphic will be portable (ex. Andy Andrews).

All about click generating. 

HTML in the beginning

HTML = Content
CSS = Design

Start with New CSS & New HTML file

Save everything in one folder. 

Make image folder, make background. 

Padding is inside the box.
Margins are outside the box.
Padding goes bottom, left, right, top (0)
Margin left = Auto (0)
Margin right = Auto  - this centers it in the screen.
(leslie scan your picture and add it here).

Header = H1 tags

Span asks what to define something as.
Like for example half red text half black text.

Headlines don't get class.

Class = many different types of formats for a single HTML tag. 
The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element.

Change one page -

You can't do rollovers in emails (can't set rollover colors)
You can do animated gif's in emails.

(leslie wrangle your notes and put them here)

Reflection on computer/tv screen

To set up shortcuts (these will help with any action you do repetively)
Preferences > Over 100 history states
Window
Workspace > keyboard shortcuts & menus > application menus (be careful)

Reflection

1. Make solid color larger.
2. Make shape with gradient mask (white - transparent foreground).
3. Keep more than you will need.

Split > b > move tool
copy
fix vertical > touch > complex reflections

Use marquee select where reflection the touch
Apple t> command
Command d > select
Shift click to turn mask off

(leslie scan notebook page to understand this)

Intellectual Fair Usage

Some Key Thoughts on Copyright -

• Uncopyrightable elements used to create something new.
• Exhibition of work on the inset considered publication. 

Goals by January 2012

1. Edit html at site level.
2. Basic understanding of web standards. 
3. Increase photoshop knowledge; as well as continue to use & learn shortcuts. 

Strengths: Very willing, eager to learn as well as help. Good with organization & timelines, excellent with quantity of work (easily competitive with ad agency).

Score: 3, 2, 4, 3 -- Need to get all 4's for raise.

Weaknesses: Quality (I'm ambiguous on this one, but with the above in mind I'm gonna roll with it.

Play more with divs (divs are the boxes).