To Duplicate your buttons

 

• Right Click on the button you have created in your Library window and select Duplicate
  
• Drag this new button copy to your main timeline onto your buttons layer.
• Add a new unique instance name for this button in your properties window (ex: Taco)
• Copy and past ONLY these three lines of code (highlighted below), changing the instance name to match your new button, the rest remains the same as your other buttons (in-out etc)

Timeline

Each "page" of your site needs to have a layer as well as a chunk of your timeline.  See above example

Buttons!

Today you should turn in your FLASH button at the start of class.  Export the .swf file and put it into the Classes folder.

Your second task is to create a flash menu for your product using the same steps in the tutorial.  Your menu needs 3+ buttons for the 3 pages of your product's site.

Flash Site

Advertising...

• Pick a product
• 3 potential pages for your product
• colors appropriate for your product

code for rollover buttons

YOUR INSTANCE BUTTON NAME.buttonMode = true;


YOUR INSTANCE BUTTON NAME.addEventListener(MouseEvent.ROLL_OVER,animIn);
YOUR INSTANCE BUTTON NAME.addEventListener(MouseEvent.ROLL_OUT,animOut);


function animIn(event:MouseEvent):void {
event.target.gotoAndPlay("over");
}
function animOut(event:MouseEvent):void{
event.target.gotoAndPlay("out");
}

creating a menu

creating a menu and then a website in flash is fun, although a hair confusing... here is a link to a tutorial of what we will be doing in class:

buttons:
http://schoolofflash.com/blog/2008/05/flash-cs3-tutorial-movie-clip-buttons/
start with buttons (they are animated! fun!) then we can add them to a website, which is fairly simple...

Flash is an animation program that can prove useful for the web, most notably for it entertainment properties. It works with a timeline, layers and scenes to create basic animations...

Action scripting: the code used to make your button work!



code to copy:

everything in BOLD and Italics needs to be changed to match what you have in your Flash movie/document:
yourButtonsInstanceName.addEventListener(MouseEvent.CLICK, onClick);

function onClick(event:MouseEvent):void{
gotoAndPlay("Your Frame Label Here");
}

Flash

http://www.schoolofflash.com/2008/05/flash-cs3-tutorial-movie-clip-buttons/

Making your stop button

• make a new layer for buttons
• draw an object/shape
• select that shape 
• convert it to a button (modify > convert to symbol > button
• Change the instance name of your button (in the properties window) to something you can remember
• Create an actions layer
• on frame 1 of the actions layer past in the code below
• change the code to have your instance name and a unique function name (same in both parts of the code)

done!

Stop your Flash movie

yourButtonsInstanceName.addEventListener(MouseEvent.CLICK, functionname);

function functionname(event:MouseEvent):void
{
stop();
}

tween tutorials

Here is a tutorial for shape tweens in case you are confused:

http://www.awdsf.com/courseware/flash/flash3_shape_tween.htm 

here is one for motion tweens:

 http://www.entheosweb.com/Flash/motion_tween.asp

fun flash example

Flash Tutorials 3, 4, 5 all the info you need!

FLASH ASSIGNMENT

• 200+ frames
• 2 motion tweens
• 3 shape tweens
• 8+ layers
• must TELL A STORY of some sort that is non-violent.

WEB 2

A new way to make a CSS layout...  in DREAMWEAVER:

When creating a new page in Dreamweaver, you can create one that already contains a CSS layout. Dreamweaver comes with over 30 different CSS layouts that you can choose from. Additionally, you can create your own CSS layouts and add them to the configuration folder so that they appear as layout choices in the New Document dialog box.
Dreamweaver CSS layouts render correctly in the following browsers: Firefox (Windows and Macintosh) 1.0, 1.5, and 2.0; Internet Explorer (Windows) 5.5, 6.0, 7.0; Opera (Windows and Macintosh) 8.0, 9.0; and Safari 2.0.

Create a page with a CSS layout

1. Select File > New.
2. In the New Document dialog box, select the Blank Page category. (It’s the default selection.)
3. For Page Type, select the kind of page you want to create.
   Note: You must select an HTML page type for the layout. For example, you can select HTML, ColdFusion®, JSP, and so on. You cannot create an ActionScript™, CSS, Library Item, JavaScript, XML, XSLT, or ColdFusion Component page with a CSS layout. Page types in the Other category of the New Document dialog box are also restricted from including CSS page layouts.
4. For Layout, select the CSS layout you want to use. You can choose from over 30 different layouts. The Preview window shows the layout and gives a brief description of the selected layout.The predesigned CSS layouts provide the following types of columns:
   

   Fixed

   Column width is specified in pixels. The column does not resize based on the size of the browser or the site visitor’s text settings.

   Elastic

   Column width is specified in a unit of measurement (ems) relative to the size of the text. The design adapts if the site visitor changes the text settings, but does not change based on the size of the browser window.

   Liquid

   Column width is specified as a percentage of the site visitor’s browser width. The design adapts if the site visitor makes the browser wider or narrower, but does not change based on the site visitor’s text settings.

   Hybrid

   Columns are a combination of any of the previous three options. For example, the two-column hybrid, right sidebar layout has a main column that scales to the size of the browser, and an elastic column on the right that scales to the size of the site visitor’s text settings.

5. Select a document type from the DocType pop‑up menu.
6. Select a location for the layout’s CSS from the Layout CSS in pop‑up menu.

   Add To Head

   Adds CSS for the layout to the head of the page you’re creating.

   Create New File

   Adds CSS for the layout to a new external CSS stylesheet and attaches the new stylesheet to the page you’re creating.

   Link To Existing File

   Lets you specify an existing CSS file that already contains the CSS rules needed for the layout. This option is particularly useful when you want to use the same CSS layout (the CSS rules for which are contained in a single file) across multiple documents.

7. Do one of the following:
   • If you selected Add to Head from the Layout CSS in pop‑up menu (the default option), click Create.
   • If you selected Create New File from the Layout CSS pop‑up menu, click Create, and then specify a name for the new external file in the Save Style Sheet File As dialog box.
   • If you selected Link to Existing File from the Layout CSS in pop‑up menu, add the external file to the Attach CSS file text box by clicking the Add Style Sheet icon, completing the Attach External Style Sheet dialog box, and clicking OK. When you’re finished, click Create in the New Document dialog box.
     
     Note: When you select the Link to Existing File option, the file you specify must already have the rules for the CSS file contained within it.
   When you put the layout CSS in a new file or link to an existing file, Dreamweaver automatically links the file to the HTML page you’re creating.
   
   Note: Internet Explorer conditional comments (CCs), which help work around IE rendering issues, remain embedded in the head of the new CSS layout document, even if you select New External File or Existing External File as the location for your layout CSS.
8. (Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the page. To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select a CSS style sheet.

Add custom CSS layouts to the list of choices

1. Create an HTML page that contains the CSS layout you’d like to add to the list of choices in the New Document dialog box. The CSS for the layout must reside in the head of the HTML page.
   To make your custom CSS layout consistent with the other layouts that come with Dreamweaver, you should save your HTML file with the .htm extension.
2. Add the HTML page to the Adobe Dreamweaver CS3\Configuration\BuiltIn\Layouts folder.
3. (Optional) Add a preview image of your layout (for example a .gif or .png file) to the Adobe Dreamweaver CS3\Configuration\BuiltIn\Layouts folder. The default images that come with Dreamweaver are 227 pixels wide x 193 pixels high PNG files.
   Give your preview image the same file name as your HTML file so that you can easily keep track of it. For example, if your HTML file is called myCustomLayout.htm, call your preview image myCustomLayout.png.
4. (Optional) Create a notes file for your custom layout by opening the Adobe Dreamweaver CS3\Configuration\BuiltIn\Layouts\_notes folder, copying and pasting any of the existing notes files in the same folder, and renaming the copy for your custom layout. For example, you could copy the oneColElsCtr.htm.mno file, and rename it myCustomLayout.htm.mno.
5. (Optional) After you’ve created a notes file for your custom layout, you can open the file and specify the layout name, description, and preview image.

Flash Basics

In a departure from Dreamweaver and HTML we are going to move over to Flash CS5.  Please watch the following video and then open Flash CS5 and begin experimenting with timeline animations.

Try and make a movie that has a couple shape tweens and multiple layers.

Dreamweaver Site to Turn in

In one folder (named your name_topic) please turn in the following:

• your 4+ DW pages
• any images you created or uploaded from your computer

be sure the folder you turn in is the same folder as the one selected as your "site" folder in DW.

Turn this into the classes folder.

Web 1 - design concerns

Be sure you follow the following elements of good design:

• Be prepared
• Keep it simple
• Make navigation logical and consistent
• text needs to be legible, correctly spelled and fitting to the page
• colors need to look nice, be appropriate for your topic and be consistent from page to page.
• essentially your site should be simple, concise, and easy to navigate!

Web 2 CSS fonts

CSS Code:

h4 { color: red; }

h5 { color: #9000A1; } 

h6 { color: rgb(0, 220, 98); } 

Display:

This is a red h4 header.

This is a hexadecimal #9000A1 h5 header.

This is an rgb(0, 220, 98) h6 header.

In the above example we used three different formats for defining a color: a color name, hexadecimal values, and RGB. Check out the list of supported color names. Hexadecimal form is a pound sign (#) followed by at most 6 hex values (0-F). RGB defines the individual values for Red, Green, and Blue.
Example form: rgb(Red, Green, Blue); with the range of 0-255 for each value.

CSS Font Family

Font families can be divided into two groups: serif and sans-serif. A sans-serif font does not include the small lines at the end of characters, while a serif font does include these small lines. When choosing which kind you prefer, remember that studies have shown that sans-serif fonts are much easier to read on a computer monitor than serif fonts.

CSS Code:

h4 { font-family: sans-serif; }

h5 { font-family: serif; } 

h6 { font-family: arial; } 

Display:

This is a header with sans-serif font

This is a header with a serif font

This is a header with an arial font

As you probably noticed throughout Tizag.com, we do not use serif fonts, except in special cases, like for the titles of the Code and Display boxes.

CSS Font Size

You can manipulate the size of your fonts by using values, percentages, or key terms. Using values are useful if you do not want the user to be able to increase the size of the font because your site will look incorrect if they did so. Percentages are great when you want to change the default font, but do not want to set a static value.

CSS Code:

p { font-size: 120%; } 

ol{ font-size: 10px; } 

ul{ font-size: x-large; }

Display:

This is a font size of 120%

1. This is a font size of 10px

• This is a font size of "x-large"

Though key terms are not very useful, the common terms are: xx-large, x-large, large, medium, small, x-small, and xx-small.

CSS Font Style

CSS Font-Style is where you define if your font will be italic or not. Possible key terms are the following: italic, oblique, and normal.

CSS Code:

p { font-style: italic; }

h4{ font-style: oblique; }

Display:

This is an italic font

This is an oblique font

CSS Font Weight

If you want to control the weight of your font (its thickness), using font weight is the best way to go about it. We suggest that you only use font-weight in multiples of 100 (e.g. 200, 300, etc) because any less and you probably will not see any difference. The values range from 100 (thin)-900 (thick).

CSS Code:

p { font-weight: 100; } 

ul{ font-weight: bolder; }

Display:

This is a font with a weight of 100

• This is a font with
• a "bolder" weight