50 sites...

http://www.1stwebdesigner.com/inspiration/50-gorgeous-flash-websites-you-definitely-should-see/

code for flash and timeline

requirements for Flash site

• 1024x768
• 3+ flash buttons/pages to your site
• buttons must be movie clips with rollover events
• 3+ pages must contain content
• each page must contain an animated movie clip which loops throughout the page/time
• transitions between pages (a simple tween to play after click)
• a background that is appropriate to your site/product
• a heading/title for each page
  
• published as .html file
  

timeline

You need to make a new layer for each "page" of your site and add a frame label at a specific point for that "page". We will make transitions later, for now you just want to have some area for content on your timeline

code to add function to buttons in flash

EVERYTHING IN PINK NEEDS TO BE CHANGED TO MATCH YOUR DOCUMENT:


yourButtonsInstanceName.addEventListener(MouseEvent.CLICK, functionname);

function functionname(event:MouseEvent):void
{
gotoAndPlay("framelabel");
}

button tutorial

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

balsamiq

http://builds.balsamiq.com/b/mockups-web-demo/

example

hopefully this is not blocked!

http://www.newgrounds.com/portal/view/316541

or

http://www.albinoblacksheep.com/flash/animator

or

http://www.atom.com/fun_games/animator_vs_animation/

Friday Flash Assignment

Today you will be making a new movie. It must contain the following. We will be watching these on Monday. Click on the links below to see a reminder of how to do so.

• 300 + frames
• 15+ tweens
• 10+ layers
• 1+ movie clip
• 1+ stop motion (30+frames)
• 1 stop button

the code...

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

we started with button basics, now we charge onto the real deal and make a menu!!!

clock here for a step by step guide

stopper

yourButtonsInstanceName.addEventListener(MouseEvent.CLICK, functionname);

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

Flash!

Today we will be getting to know Flash. Your task, once we learn the basics of timeline animation will be to make a 200 frame movie with 5+ layers and 2+ shape & 2+ motion tweens.

site requirements

• 4 pages (SC related)
• links
• consistent layout/navigation
• appropriate content
• aesthetically pleasing PS layout

glitches...

• make sure you set your border to "0" for each button, otherwise you may have spacing issues
• if you resize any slice in Dreamweaver it will distort your page
• to add additional content in Dreamweaver you need to create an AP Div (in the layout tab)
• remember to title each page (Page Properties)
• rollovers: insert > image object > rollover image
  

PS layouts

Once your base layout is done it is time to add site specific information, you want to add all of this on the same document but in NEW LAYERS. Then we can use the visibility options in the layers window to swap from one page to the next. Adding content in PhotoShop gives you more options of fonts, colors etc. But it limits your ability to edit content later as PS makes your page into small images, not editable regions.

Photoshop Layout Tutorials

Here is a link to 90 tutorials. Find one you like and that you think you understand, then try and follow it. It is OK to make subtle changes to accommodate your topic (SC related). This will become your template for your site to come.

Crit of sites

please have 2 people look at your site, they should answer the following:

• What do you like about this site?
• What is confusing, or out of place?
• Aesthetics? How's it look?
• Parting thoughts?
  

WEB HOSTING

sign up at www.0catch.com or any other free web hosting site found here:

http://www.thefreesite.com/Free_Web_Space/

If you choose 0catch.com sign up for the FREE web hosting. Then you will be offered a TON of garbage, click "skip" or "No" each time.

Once complete you can open CyberDuck and login to drag and drop your files:

YouTube

Embed a video if you want, here is a tutorial...

DW site requirements:

• 4 + pages
• Layout tables (same on each page)
• Consistent Navigation (Flash Buttons or Spry Menu)
• Content on each page (text, images, links etc)
• Banner on each page built in PS.

Build a banner in PhotoShop

our classroom example was set to 800 px X 150 px at 72 DPI.

here is a tutorial covering the "blending options" in PS:

layout tables

http://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WScbb6b82af5544594822510a94ae8d65-7d68.html

defining a site

http://www.vineyardesigns.com/resources/dreamweaver/define_site.shtml

staff Server

this is where we turn everything in....

http://docs.google.com/viewer?a=v&q=cache:tJ8ZHmxctyYJ:learn.shorelineschools.org/shorecrest/laptop/documents/p4_organization-server-naming.pdf+staff+server&hl=en&gl=us&pid=bl&srcid=ADGEESjqLBsoV9i68csgpELLyjhm5xmwaUt9S_Du_3DYhBiDeqqXV99q5Wj2GyghyIWAwxpCBgK4Pl6UFcZVPlBbWMXnv4kGo341yR6kwhc1iNjyYN0gW2Mx5X2nBf3WBzHi6bpWeaim&sig=AHIEtbQDxQPD3ds0XmjvR5iX9lwcg47e5A

Web Sites Due

Start of class on Tuesday

• 3 + pages
• image(s) on each page
• table of links on each page (nav menu)
• info on each page (about your summer)
  

SUMMER WEB SITES

Our goal is to make a 3 page web site using the most basic HTML tags... The topic is your summer.

HTML navigation table

this is how we made our table, set yours up too!

click here for a table tutorial

some basic tags

what did you do this summer?

Come to class on Tuesday with an idea to build a web site about from your summer adventures... come with content, images, ideas etc.

WELCOME TO WEB DESIGN

Welcome to SC Web Design. This term you are going to learn a multitude of web codes, authoring programs, jargon, and hopefully have some fun along the way!

final project!

specifics:

• 5 pages (3 pages for seniors)
  
• Professional Layout
• Consistent Navigation
• Client/Visitor appropriate colors, theme, images etc.
• Use software of your choice to the best of your ability
• Compare your site to another of a similar topic/theme, how does yours stack up? Our goal is for yours to be equally as impressive.

You need to design a site, using the program of your choice on a topic of your choice.

• To get started please answer the 8 questions here
• Next you need to create a layout sketch for each page in your site. You can do this by hand or using Balsamiq, a web based layout interface.

to make a container:

.container_div
{
border:5px dashed blue;
margin-left:auto;
margin-right:auto;
margin-top:200px;
width:90%;
opacity: .9;
height:340px;
background-color:#d0f0f6;
text-align:left;
padding:8px;
}

CSS 3 pages...

more in CSS...

Task: Tell us about your summer plans... we will be making a 4 page site about that topic. We will change our menu, add different "classes" to adjust styling and make a complete 4 page site.

http://www.cssbasics.com/css-classes/

this is a great resource for finding different styles, etc.

Requirements:

• 4+ pages
• CSS navbar
• colored text box
• colored header
• background color &/or image(s)
• information
• links
• images
• one .css page styling your site
• 4+ html pages with no "style"` on them

Tuesday... start your first CSS site...

http://www.w3.org/Style/Examples/011/firstcss

please do not just copy and paste, but add your own info/ideas etc.

be sure to pay attention to which code you are to be adding, css or html... pay close attention when the tutorial has you copy and paste your CSS into a NEW DOCUMENT and then refer to it in your html document, this steps catches a lot of students off guard. make sure you read through the entire tutorial following each step, in sequence.

OSWD

Open Source Web Design is a great CSS resource. Please find a layout you like and download it. Then open the index.html page as well as the .css page in DREAMWEAVER...

oswd.org

CSS!

CSS
If you like HTML you will LOVE CSS!!!!

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. CSS can be used locally by the readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, and reduce complexity and repetition in the structural content. A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block.

* A declaration-block consists of a list of semicolon-separated declarations in braces. Each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;).[
* In CSS, selectors are used to declare which elements a style applies to, a kind of match expression. Selectors may apply to all elements of a specific type, or only those elements which match a certain attribute; elements may be matched depending on how they are placed relative to each other in the markup code, or on how they are nested within the document object model.

we will be following a tutorial to build our first CSS and HTML pages...

http://www.w3.org/Style/Examples/011/firstcss

To Turn in for Flash Web Site:

File > Publish Settings > then export you .html and .swf files to a new folder.

EXTRA CREDIT: Lip Dub Poster...

Title: "All-School Music Video Scavenger Hunt"
Date: May 27 after 4th period

Details: 7 songs from 7 decades

Participation Options:
1. Dress up like your favorite Pop Culture character for the Scavenger Hun!
2. Participate with a club.
3. Dress up like a generic person from a specific era.
4. Wear school colors and go crazy when the camera moves into the gym at the end of the video.

See Mr. Mitchell in D5 for more information.

Images from various decades would be great.

Check out http://www.uglybogus.com/ for a bunch of rock show poster examples... specifics: Document size: 8"x10" Resolution 300dpi or more Program, use Illustrator, PhotoShop, InDesign, but no Flash.

pre-loader for FLASH

FLASH!!!
PRELOADER!!!
for a more in depth preloader click here

We are going to make our loading movie on a new scene

We are going to start off with our preloader first, this frame is only going to have the text "Loading" and it will remain there until the website finishes loading. To do this, click once on the layer labeled Content then pick the Text Tool and write Loading in the middle of the stage.

We are now going to write the code for the preloader, click once on the Actions layer and then right-click it and select Actions to open up the Actions panel. Paste the code below to program the preloader.

stop();

this.addEventListener(Event.ENTER_FRAME, loading);

function loading(e:Event):void {

var total:Number = this.stage.loaderInfo.bytesTotal;
var loaded:Number = this.stage.loaderInfo.bytesLoaded;

if (total == loaded) {

play();
this.removeEventListener(Event.ENTER_FRAME, loading);

}

}

This code is explained at AS3 Flash Preloader Tutorial. Please review that tutorial to learn about how this code works.

That completes our preloader part, close the Action panel once you are done to go back to your movie. We are going to start now working on the rest of the website. We will start off now by adding the background. You can use our background here to follow the tutorial. Simply right-click this image and select Copy, we are going to paste it in Flash later.

Intro Movie

You will need to make a new scene to act as an introduction.

• 200+ frames
• skip intro option to enter site
• related to topic
• entertaining
• professional
  

for code:

same code as other buttons but change the navigation to:

gotoAndPlay(frame #, "Scene Name");

frame # = frame 1 (typed out just as 1) generally of your web site
Scene Name = the name of your web site scene in the scene window (windows > other panels > scene)

tips:

• make a new layer for each "page"
• give each page 10+ frames on the timeline
• be sure your labels occur at different points on your timeline
  

a tutorial of what we have been doing...

http://www.vineyardesigns.com/tutorials/flash/website/index.shtml

Flash Site Requirements...

• 5+ "pages"
• An entertaining topic
• transition animations
• content/images on every page
• intro movie & loading page

To make your buttons work/navigate

use this code once you have established your timeline:


yourButtonsInstanceName.addEventListener(MouseEvent.CLICK, onClick);

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

you will need to replace everything in bold/pink above...

adding navigation to your flash...

first make new layers for each page and then add frame labels for those pages:

a tutorial guide is here:

http://www.republicofcode.com/tutorials/flash/basicwebsite/

though, unlike the tutorial make each page on a separate layer and give some space/frames between then for our transitions we will add later.

code for buttons...

myBtn.buttonMode = true;


myBtn.addEventListener(MouseEvent.ROLL_OVER,animIn);
myBtn.addEventListener(MouseEvent.ROLL_OUT,animOut);



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

Example buttons...

your buttons can be much more interesting than these!!!

FLASH BUTTONS!!!

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

Stop and Play buttons

Create 3 new layers at the top of your movie:

• actions
• stop button
  
• play button
  

add a keyframe for each of these to the end of your movie

Create buttons on each layer

Give them instance names

Add action Scripting to them

*****
you will need to replace the items in hot pink with your button instance name (from properties window) and your function name (you make this up!)...
*****
yourButtonsInstanceName.addEventListener(MouseEvent.CLICK, functionname);

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

yourButtonsInstanceName.addEventListener(MouseEvent.CLICK, functionname);

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

you will need to replace the items in hot pink with your button instance name (from properties window) and your function name (you make this up!)...

step by step instructions here...

Tell a story with Flash

REQUIREMENTS:

• 10 layers
• 250 frames
• "Stop()" command at the end of the movie
• tell a story (i.e. have a beginning, middle and end)
• have a background/context
• "start" and "stop" buttons
  

Your first animation!!!

Please build a simple flash movie which tells a story containing the following:

• 7+ layers
• 150+ frames
• Shape & Motion tweens
• 2+ characters

info on Flash:

• motion tween
• shape tween
• flash toolbar
• more flash basics

FLASH!!!

Turn in Dreamweaver sites...

Please turn in a folder (named your name_DW) containing your Shorecrest themed Dreamweaver site. Once you change the name of the folder, be sure your site works! Test it on your student server! Then place it into the classes folder.

Thanks!

SC Site requirements:

• 4+ pages
• SC themed
  
• Consistent navigation, aesthetics, flow etc.
• Classroom appropriate
• Informative (info on each page)
• Layout table/cells on each page
• Make it look as professional as you are able.

Button Options...

• linked text
• Insert > Media > Flash Button
• Insert > Spry > Spry Menu Bar
  

Layout Tables

http://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WScbb6b82af5544594822510a94ae8d65-7d68.html

HTML Grading

To receive 100% on the HTML web site you must:

• Use all tags covered in class (20%)
  
• perfect functionality (20%)
• Have 4+ pages (20%)
• Consistent navigation (in a table) (20%)
• Proper Root folder (20%)

IF you have questions about your grade please come see me for an explanation. Also, if you would like to improve you site and have it regraded you are free to do so, as long as the first version was turned in on time.

SC Site Mockup

Please use balsamic to create a mock up of your SC site... one for each page

http://www.balsamiq.com/demos/mockups/Mockups.html

DREAMWEAVER!!!!

We are going to be making a 4+ page site about something SC related in Dreamweaver...

html sites...

You should be nearing the end of your hand coded HTML adventure. Our goal is for each of you to have a simple 4 page site, linking to each page with consistent navigation in a table (feel free to copy and paste this part of the code). If you are ahead of the game and complete with your basic pages here are 3 options for extra credit:

• create a banner/heading for each page in PhotoShop
• add anchored links to navigate "down" a page
• add any "advanced techniques" from this page (styles, floating frames, marques, etc)

Our goal for these sites is for them to look nice, function seamlessly, and inform the reader/viewer. Take a look at your site in comparison to a similar site/topic, how does yours stack up???

Mr. Story's example code from class...

HTML Site

We are going to be building a simple site using hand coded HTML. Choose any classroom appropriate topic you want and meet or exceed the following requirements:

• 4+ pages
• TABLE <> for navigation that links to all 4 pages
  
• TABLE <> for content
• outside link(s)
• image(s) on each page
• content (actual informative info about your topic)
• aesthetically pleasing layout/design/colors/etc

click here for a link to an outside html tag list

4 pages...

Come with an idea for a 4 page site tomorrow...

Tables in HTML...

Tables are useful for organization as well as navigation...


We will be using a table to create a navigation bar/menu...

here is a link to some table info

html primers

today we will start with some more html basics...

these primers should help expand upon the basics we learned yesterday:

http://www.htmlgoodies.com/primers/html/article.php/3478131

html basics...

in TextEdit we will start learning to hand code our own sites...

this is what a basic .html page will look like:

Welcome to Web Design

This site will provide you all forms of info about our projects, deadlines, tutorials, etc.

• Academic plans are due on Monday 2-8-2010