FlashVacuum Tutorials >> Setting the color of a movieClip and the HTML background

Setting the color of a movieClip and the HTML background by CyanBlue

Setting the color of a movieClip and the HTML background

by CyanBlue

This is a very simple tutorial that gives you two things to learn.

#1. Using the Color() object.
#2. Calling the JavaScript function.

Take a look at the final version so that you will have better idea on what you need to do.
(#2 is disabled in this preview. You can see the preview in this page. Preview)

FlashVacuum Flash ActionScript Tutorial CyanBlue subQuark JT

You do not have the Flash plugin installed, or your browser does not support Javascript.


Hopefully, you might need this feature in your website. Okay, let's tackle it process by process.

Let's just say that the content inside of the blue border is what are in your stage. So, you have a content area, which is light gray color, and the text on top of that background, and five different buttons that will change the color of the background.
Content area - bg_mc Buttons - color0_btn, color1_btn, color2_btn, color3_btn, color4_btn

Here is the ActionScript part.

bgColor_arr = new Array("006699", "009900", "FF6600", "D40000", "FFFF00"); for (var i = 0 ; i < bgColor_arr.length ; i++) { this["color" + i + "_btn"].id = i; this["color" + i + "_btn"].onRelease = function () { trace("this.id = " + this.id + " bgColor_arr[" + this.id + "] = " + bgColor_arr[this.id]); bgColor = new Color(this._parent.bg_mc); bgColor.setRGB("0x" + bgColor_arr[this.id]); getURL("javascript:changeBgColor('" + bgColor_arr[this.id] + "')"); } }

Line 1	bgColor_arr = new Array("006699", "009900", "FF6600", "D40000", "FFFF00");
		This is the line where I have defined the color that I am going to use for each button. One thing you have to remember is that the color system in Flash and HTML are different. In HTML, you define the color by using '#' like '#0000FF', but you use '0x' like '0x0000FF' in Flash. Luckily, they both use Hexadecimal color code, so I am just defining the color without any prefix.
Line 3	for (var i = 0 ; i < bgColor_arr.length ; i++)
		Loop through the array to define the function for each buttons.
Line 5	this["color" + i + "_btn"].id = i;
		Here I am assigning the unique id for each button that I can use later on in the code.
Line 6	this["color" + i + "_btn"].onRelease = function ()
		Here I am defining the onRelease function to each button.
Line 8	trace("this.id = " + this.id + " bgColor_arr[" + this.id + "] = " + bgColor_arr[this.id]);
		The first thing I normally do when I define a function is to check what variables I'll need to utilize within the function. So, what I do is to use the super mighty trace() function to trace out the variables. In this function, I need to know two things. I need to know what the button's 'id' is set to(this.id) and what is the associated color value defined in the bgColor_arr(bgColor_arr[this.id]).
Line 9	bgColor = new Color(this._parent.bg_mc);
		This is the line where I am defining the Color object with the destination where the color value will be changing, this._parent.bg_mc. (I am sure this is just my personal habit, but I prefer defining the explicit path like this._parent.bg_mc but you can just ignore the this._parent part and use bg_mc since it is in the same level where the code is existing.
Line 10	bgColor.setRGB("0x" + bgColor_arr[this.id]);
		Here we are assigning the new color for the bg_mc that is defined in the bgColor_arr.
Line 11	getURL("javascript:changeBgColor('#" + bgColor_arr[this.id] + "')");
		Finally, this is the line where I am calling the JavaScript function changeBgColor that is defined in the HTML page. Mind you that I am appending '0x' in line 10 and '#' in line 11.

Here is the JavaScript function.

<script language="JavaScript"> <!-- function changeBgColor(newBgColor) { // alert('newBgColor : ' + newBgColor); if (window.document && window.document.bgColor) { document.bgColor = newBgColor; } } --> </script>

Line 5	alert('newBgColor : ' + newBgColor);
		I HAD used this alert() function to make sure that I am getting the right value from the Flash. It's always a good idea to use that function when you test your code and simply disable it when you are deploying the file.
Line 8	document.bgColor = newBgColor;
		and, here we are assigning a new color value to the background color of the HTML page.

Well, that's about it, I guess. See if you can understand what I just said and post the question to the forum if you have any or if you have suggestion/correction.

Download the file from here : changeBgColor.zip