Color Picker: HOW TO CREATE A SIMPLE FLASH SITE
STEP BY STEP
Create Your Layers
In this order:
Labels
Actions
Buttons
Content
Set Your Buttons and Name Your Instances
On the “Buttons” layer, create 4 button instances. Select each button and give it an instance name by opening the properties inspector (Windows>Properties>Properties) and filling in the button instance field (top left of the panel). Name the buttons as follows: home_btn, red_btn, green_btn, orange_btn. Then, create 15 frames (F5) on that “Buttons” layer.
Set Your Labels
Label names allow you to create scripts that go to frames that have names instead of just numbers. That way, if you ever want to move around your frames and content, you won’t have to change your scripts because they will be using label names and not frame numbers. On your “Labels” layer:
1) Create key frames on frames 1, 5, 10, 15 (you’ll probably already have one on frame 1)
2) Click on key frame 1 and name it “home” (all lower case) by going to the properties inspector and writing the label name (same location as where you name your labels).
3) Click on key frame 5 and name it “red”
4) Click on key frame 10 and name it “green”
5) Click on key frame 15 and name it “orange”
Create Your Content. On the “Content” layer:
1) key frames on frames 1, 5, 10, 15 (you’ll probably already have one on frame 1)
2) Click on key frame 1 and write the word “HOME” in the content area.
3) Click on key frame 5 and create a red rectangle.
4) Click on key frame 10 and create a green rectangle.
5) Click on key frame 15 and create an orange rectangle.
Create your Actions
Go to the “Actions” layer and click on the first frame. Open your “Actions” panel (right-mouse-click and go to “Actions”). Copy and paste the following script, making sure that your button instance names match those in the script, and your label names match those in the script. Any typos or case differences will result in run-time errors and the whole movie probably won’t work:
stop();
red_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler1);
function mouseDownHandler1(event:MouseEvent):void {
gotoAndStop("red");
}
green_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler2);
function mouseDownHandler2(event:MouseEvent):void {
gotoAndStop("green");
}
orange_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler3);
function mouseDownHandler3(event:MouseEvent):void {
gotoAndStop("orange");
}
home_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler4);
function mouseDownHandler4(event:MouseEvent):void {
gotoAndStop("home");
}
Save and Test your Movie
Save your movie (FILE>SAVE) and test your movie (CTRL-ENTER). If your buttons don’t work, check to make sure that you have named your button instances in your properties inspector panel. Then, make sure that the names of your buttons in the script match the instance names. Third, make sure that your label names in the script match the label names that you created on the timeline. Last but not least, make sure that each item in your script has its own unique mousDownHandler number and that both times it is written, it matches.
NOTE: In the future, to turn the color picker into your very own Flash site, you will just create the content that you want on each page and create the buttons to look the way you like. Position all elements as you like and add more content layers if you need to.
PART 2: Option to Add Buttons
The instructions below will show you how to add a couple of more buttons: one will call a URL and the other will start a movie clip playing, no matter what frame you’re on.
Prepare Buttons and Scripts
1) On the buttons layer add two buttons and name them pink_btn and purple_btn.
2) Add the following scripts to your actions (on the first frame of the Actions layer). The first is a script for a URL and the second is the one that will play your movie clip:
pink_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler5);
function mouseDownHandler5(event:MouseEvent):void {
navigateToURL(new URLRequest("
}
purple_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler6);
function mouseDownHandler6(event:MouseEvent):void {
purpleball_mc.gotoAndPlay(2);
}
Prepare your Movie Clip
1) Add another layer called “Content” (or whatever you would like to call it) and place a movie clip on that layer. Name the instance purpleball_mc
2) Double-click on your movie clip instance to go “inside” it to its timeline.
3) Move all the content on each layer of frame one over to frame two so that nothing is on frame 1. (This will make your movie clip appear invisible when you go back to your main timeline.)
4) Add a layer on top of this movie clip timeline and call it “Actions.” Place a stop action on that first frame: stop(); This will assure that the playhead stops on the first frame so that we see nothing.
5) Test your movie (CTRL-ENTER). You should not see the movie clip in the content area until you click the button. Here’s how the button works: Notice that your script (the last line of the last script) tells the playhead to go inside your movie clip (inside the timeline of mymovieclip_mc) and play frame 2. That will make your movie clip become visible and play.
Optional Script for Changing Alpha
Another way to make a movie clip invisible and then appear is to start with it sitting in the content area at alpha zero and then scripting a button that makes it alpha=1 (which means 100%) or alpha=.50 (which means 50%), etc. So, create another “Content” layer with a yellow ball movie clip on it at alpha zero (call the instance yellowball_mc). Add the following script to your global actions:
yellow_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler7);
function mouseDownHandler7(event:MouseEvent):void {
yellowball_mc.alpha=1;
}
Juliet Davis