In this quick tutorial I am going to show you how to create a nice glowing button effect using Flash and few lines of AS3 code in order to control the button. Let’s get started

1. Open a new Flash document and save it under “GlowingButton.fla”. Set the color to #000000 and the frame rate to 24 fps.

2. Take the rectangle tool and from the properties panel set the values like this:

Choose #FFCC00 for color and draw a rectangle with size 120px wide by 30px high. Now take the Selection tool and select the half of the rectangle like this:

Change the color of the selected half to #FDD535. The button background is now ready. Nice effect, right?

3. Select the whole rectangle and convert it to Movie Clip symbol. Type “golden_btn” for instance name. Now double click the movie clip to go inside its timeline. Once again, select the whole rectangle and convert it to Movie Clip symbol.

4. Click on frame 20 and convert it to Keyframe. Now, on frame 20, select the movie clip, then open the Filters Panel and select the Glow filter like this:

For filter color choose #FFCC00.
Now select a frame between frame 1 and 20 and create Motion Tween. From the properties panel set the tween easing to 100. Select the whole 20 frames and then by right clicking select Copy Frames:

Select frame 21 and by right clicking select Paste Frames.
Now select the copied frames and again by right clicking select Reverse Frames.

5. Create new layer called “text”. Take the text tool and type something. For font choose Tahoma, bold, size 18, color #990000. Convert the text field to movie clip. Click on frame 20 and convert it to Keyframe.
When you are still on frame 20, select the text field movie clip, go to Properties Panel and under Color choose Tint. For color choose #000000:

Click somewhere between frame 1 and frame 20 and create Motion Tween. Repeat the step where you copy, paste and reverse the frames.

6. Create a new layer called “actions” and convert frame 20 and 40 to Keyframes. On frames 1, 20, 40 open the actions panel and type “stop();“.

Our glowing button is ready! All we have to do is to go back to the main Scene and type some actionscript.

7. On the main Scene, create a new layer called “actions” and open the Actions Panel.

//setting the button properties
golden_btn.mouseChildren = false;
golden_btn.buttonMode = true;

//adding event listeners to our button
golden_btn.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
golden_btn.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
golden_btn.addEventListener(MouseEvent.CLICK, mouseClickHandler);

function mouseOverHandler(e:MouseEvent):void{
	golden_btn.gotoAndPlay(2);
}

function mouseOutHandler(e:MouseEvent):void{
	golden_btn.gotoAndPlay(21);
}

function mouseClickHandler(e:MouseEvent):void{
	//navigating to URL on click
	navigateToURL(new URLRequest("http://flashadvanced.com"));
}

That's all!

Here is the final result:

In this tutorial you will learn how to use the AS3 Color Picker component to change the color of your gradient background. I will show you the technique of creating a nice gradient background

Note: In order to complete this tutorial you need to download TweenMax library. Do it by clicking here. Unzip the downloaded file in the same directory as the Flash files!

1. Open a new Flash document and save it under “ColorPicker.fla”. Set the size to 450 x 200 pixels.

2. Take the rectangle tool, disable the stroke color, for fill color choose #999999 and then draw a rectangle with the same size as the document size. Convert the rectangle to movie clip and give it an instance name “bg”. Align the movie clip so it covers the stage.

3. Create a new layer called “color picker”. Go to Window -> Components and drag a ColorPicker component to the stage. Give it instance name “cp”.

3. Create a new layer called “gradient” and take the rectangle tool again. Disable the stroke color and draw a rectangle with size 450px by 200px. Position it so it covers the stage. Select the rectangle and go to the Color Panel by clicking Window -> Color. Under “type” choose “Radial”. For left color choose #E1E1E1 and set its alpha value to 25%. For right color choose #555555 and set its alpha value to 35%:

This is how you make gradient backgrounds in flash.

4. Create a new layer called “actions” and open the Actions Panel.

//importing classes
import fl.events.ColorPickerEvent;
import flash.geom.ColorTransform;
import gs.*;

//getting the color info
var colorInfo:ColorTransform = bg.transform.colorTransform;

//adding an event listener for color change
cp.addEventListener (ColorPickerEvent.CHANGE, colorChanged);

function colorChanged (e:ColorPickerEvent):void {

	//setting the color of the ColorTransform object
	colorInfo.color = cp.selectedColor;

	//applying the color change animation with TweenMax
	TweenMax.to(bg, 1, {tint:cp.selectedColor});
}

This is the easiest way to create a nice gradient background color changer using Color Picker component and TweenMax.

Here is the final result:

In this tutorial I will show you the easiest way to create a nice colorful menu with tabs using Flash and AS3.

1. Open a new Flash document and save it under “tabbedmenu.fla”. Set its size to 500 x 80 pixels.

2. Rename the first layer to “rectangle”. As you guessed, we’ll be drawing a rectangle. Take the rectangle tool, disable the stroke, for color select #1E73E6 and draw a rectangle with size 500 x 40 px and position it on the bottom center of the stage. Convert the rectangle to movie clip. Lock this layer.

3. Create a new layer called “tabs” and take the rectangle tool again. Set its top corner values to 15:

Disable the stroke, select #1E73E6 for fill color and draw your tab. Your tab should be 96px wide by 33px high. Now take the text tool, select “Tahoma” for font, bold, size 18 and type “Home”. Convert both the tab and the text to Button symbol. Position the button like this:

4. Now make 4 copies of the the button and position them one after another. To modify each of the buttons you need to select each of them and then go to Modify -> Symbol -> Duplicate Symbol. Now you can modify them. Go inside the first copy and change its color to #BF7AC7. Double click the text field and type “about”. For the second copy choose #6DB6F4 for color and type “portfolio”, for the third one – #97C57E for color and type “photos”, for the fourth one – #CD846B for color and type “contact”.
Now give the buttons instance names: “home_btn”, “about_btn”, “pf_btn”, “photos_btn”, “contact_btn”.

5. On the “tabs” layer, click on the first frame, go to Properties Panel and under “Frame” type “home_selected”:

Now click on frame 5, 10, 15, 20, convert them to keyframes and under “Frame” type:

frame 5: “about_selected”
frame 10: “portfolio_selected”
frame 15: “photos_selected”
frame 20: “contact_selected”

6. Go back to “rectangle” layer and unlock it. Now click on frame 5, 10, 15, 20 and convert them to keyframes. Click on frame 5 and select the rectangle. Go to Properties Panel and under color select “Tint” and set it to 100%. Change the color to #BF7AC7:

Go to the other keyframes and do the same. On frame 10 set the “Tint” color to #6DB6F4, on frame 15 – #97C57E and on frame 20 – #CD846B.

7. Create a new layer called actions and click on frame 5, 10, 15, 20 and convert them to keyframes. On frames 1, 5, 10, 15, 20 open the Actions Panel and type “stop();”.
Go to the first frame again, open the Actions Panel and type the following block of code:

home_btn.addEventListener(MouseEvent.CLICK, homeSelected);
about_btn.addEventListener(MouseEvent.CLICK, aboutSelected);
pf_btn.addEventListener(MouseEvent.CLICK, portfolioSelected);
photos_btn.addEventListener(MouseEvent.CLICK, photosSelected);
contact_btn.addEventListener(MouseEvent.CLICK, contactSelected);

function homeSelected(e:MouseEvent):void{
	gotoAndPlay("home_selected");
}

function aboutSelected(e:MouseEvent):void{
	gotoAndPlay("about_selected");
}

function portfolioSelected(e:MouseEvent):void{
	gotoAndPlay("portfolio_selected");
}

function photosSelected(e:MouseEvent):void{
	gotoAndPlay("photos_selected");
}

function contactSelected(e:MouseEvent):void{
	gotoAndPlay("contact_selected");
}

Here is the final result:

Today I will show you how to create a nice flash application using the Slider component. This slider will be used to rotate and scale objects on the stage.

1. Open a new Flash document and save it under “slidercomponent.fla”.

2. Rename the first layer to “figures” and draw a rectangle and a pentagon.

3. Convert the two figures to Movie Clips with registration points center. Give the rectangle instance name “rect” and the pentagon – “pent”.

4. Create a new layer called “sliders”. Go to the Components by clicking Window -> Components. Drag two Slider components to the stage and position them under the figures. Give the first slider instance name “sliderrect” and the second – “sliderpent”.

5. Create a new layer called “txt fields” and create two dynamic text fields and place them under the sliders. Give the first text field instance name “angle_txt” and the second “scale_txt”. Don’t forget to embed the font you use:

6. Now, create a new layer called “actions” and open the actions panel.

//importing SliderEvent class
import fl.events.SliderEvent;

//adding event listener to the first slider
sliderrect.addEventListener(SliderEvent.CHANGE, rotateObject);
//setting slider's maximum value to 100
sliderrect.maximum = 100;
/*boolean value that indicates whether the SliderEvent.CHANGE event
	is dispatched continuously as the user moves the slider thumb*/
sliderrect.liveDragging = true;
//adding event listener to the second slider
sliderpent.addEventListener(SliderEvent.CHANGE, scaleObject);
//setting slider minimum value to 1 because we don't want our object to disappear
sliderpent.minimum = 1;
//setting default slider thumb's position
sliderpent.value = 5;
sliderpent.liveDragging = true;

function rotateObject(e:SliderEvent):void{
	/*we create a variable that stores slider's value (from 0 to 100) multiplied by 3.6
		so that the variable returns values from 0 to 360*/
	var rotVal:int = (sliderrect.value)*3.6;
	//setting rectangle's rotation
	rect.rotation = rotVal;
	//rotation info
	angle_txt.text = rotVal.toString();
}

function scaleObject(e:SliderEvent):void{
	//dividing event target value by 5 because we don't want too big figures
	pent.scaleX = e.target.value / 5;
	pent.scaleY = e.target.value / 5;
	//scale info
	scale_txt.text = (e.target.value / 5).toString();
}

That was all!

Here is the final result:

In this quick tutorial I will show you how to change the color of a Movie Clip using the Color Transform class and Math.random.

1. Open a new Flash CS3 document with size 400 x 100.
2. Create your logo on the stage. I made the Flashadvanced logo. Give it an instance name “logo_mc”.
3. Create a new layer called “button”. Take the rectangle tool and draw a rectangle for your button. Select it and convert it to Button symbol with instance name “change_btn”.
4. Now we move to ActionScript:

//we import transform classes
import flash.geom.ColorTransform;
import flash.geom.Transform;

//variable for the color value
var col:uint;
//creating a color transform object
var cTransform:ColorTransform = transform.colorTransform;

//when clicking the button we change the color
change_btn.addEventListener(MouseEvent.CLICK, changeColor);

function changeColor(e:MouseEvent):void{
	//random color value
	col = Math.random()*0xffffff;
	cTransform.color = col;
	logo_mc.transform.colorTransform = cTransform;
}

That was quick and easy, right?

This is the final result

In this tutorial I will show you how to create a nice image presentation using Flash CS3 and few lines of ActionScript 3 code.

First of all download the images for the tutorial by clicking here.

1. Now open a new Flash CS3 document with size 420 x 340. Set the frame rate to 16 fps.

2. Import all of the downloaded images by clicking File -> Import -> Import to Library. Drag “laptop.jpg” to the stage and align it to center. Convert it to Movie Clip, give it instance name “slideshowMC” and after that go to the new created movie clip. Click on frame 135 and insert frame. Lock the layer.

3. Create a new layer called “images”. Now, drag “pic1.jpg” to the stage and position it so that it covers the laptop’s screen. Break the image apart by selecting the image and then clicking Modify -> Break apart. Now, deselect the image and go to one of its corners.
Drag the image corners so that they match the laptop’s screen. See the image below:

If you are ready, select the image and convert it to Movie Clip. Now, go to frame 30 and convert it to keyframe. Go back to frame 1, select the image, go to Properties Panel and set the image alpha to 0%. Select a frame between 1 and 30 and create Motion Tween. Now, go to frame 35, convert it to keyframe, remove the image movie clip and drag the second image. Now repeat all previous steps. Do the same for the other images. Your timeline should look like this:

4. Go to the main stage. Create a new layer called “buttons”. Take the rectangle tool and draw a “stop” button. Give it an instance name “stopBtn”. I made this one:

You can take the Transform tool and rotate the button a little bit so it matches the laptop. Select the button and go to Modify -> Symbol -> Duplicate symbol to create a Play button. Change the text to “play” and give the button instance name “playBtn”.

5. Now we are ready to move to ActionScript. Create a new layer called “actions” and open the Actions panel.

//initially, we don't want to see Play button
playBtn.visible = false;
//positioning the buttons on the same X and Y values
stopBtn.x = playBtn.x;
stopBtn.y = playBtn.y;

//adding event listeners to the buttons
stopBtn.addEventListener(MouseEvent.CLICK, slideshowStop);
playBtn.addEventListener(MouseEvent.CLICK, slideshowPlay);

function slideshowStop(e:MouseEvent):void{
	//when clicking on stop button we stop the slideshow
	slideshowMC.gotoAndStop(1);
	//we hide stop button and show play button
	stopBtn.visible = false;
	playBtn.visible = true;
}

function slideshowPlay(e:MouseEvent):void{
	//when clicking on play button we stopplay the slideshow again
	slideshowMC.gotoAndPlay(2);
	//we hide the play button and show stop button again
	playBtn.visible = false;
	stopBtn.visible = true;
}

We are ready. I hope you liked it!

Now let’s see the final result