TRANSITIONS

Once you have a random image generator working, you can add transitions to it:

http://js-image-transition-library.appspot.com/demo/demo1.html

http://www.pearsonified.com/2006/10/simple_random_header_images_for_your_blog.php

http://www.itechies.net/tutorials/jscript/jsexample.php-pid-image1.htm

WEB 2 - java randomness...

If you could choose between a static home page or a dynamic one, which would you take?

Dynamic every time…but wait, doesn’t that require work to pull off?

Oh, and you could use this for more than just header images; I just figure that most folks will want to rotate their headers, since they tend to be the most dominant visual elements.

Are you ready to go random? Let’s do it!

1. Prepare Your Header Files

For the purposes of this example, we’re going to use 5 different images to pull off our random header effect. It’s important that these images be the same size — this will keep your image declarations consistent and W3C-valid. So, grab the five header images of your choice, and name them according to the following convention:

• header_1.jpg
• header_2.jpg
• header_3.jpg
• header_4.jpg
• header_5.jpg

One thing worth noting here is the fact that all of your images should have the same file extensions. If you’re using .gif files, then make sure that each header image has the .gif extension. Photographs will look infinitely better if saved as .jpg, though, so that’s why I’ve chosen that extension here.

Upload the images to your desired directory on your server. If you’re using WordPress, I’d suggest uploading the images to the images folder within your active theme directory. Once your images are on the server, it’s time to install the random header code.

2. Code It Up!

This free script provided by

JavaScript
Kit

PRELOADER

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.

timeline and code for buttons

yourButtonsInstanceName.addEventListener(MouseEvent.CLICK, functionname);

function functionname(event:MouseEvent):void
{
gotoAndPlay("your frame label");
}

web site timeline

set your doc to be 1024 x 768. then you can set up your timeline for content:

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

yout button's timeline

this is the timeline of your MOVIECLIP, it has its own timeline, this is how it should look:

button tutorial for movie clips in flash AS3

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

code for movie clip 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");
}

STOPPER!

yourButtonsInstanceName.addEventListener(MouseEvent.CLICK, functionname);

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