STEPS

Objectives:
Students will be able to design and write a script for a functioning Flash website. Students will include animation to their websites.

Essential Questions:
How to design a website layout?
What fonts should be used in websites?
How to write an Action Script for a website?
How do you incorporate animation into design?

You are going to create your own website or a digital portfolio

Steps:

1.Site map - Draw a site chart that includes all pages, links, necessary images and files. (worksheet here)

HOME page
ABOUT ME page
PORTFOLIO page
RESUME page
CONTACT page
more pages if needed.....

2. Sketch a design concept.

3. Use Photoshop to create backgrounds and other graphics for the site. Optimize all images.

4. Use Flash. Document size: 1000x600

include an animation (at least on the home page)
buttons with rollover effect
complex buttons for Portfolio page
all pages should be consistent in the design
content of the pages should be interesting to read.
user friendly navigation
be creative!

This is my example. It's very basic, so just follow the steps

Open Flash

Choose Flash File (ActionScript 2)

Set the dimension of the stage to 1000x800

Import an image for the background
(File > Import to Stage)

Name the layer "background".

Choose a color for the background. In my case I chose black to blend in my picture.

Make sure all images are optimized in PhotoShop
(Save for Web & Devices) to keep the file size smaller.

Add another layer for the navigation bar.

Name it.

Create a fancy button.

Convert it to Symbol (F8)

Choose "button" for type.

Double-click on the button in the Library palette to open the button's timeline.

You are going to create a rollover effect and add a Hit state

Insert keyframes for the button states (F6)

Add effects to the Over state.

Draw a rectangle of the size of the button for the Hit state.

Return to Scene 1.

Right-click on the button in the Library and choose "Duplicate".

Open this new button.

Make sure you change the text in all states to reflect the destination of the link.

Duplicate the button again. You should have a total of three buttons.

Place the buttons on the stage.

You can arrange them any way you want.

Now it's time to create the rest of the pages.

Add another layer. Name it "Labels".

Place blank keyframes (F7) at fr.10, 20, 30 at Labels and Background layers.

Add frames (F5) at fr.35 for all three layers.

Click on fr.1 at labels layer.

In the Properties Inspector name this frame "home".

Select frames 10, 20, 30 of the Labels layer and label them too. I labeled mines as "pictures", "resume", and "contact".

Go to fr.10 (pictures). Background layer.

Add content to this page.

Save.

Go to fr.20 (resume)

Add content to Background layer.

Save.

Add content to the Contact frame.

Save.

Add ActionScript to Button1.
Open Behaviors panel (Window>Behaviors)

Click on +
Movie clip > Goto and Stop at frame or label.

Type "pictures"

Repeat the steps with the rest of the buttons to link them to frames "resume" and "contact".

Go to fr.10 (pictures). Layer "buttons"

Add a keyframe (F6)

Type "Home" to add a link to your start page.

Convert it to button (F8).

Add over and hit states.

Add ActionScript to this new button:
Behaviors>+>Movieclip>Goto and Stop...

Type: home

Save.

Add keyframes to fr.20 (resume) and fr.30 (contact)

Select Button1 at fr.10.

Modify > Break Apart

This will disable the button by converting it into a shape.
You don't need an active button1 on this page!
You can change a color of it if you want to show that this is the current page you're in.

Repeat the steps with Button2 at fr.20 and Button 3 at fr.30.

save.

All we have to do is to ass a stop action to fr.1.

Add a layer. Name it "action"

Go to fr.1

Open Action panel (Window > Action)

Global Functions > Timeline Control >

dbl. click on Stop.

Save! You are done!

All that's left is to publish your site.

Go to File>Publish Settings.

Make sure .swf is checked.

Click Publish.

This will create a file:

website.swf (the flash movie)

Here is the grading chart: