In this tutorial you will learn to create an interface that will enable your users to change the looks of your flash site with a simple mouse click.
This makes for a more appealing and interesting site. Also, if a user has any preferences over colors used in your site, or finds it easier to read text at a different size or color, you will enable him to do exactly that, thanks to some simple ActionScript code.
Look at the example below – try clicking the three buttons in the top right corner and see what happens. Slick, huh?
Before you start, let me just say that this tutorial is written with ActionScript 1.0, and can be made in Flash MX, Flash MX 2004 and Flash 8.
Making the background that will change color
1 Open a new flash document. The dimensions and the framerate of the movie aren't important - the purpose of this tutorial is to show how to enable a user to change the appearance of the site she's using. Save your document right away, so that you just press Ctrl+S later, to easily save your progress.
2 Select the Rectangle tool (R). To draw a borderless rectangle, click the little pencil icon in the Colors portion of the Tool panel (1 in the image below). Then click the middle icon at the bottom of this panel (2).
Select #6698B0 as Fill color. You can choose any other color you like, it is just important that you stick with it throughout the tutorial, where necessary.
3 Draw a borderless rectangle on stage, any dimensions are OK (the image below is 50% smaller with respect stage's original size, so that you can see all of it here).
4 Choose the Selection tool (V) and click once on the rectangle to select it.
5 Open the Align panel (Ctrl+K). Turn on the "Align/Distribute to Stage" button (1 in the image below).
Click the "Match width and height" button (2). Your rectangle's dimensions will be exactly the same as those of the stage.
Click the "Align horizontal center" and "Align vertical center" buttons (3 and 4 in the image, respectively) to center the rectangle in relation to the stage.
Your result will match the one on the image beneath.
6 With the rectangle still selected, hit F8 (or select Modify > Convert to Symbol) to convert the shape to a symbol. Select Movie clip as type, call it movie background and click OK.
7 Now go to the Properties panel, and in the appropriate field on its left side, type in the Instance name for this movie clip: movieBkg, and hit Enter to confirm. This is necessary if you wish to manipulate this movie clip with ActionScript.
Designing a logo background that will change color
8 Lock this layer, call it site background and create a new layer. Call this new layer logo background.
9 Choose the Rectangle tool (R) and select #CC0000 as Fill color. The Stroke color doesn't matter. You can leave it blocked or use it - as you wish. Draw an elongated rectangle in the upper part of the stage. Hold the Down arrow key while dragging your mouse if you wish to obtain round corners.
10 With the Selection tool (V), double-click on the rectangle's fill area to select both the fill and the outline. Next, select the Free transform tool (Q). Bring your mouse near the bottom edge of the shape until two horizontal arrows appear as cursor.
Click and start dragging left to skew the rectangle. After that, move the rectangle to the right by using the Right arrow key while holding Shift to work faster.
11 Select the rectangle (with or without the outline, it doesn't matter) and press F8 to convert it to a symbol. Select Movie clip as type, call it logo background and click OK.
12 Again, like you did with the previous symbol, while the newly made movie clip is still selected, go to the left side of the Properties panel and give it an Instance name. Call it logoBkg. Lock this layer.
13 Make a new layer and call it logo. Select the Text tool (T). In the Properties panel, choose "Static" as text type, white (#FFFFFF) as color, a font you like and type the name of your site/nickname or whatever you like. It is important that the "Selectable text" option (see leftmost icon in the image below) remains turned off.
This is done in order to avoid the cursor for text selection showing up when the user passes his mouse over the logo. Because it just look bad as a design effect, in most cases. If you want, you can also press Ctrl+B (the break apart command) twice to convert the text to vector graphics.
Lock this layer.
Creating the site sections' links
14 Make a new layer and call it links. It is here that you will place the buttons for site navigation.
15 Select the Rectangle tool again (R) and draw a little rectangle below the logo. Make its color and roundness the same as those of the logo background, so that you are consistent with your site design. This is just for the purpose of this exercice. If you have any other design layouts and ideas for your site, do use them!
16 Select the rectangle, select Modify > Convert to Symbol. Choose movie clip as type and call it link button. Click OK.
Why movie clip instead of a button? Because movie clips can function as buttons, with additional possibilities and manipulation via ActionScript that would not have been possible for button symbols. Movie clips are far more powerful than button symbols. And in this lesson, you need movie clips to change their color by using ActionScript.
17 Select the movie clip and copy it (Ctrl+C on a PC, Command+C on a Mac), the paste it in place by selecting Edit > Paste in Place.
Now, don't touch anything - don't click anywhere or you'll lose the copy you just pasted in the exact same place as the orginal, with the "Paste in place" command.
Just hold Shift and press the Down arrow to move the new copy below the original, all while preserving the same verical position.
Repeat this once more to have 3 movie clips in total.
18 You will now give an Instance name to each of the movie clips, so that you can change their color later via ActionScript.
Click once on the first movie clip/button (I'm calling it button because it will act as a button in your site, although it is a movie clip) with the Selection tool (V). Go to the Properties panel and give it the Instance name link1.
Repeat this for the two remaining buttons - call them link2 and link3, respectively.
19 Before continuing, save your work. Lock this layer. Create a new layer and call it link text.
20 Select the Text tool (T) and write the names for your site links exactly above each button. Be sure that you left the "Selectable text" option turned off in Properties panel.
This is even more important now, when you are creating the buttons for the site navigation. Imagine a user placing his mouse over the button and the cursor for text selection appears. He might think that the button doesn't work, which is bad for your site. This is called not being user-friendly.
Always think about your users as people that are not web-savvy. You have to create your web sites and their interfaces with the lowest common denominator in mind - that means someone with very little experience in surfing the web. If you follow that kind of thinking and implement it in your site design, you will cover the widest possible audience, make your site user-friendly, clear, intuitive and easy to use. You cannot design your website expecting that everyone has a level of experience that equals yours. You may think like that only when you're making a web site for a special group of people that is at home when working with a computer - web designers, for example.
The interface for customizing the site's looks
21 Make a new layer and call it site controls. You'll place the buttons (real button symbols this time, not some movie clip surrogates 🙂 with whom the user will change the appearance of the site on this layer.
22 Select the Rectangle tool (R) once more and draw three little rectangles to the right of the logotype background. Make each rectangle have a different fill color.
23 Select the first rectangle (both the fill and the outline) and hit F8 to convert it to a symbol. Pay attention to select button as type, because the selection has stayed on movie clip from before. Call it site color 1 and click OK.
Repeat this for the remaining little rectangles: convert them to button symbols and call them site color 2 and site color 3, respectively.
24 Click once on the first button. I say once, because if you click on it twice you'll be turned into a slimy... er... you'll enter inside the button's timeline and you don't want to do that.
Once you selected the first button, go to the Properties panel and give it an Instance name. Call it colorBtn1.
Repeat this for the two other buttons, give them Instance names colorBtn2 and colorBtn3.
What you just made will make your life a lot more easier. When you have buttons with Instance names, you can tell them what to do from a keyframe on the main timeline, where all of your code will be grouped. That will spare you a lot of time when you need to make changes to your ActionScript code. Imagine having to go from button to button to change the code - just a waste of time. Remember, if possible, always strive to put as much code as you can in one place, preferably on a keyframe on the main scene's timeline.
Setting up a customizable dynamic text field
25 Create a new layer and call it text.
26 Select the Text tool (T). Go to the left side of the Properties panel and select Dynamic as type of text field.
Select _sans as type of font. You'll find it at the top of the font list. This means that a sans serif font will be selected for the text field you'll create. Why is this so and why should you do this?
Simple. If you want to make possible for the user to change the color of the text on your site or change any other characteristic, like font size, whether it is bold or italic, you have to use a dynamic text field. Next, there is the question of font selected for the field.
If you want to use a certain exotic font in this field, you'd have to embed it inside. Because this is the only way to be sure that all your users will see the font as you see it. When you choose this, it means that the information on the look of this particular font will be embedded within your final SWF file that will go on the web. And this means larger file size and longer waiting time for your users.
So, when you choose the _sans font type, this makes possible the following: whether a visitor to your flash site is a PC, Mac or Linux user, when he loads your SWF once he accesses your site, his machine will automatically choose the standard sans font and display it (sans meaning sans serif, without the endings of letters like in a serif font - Times and Times New Roman being some examples of it). This is Arial for PC users and Helvetica for Mac users. I don't know for Linux. But the point is, your site will have almost the exact same look for each visitor.
And you didn't have to embed the font into your SWF, thus making it smaller.
27 So, to fully apply the above to your text field, be sure to have selected the "Use device fonts" option in the menu below the font size.
28 Click and drag a big text field on the stage.
29 Enter some dummy text inside, you'll add real content later. If you don't have dummy text at your disposal, just go to Google search for "dummy text". One of the first results will be a page with the classic dummy text, beginning with "Lorem ipsum..." etc. Copy and paste this text into your text field.
30 When you're finished with pasting the dummy text into your dynamic text field, hit Esc on your keyboard.
Go to the Properties panel and give an Instance name to your dynamic text field: call it siteContent. Hit Enter to confirm.
This is obligatory - without the Instance name you wouldn't be able to control the text and change its color, size and other font characteristics dynamically.
Lock this layer.
Entering the ActionScript
31 Create a new layers on top of all others and call it actions. Click on its first keyframe and select Window > Actions to open the Actions panel.
Enter the following code inside:
logoBkgColor = new Color("logoBkg");
movieBkgColor = new Color("movieBkg");
link1Color = new Color("link1");
link2Color = new Color("link2");
link3Color = new Color("link3");
textStyle1 = new TextFormat();
textStyle1.color = "0x000000";
textStyle2 = new TextFormat();
textStyle2.color = "0xFFFF00";
textStyle3 = new TextFormat();
textStyle3.color = "0xFFFFFF";
colorBtn1.onPress = function() {
changeLogoBkg = "0x339966";
changeBkg = "0x339933";
changeButtons = "0x99CC33";
changeColors(changeLogoBkg, changeBkg, changeButtons);
siteContent.setTextFormat(textStyle1);
}
colorBtn2.onPress = function() {
changeLogoBkg = "0x003399";
changeBkg = "0x6633CC";
changeButtons = "0x0099FF";
changeColors(changeLogoBkg, changeBkg, changeButtons);
siteContent.setTextFormat(textStyle2);
}
colorBtn3.onPress = function() {
changeLogoBkg = "0xCC0000";
changeBkg = "0x6698B0";
changeButtons = "0xCC0000";
changeColors(changeLogoBkg, changeBkg, changeButtons);
siteContent.setTextFormat(textStyle3);
}
function changeColors(changeLogoBkg, changeBkg, changeButtons) {
logoBkgColor.setRGB(changeLogoBkg);
movieBkgColor.setRGB(changeBkg);
link1Color.setRGB(changeButtons);
link2Color.setRGB(changeButtons);
link3Color.setRGB(changeButtons);
}
Test your movie (Ctrl+Enter). Click on the buttons in the top right corner and you'll see your flash movie change colors! Nice, isn't it? 🙂
Now, let me explain you what does this ActionScript code actually do.
ActionScript code explained
The first portion of the ActionScript is where you create the objects that will serve for changing the colors of your site. Let's see how this is done with the explanation of the first line:
logoBkgColor = new Color("logoBkg");
Here, you created a Color object. This specific object serves to change the color of a movie clip. So, the object's name is logoBkgColor. Between the parentheses is the Instance name of the movie clip (logoBkg) you are associating your Color object with. The Color object is needed because there aren't any methods available for the movie clip that would change its colors directly.
After that line of code is executed, the Color object and the movie clip in question are linked together. That means whenever the color of the Color object is changed, the color of the movie clip is changed. That change will happen when a button is pressed, but more on that later.
Whenever you change the color of a movie clip with the use of the Color object, you change all of its colors. It doesn't matter if it is outline or fill color - both are changed. You can't change these colors separately. Also, once you change the color, it is impossible to revert back the movie clip to its original appearance. In Flash 8 and ActionScript 2.0, much bigger changes can be made to a movie clip, like giving it a shadow, brightness and color alterations and so on. I'll leave that for another flash lesson!
After that, Color objects are created for the movie's background - which you created as a rectangle and then coverted it to a movie clip. Also, the same is being done with the site buttons.
movieBkgColor = new Color("movieBkg");
link1Color = new Color("link1");
link2Color = new Color("link2");
link3Color = new Color("link3");
You'll now see how the visual aspect of the text is changed. It is done by using the TextFormat object. Again, you create a new object, this time the TextFormat object. You create it by writing a variable and telling flash that this variable (textStyle1 in this case, you can call it myTextLook or anyway you like) is an instance of the TextFormat object. Once this line is executed, this object is stored in the memory (until you close the browser window with the page containing your SWF file) and is waiting to be called.
textStyle1 = new TextFormat();
Next, you define the color property of the textStyle1 instance of the TextFormat object. The color is written in hexadecimal format, between quotation marks.
textStyle1.color = "0x000000";
If you are searching for the hex code of a particular color, just click on any color selector in Flash, place your mouse over that color and the code will be displayed for you.
Instead of writing the hash sign (#), you write 0x. This is the convention used in ActionScript that teels Flash that what follows is a hexadecimal color code.
So, you repeat the same thing twice, for the next two TextFormat objects, to have three different text styles at your disposal. You will use them later. Before going on, let me just point your attention to other text properties that can be changed with the TextFormat object, like bold, italic, font size, etc. You can see these properties implemented in the second, expanded example avaliable for download at the end of this tutorial.
textStyle2 = new TextFormat();
textStyle2.color = "0xFFFF00";
textStyle3 = new TextFormat();
textStyle3.color = "0xFFFFFF";
Now comes the part where you tell Flash what to do when a user has pressed one of the buttons for changing the appearance of your site. This code is placed on the main timeline, as I mentioned before, to have everything in one place, instead of having to place the code on each individual button.
So the line,
colorBtn1.onPress = function() {
tells that a function is assigned to the colorBtn1 onPress event. When a user presses this button, that function will run. This means that everything between the function's curly braces, { and } will be executed. And what gets executed is this:
changeLogoBkg = "0x339966";
changeBkg = "0x339933";
changeButtons = "0x99CC33";
changeColors(changeLogoBkg, changeBkg, changeButtons);
siteContent.setTextFormat(textStyle1);
}
The first line creates a variable, changeLogoBkg, which holds a hex color value. The next two lines repeat this operation, for two other variables. These three variables holding the color codes are sent to a function.
changeColors(changeLogoBkg, changeBkg, changeButtons);
So, when the said button is pressed, it also invokes another function, called changeColors, which is defined later. This function is invoked (called) so that in the same time three variables are passed to it. That means that the values of these variables are given to this function so that it can do something with them.
As you can see in the code, this function is invoked also when the other two buttons are pressed. This is again done in order to make the code more compact and modular. Instead of writing every line of the changeColors function inside every button's onPress event, you write it once and just call it when the buttons are clicked.
The last line which is run when one of the three buttons is pressed:
siteContent.setTextFormat(textStyle1);
It sets the style for the text. Remember, siteContent is the name you gave to the dynamic text field. So you say to flash that the text should be styled with the properties of the textStyle1 TextFormat object you created earlier. You do that via the setTextFormat method (command).
At last, you arrive at the changeColors function. This function takes in the variables you passed it earlier, when you created the code for the buttons.
function changeColors(changeLogoBkg, changeBkg, changeButtons) {
logoBkgColor.setRGB(changeLogoBkg);
movieBkgColor.setRGB(changeBkg);
link1Color.setRGB(changeButtons);
link2Color.setRGB(changeButtons);
link3Color.setRGB(changeButtons);
}
The color of a movie clip is changed by changing the color of the Color object. This is done via the setRGB method. So, for example, the color of the movie clip used for the background is set via the following line:
movieBkgColor.setRGB(changeBkg);
in which the movieBkgColor is the name of the Color object associated with the movieBkg movie clip. The setRGB sets the color, which is specified between the parentheses. This is the changeBkg variable, which has a different value, depending on the button pressed.
Conclusion
So you learned how to make a site which can change appearance according to user's input (the clicking of a button).
It is important to keep in mind that although this gives you many possibilities for making your flash site even more beautiful and interesting, it has some trappings, of course. You should be careful not to overwhelm your users with too much possibilites, and to be consistent.
This second point (consistency within a website) is more important. If you make your site change completely when a button is pressed, this will completely confuse a user. The user must be able to find her way around a website at all times. This means you have to keep your navigation consistent, the text readable, as well as retain a general layout scheme.
As much as Flash gives you the opportunity to create basically anything you want, be it awe-inspiring, mind-blowing, it also throws in so much possibilities that it is easy to forget the user.
Always keep in mind that your users aren't as much web-savvy as you are. Be nice to them.
That being said, enjoy making superb websites in Flash!
Below you can download the source files for this flash tutorial, including the source for the example seen at the start of this tutorial, with the smiling head at logo's bottom. Try moving your mouse over it!
Download the zipped source FLA file shown in this tutorial.
Also, you can download the source file for the expanded version.
I love love your tutorial’s mate ive learnt sooooo much thankss alottttttttttttttttttttttttttttttttttttt! all the best champ
At LAST!!! I finally got to know what “Lorem Ipsum” is!!! Even professors at my school didn’t know exactly what that is (printers, packaging-designers etc)
Great tutorials in general!!!
cool……………….!!!!!!!!!!!!!!!!!
dis s d best i hav ever seen…..i luv it 1all d best champ……
Thanks a lot for your tutorial. i very interesting you..
It would be really cool to have this on my site. I mean to have my site change appearance based on user preferences. Do you know if this can be done with WordPress?