Checkbox component in Actionscript 3

In this tutorial you will learn how to use the checkbox component in Actionscript 3.0. A checkbox is a small box which displays a check mark when it has been clicked. Below I will show a simple example of how to use the checkbox component. I have used free stock images for this tutorial which are available from www.sxc.hu and the tweenLite plugin from greensock.com


Checkbox component in Actionscript 3

Step 1

Open a new Flash AS3 file.
Import the images you wish to use by selecting File > Import > Import to Stage. I have used an image of a monkey and a banana, but you can use whatever images you wish.




Step 2

Convert both of your images into movie clips (F8) and give them the following instance names accordingly: monkey_mc and banana_mc.


Step 3

Select Window > Components and drag two checkbox components onto the stage and place them below the images. Then give them the instance names: cb1 and cb2.




Step 4

On the timeline insert a new layer called “Actions”. Then open up the Actions panel and enter the following code:

//Import the tweenlite package.
import gs.TweenLite;

//Gives labels to the checkboxes.
cb1.label="Monkey";
cb2.label="Banana";

//Sets the initial transparency values of the movieclips.
monkey_mc.alpha=0.3;
banana_mc.alpha=0.3;

//Event listener for the checkboxes.
cb1.addEventListener(MouseEvent.CLICK, showMov);
cb2.addEventListener(MouseEvent.CLICK, showMov);

//Shows and hides the images.
function showMov(event:MouseEvent):void {
if (cb1.selected) {
TweenLite.to(monkey_mc, 1, {alpha:1});
} else {
TweenLite.to(monkey_mc, 1, {alpha:0.3});
}

if (cb2.selected) {
TweenLite.to(banana_mc, 1, {alpha:1});
} else {
TweenLite.to(banana_mc, 1, {alpha:0.3});
}
}

Step 5

Test your checkbox component Ctrl + Enter. Now trying selecting the checkboxes and you should notice the images fading in and out.



You should now be able to use the checkbox component in Actionscript 3.0.

Button components in Actionscript 3

In this tutorial you will learn how to use the button component in Actionscript 3.0. A button component is rectangular button which can be pushed with the mouse to perform actions. The button component voids you having to create you own custom button in Flash. Below I will show a simple example of how to use the button component.


Button components in Actionscript 3.0

Step 1

Open a new Flash AS3 file.
Select Windows > Components and drag two Button components on the stage. Then open up the component inspector (Windows > Component Inspector), and change the labels to ‘button 1’ and ‘button 2’ accordingly.




Step 2

Select each button in turn and give the following instance names respectively: button1_btn and button2_btn.




Step 3

On the timeline insert a new layer called ‘Actions’ then open up the Actions panel and enter the following code:

//hit1 & 2 boolean variables.
var hit1:Boolean=false;
var hit2:Boolean=false;

//Mouse click listeners for the buttons.
button1_btn.addEventListener(MouseEvent.CLICK, button1Click);
button2_btn.addEventListener(MouseEvent.CLICK, button2Click);

//Disables button when clicked and enables the other button.
function button1Click(event:MouseEvent):void {
hit1=true;
if (hit1) {
  button1_btn.enabled=false;
  button2_btn.enabled=true;
}
}

//Disables button when clicked and enables the other button.
function button2Click(event:MouseEvent):void {
hit2=true;
if (hit2) {
  button2_btn.enabled=false;
  button1_btn.enabled=true;
}
}

Step 4

Test your Button components Ctrl + Enter. Now try pressing the buttons and you should notice one of the button disabled when you click it.



You should now be able to use button components in Actionscript 3.0. Checkout part 2.

Demos of the Flash CS4 workspace

Over at the Flash Developer Connection at adobe.com you can find a collection of five video demos explaining the Flash CS4 workspace. These video demos are aimed at helping people understand and learn the new Flash workspace. I will briefly discuss each video demo in turn.

The first demo starts by discussing the workflow layouts and different Flash file types. Then the demo shows the general Flash CS4 workspace which consist of the stage, timeline and properties panel.

The second demo shows how to navigate and use the timeline in both the main timeline and inside a movie clips timeline.

The third demo explains the library panel, symbols and instances. The library panel basically holds objects for use on the stage. These objects are called symbols, the symbols or instances can be reused many times.

The fourth demo shows how to create simple motion tween animations with the new tweening feature in Flash CS4.

The final demo discusses buttons, Actionscript and interactivity. You will learn how to create a simple button and add Actionscript to the button.

Freebies at flabell

Over flabell.com you can find a collection of Flash component freebies for both AS2 and AS3. There are currently 11 freebies which you can download. Of course, there are also Flash components you can pay for, if you want. The list of freebies includes:

XML Banner Rotator – This is a rotating banner which displays a number of different images. There are 35 customizable options available.

Simple XML Quiz – A simple quiz in XML, the result of the quiz are store in a text file. You can have as many questions and answers in the quiz as you wish.

Magnifying glass effect – This is a magnifying glass effect which magnify an area of the image you choose.

Countdown timer – This countdown timer display the time left until an event happens.

XML Survey – Similar to the simply XML quiz as shown above.

360 view image rotator – This rotates an image 360 degree either using play/pause or the scrubbers.

XML Image slideshow – This is basically a XML image slideshow.

XML voting poll - This is a XML voting poll, you can have an unlimited amount of answers as well as customize the size and height.

Full text search component – This is a search component where you can search for image and text. The component is also fully customizable.

Simple Flash MP3 player – This is a simply MP3 player with four functions including play, pause, volume and a sound visualiser.

XML Image Gallery – This is an interactive Flash XML gallery.

Radio button component in Actionscript 3

In this tutorial I will teach you how to use the radio component in Actionscript 3.0. I have created a simple quiz which uses the radio components, but you could also create a form if you wish. Some knowledge of basic buttons is also need for this tutorial.


Radio button component in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select the Text tool with static text and type your message on the stage. I will be creating a quiz, so I have typed the following question: “What is the capital of Great Britain?” You can type whatever question you wish.


Step 2

Drag four radio components from the components window by selecting Window > Components and place the components beneath each other on the stage. Then drag a button component on the stage as show below. You can alternatively create your own button if you wish.




Step 3

Select Window > Component Inspector to open up the component inspector and change the labels of each of the radio buttons, and also change the label for the button.


Step 4

Select each radio button and give the following instance name accordingly: radiobutton1, radiobutton2, radiobutton3 and radiobutton4. Then give the button the following instance name: showAnswer_btn


Step 5

Select the Text tool with dynamic text and drag a text field below the ‘Show Answer’ button as show below. Then give the dynamic text field the instance name: ‘result_txt’




Step 6

On the timeline create a new layer called ‘Actions’ then open up the Actions panel (F9) and enter the following code:

//import the nessary controls for the radio button.
import fl.controls.RadioButtonGroup;

//This sets a group nanme for the radio button instances.
var myradioGroup:RadioButtonGroup=new RadioButtonGroup("Group 1");

//This assigns the radio button instances to the radio group.
radiobutton1.group=myradioGroup;
radiobutton2.group=myradioGroup;
radiobutton3.group=myradioGroup;
radiobutton4.group=myradioGroup;

//Mouse click event listener added to the button.
showAnswer_btn.addEventListener(MouseEvent.CLICK, showResult);

//This function displays the appropriate answer when the button is clicked.
function showResult(event:MouseEvent):void {
   switch (myradioGroup.selection) {
       case radiobutton1 :
           result_txt.text="Wrong answer";
           break;
       case radiobutton2 :
           result_txt.text="Correct answer";
           break;
       case radiobutton3 :
           result_txt.text="Wrong answer";
           break;
       case radiobutton4 :
           result_txt.text="Wrong answer";
           break;
   }
}

Step 7

Test your quiz Ctrl + Enter. Now try choosing different values from the radio buttons and hitting the show answer button.



You should now be able to use the Radio button component in Actionscript 3.0.

Combo box component in Actionscript 3

In this tutorial you will learn how to use the Combo box component with Actionscript 3.0. I have created a simple example using the combo box which demonstrates how it works. In my example I have used four free stock images of different drinks. You can find these stock images at www.sxc.hu.


Combo box component in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select the text tool with static text and type the following message on the stage “What is your favourite drink?” I have used Verdana font type, but you can use whatever font type you wish.


Step 2

Import all your images into the library by File > Import > Import to Library. Then on the menu bar select Insert > New Symbol and give the symbol an appropriate name, choose movie clip and click ok.


Step 3

Now that you are inside the movie clip, on the timeline create three layers as shown below. The drinks layer will contain all the images of the various drinks; the labels layer will contain the labels and names of the various drinks; and the actions layer will contain the actions.



Step 4

Select the drinks layer on the timeline and create three key frames (F6) on the 10th, 20th and 30th frames. Then repeat this for the labels layer, but add the following labels into the frames as shown below.




Step 5

On the drinks layer drag the appropriate drink from the library onto the correct key frame. So, on the 1st key frame you drag the image of the ‘Tea’ onto the stage, and on the 10th key frame you drag the image of the ‘Beer’ onto the stage.




Step 6

On the ‘Actions’ layer select the first frame and hit F9 and add the following code in the actions panel.

stop();


Step 7

Return to the main timeline and select Window > Components and drag the ComboBox component onto the stage. Then select Window > Component Inspector and double click on the ‘dataProvider’ value. Click on the black plus icon to add a new value to the ComboBox. Add all the values you need in the ComboBox and then click ok.




Step 8

Give your ComboBox the instance name ‘my_comboBox’ and give your drinks movie clip the instance name ‘drinks_mc’.


Step 9

On the timeline create a new layer called ‘Actions’ then open up the Actions panel and enter the following code:

//Adds the change event to the Combo Box.
my_comboBox.addEventListener(Event.CHANGE, selectDrink);

//This function stops at the appropriate drink when the Combo Box
//value is selected
function selectDrink(event:Event):void{
   drinks_mc.gotoAndStop(my_comboBox.value);
}

Step 10

Test your movie clip Ctrl + Enter. Now try changing the values in the Combo box and you should notice the image change as well.



You should now be able to use the Combo box component in Actionscript 3.0.

Display time in Actionscript 3

In this tutorial you will learn how to display the time in Actionscript 3.0. This is an update from the previous AS2 version. The code in this tutorial is very similar to the previous version, only minor adjustments are needed. Displaying the time uses the Date class which represents the time and date information. I have created this tutorial in Flash CS4, but it should work fine in CS3.


Display time in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select the text tool with dynamic text and drag a dynamic text field on the stage as shown below:



Select the dynamic text field then choose the ‘Character Embedding’ and select Lowercase, Numerals and Punctuation.


Step 2

Give your dynamic text field the instance name ‘theTime’ like below:




Step 3

On the timeline create a new layer called ‘Actions’. Then select the first frame and hit F9 to open up the actions panel and enter the following code:

//Adds the enter frame event to the dynamic text field.
theTime.addEventListener(Event.ENTER_FRAME,showTime);

function showTime(event:Event):void {
//Create a new instance of the date class.
var myTime:Date = new Date();
//This returns the seconds, minutes and the hour.
var theSeconds=myTime.getSeconds();
var theMinutes=myTime.getMinutes();
var theHours=myTime.getHours();
var ampm:String;

//Displays am/pm depending on the current hour.
if (theHours>=12) {
     ampm="pm";
} else {
     ampm="am";
}
//This subtracts 12 from the hour when it greater than 13.
if (theHours>=13) {
    theHours=theHours-12;
}
//Adds '0' if there is only one digit.
if (String(theMinutes).length == 1) {    
    theMinutes="0"+theMinutes; 
} 
if (String(theSeconds).length == 1) {     
   theSeconds="0"+theSeconds; 
} 
 //Displays the time in the dynamic text field. 
 theTime.text =theHours+":"+theMinutes+":"+theSeconds+" "+ampm;
} 

Step 4

Test the movie clip Ctrl + Enter. You should now have a time display in Actionscript 3.0.

Change movie clip colour in Actionscript 3

In this Flash tutorial you will learn how to change the colour of a movie clip in Actionscript 3.0 using the ColorTransform class. A colour picker component will be used to change the colour of the movie clip. Some knowledge of basic buttons will also be needed for this tutorial.


Change movie clip colour in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select the Rectangle Tool and drag a rectangle shape on the stage like below. Make sure your rectangle has no stroke.




Step 2

Convert your rectangle shape into a movie clip (F8), and then give the instance name: rectangle_mc.




Step 3

Select Window > Components and drag a ‘button’ and ‘ColorPicker’ components onto the stage.




Give the following instance name to the components accordingly: ‘change_btn’ and ‘colorPicker’. I have also changed the button label to: Change colour.


Step 4

On the timeline create a new layer called Actions. Then select the first frame and hit F9 to open up the actions panel and enter the following code:

//Creates a new instance of the ColorTrasform class.
var myColorTransform:ColorTransform=transform.colorTransform;

change_btn.addEventListener(MouseEvent.CLICK, changeColour);

function changeColour(event:MouseEvent):void {

//An instance of selected colour from the colour picker.
var theColor:uint=colorPicker.selectedColor;

//Sets the new colour from the colour picker.
myColorTransform.color=theColor;

//Apply the colour changes to the movie clip.
rectangle_mc.transform.colorTransform=myColorTransform;

}

Step 5

Test your movie clip Ctrl + Enter. Now try changing the colour of the move clip by selecting a colour from the colour picker, and clicking the change button.



You should now be able to change the colour of a movie clip in Actionscript 3.0.

Install extension in Flash CS4

Flash extensions are plug-ins that adds extra capabilities and features to Flash. To install the extensions you will need the Adobe Extension manager which usually comes installed with Flash. If you do not have the Extension manager then visit adobe.com and download it. You also need to make sure you have the corresponding version of the Flash with the extension manager.

Below I will show you how to install extension for Flash CS4.


Step 1

Open up a new Flash file. Then select Help > Manage Extensions which should open up the Extension manager. You could have alternatively directly opened up the extension manager from start menu.




Step 2

Select the ‘Flash CS4’ from the product list on the left side of the extension manager.




Step 3

Select the ‘Install’ button on the menu bar, or you can alternatively choose File > Install Extension. You then need to locate the mxp file and click ok.




Step 4

Hit the ‘Accept’ button when the Extension disclaimer window appears. You then need to restart Flash CS4. The extensions will be installed when you have restarted.

Recommended books for learning AS3

I have provided a list of books for learning Actionscript 3.0. These books are suitable for beginners and advanced users of Actionscript. If you are completely new to Actionscript 3.0 then I recommend the first three books in the following list below.


Learning ActionScript 3.0 (A Beginner's Guide) by Rich Shupe and Zevan Rosser

This is a good book for people who are new to programming in Actionscript 3.0. The book is well organised and fully illustrated in colour. An addition feature of this book is that it slowly transitions from simple programming into more advanced Object-Oriented programming. Overall, this is a great resource to start learning Actionscript 3.0.


Essential ActionScript 3.0 by Colin Moock

This book covers Actionscript 3.0 in more depth from the Learning Actionscript 3.0 book, and is very clearly written. If you already have some knowledge of Actionscript then this book is for you. Although it is also suitable for beginners as it is written in away which assumes the reader has no prior knowledge to Actionscript.


Object-Oriented ActionScript 3.0 by Todd Yard, Peter Elst, Sas Jacobs

This book is for experienced Actionscript users. The book starts with a comprehensive introduction into Actionscript and Object oriented programming. Then the book moves onto design patterns and interfaces which allow you to design and implement applications in Actionscript 3.0.


Actionscript 3.0 Game programming university by Gary Rosenzweig

This book is great if you are interested in programming games in Actionscript 3.0. The book starts with a small introduction into Actionscipt 3.0, and then lead onto a variety of different games. Overall this book is well written and clearly explained.

Remove unused library items in Flash CS4

This is a quick tip for removing unused library items in Flash CS4. It is quite common for many library items to be used especially when you are developing large projects. If you have lots of unused library items it may be time consuming to locate the actual item you need. Below I will show a quick method of removing unused library items.

Firstly, you need to open up the Library Panel (Ctrl + L). At the top of the library panel select the drop down option as shown below.



Once you have selected the drop down option, you should see the following drop down menu.



Choose the ‘Select Unused Items’ option. This will highlight all the unused items in the library panel. Now you can simply hit the delete key which will remove all the unused items.

Memory usage in AS3

Over at pixelbreaker.com I found a useful piece of code which displays the memory used by the Flash Player. Only two lines of code are needed for displaying the memory. The System.totalMemory property is used to calculate the how much memory is being used by the computer. This code can be very useful with large Flash projects where many instances are being used. You can use this code to optimise the areas of your project which are take up too much memory.

I have also found two more useful memory monitoring tools from chargedweb.com which are called: ResouceMonitor and Cache. These two tools are both Actionscript 3.0 Classes. The ResourceMonitor class monitors the resource usage of the ram, cpu, and frame rate. While the Cache class monitors the memory and forces cleaning. You can define a usage limit and the Cache class will clear the memory when it has reached the limit.

For more information on memory usage checkout an article written by gskinner where he discusses Actionscript 3.0 resource management.

Keyboard controls in AS3 part 2

I previously wrote a post on keyboard controls in AS3 which allowed you to move an object using the keyboard keys. In that tutorial the object could not be moved simultaneously to two directions. For example, moving an object in the up and right directions.

In this tutorial I will be show you how move an object simultaneously in two directions using the keyboard keys. This is achieved by testing the keyboard keys separately, instead of as a whole. Be sure you have attempted the previous tutorial as more code will be added in this one.


Keyboard controls in AS3 part 2

Step 1

Open up your keyboard controls file.
On the timeline locate the ‘Actions’ layers then open up the actions panel and enter the following code:

//1.
var leftArrow:Boolean=false;
var rightArrow:Boolean=false;
var upArrow:Boolean=false;
var downArrow:Boolean=false;

//2.
stage.addEventListener(KeyboardEvent.KEY_UP, nokeyHit);
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyHit);
stage.addEventListener(Event.ENTER_FRAME, moveObject);

//3.
function keyHit(event:KeyboardEvent):void {
switch (event.keyCode) {
case Keyboard.RIGHT :
rightArrow=true;
break;
case Keyboard.LEFT :
leftArrow=true;
break;
case Keyboard.UP :
upArrow=true;
break;
case Keyboard.DOWN :
downArrow=true;
break;
}
}


//4.
function nokeyHit(event:KeyboardEvent):void {
switch (event.keyCode) {
case Keyboard.RIGHT :
rightArrow=false;
break;
case Keyboard.LEFT :
leftArrow=false;
break;
case Keyboard.UP :
upArrow=false;
break;
case Keyboard.DOWN :
downArrow=false;
break;
}
}

//5.
function moveObject(event:Event):void {
var speed:Number=5;
if (leftArrow) {
lemon_mc.x-=speed;
}
if (rightArrow) {
lemon_mc.x+=speed;
}
if (upArrow) {
lemon_mc.y-=speed;
}
if (downArrow) {
lemon_mc.y+=speed;
}
}

Code:
1. This sets the arrow variables initially to false.
2. Two more listeners are added from the previous tutorial. The key up and key down listener detect when the keyboard key are up or down. The enter frame listener deals with the movement of the object.
3. This function detects when the keyboard keys have been pressed and sets the arrow variable to true.
4. This function detect when the keyboard key have been released and sets the arrow variable to false.
5. This function moves the object 5 pixels when the keys have been pressed. This value can easily be changed.


Step 2

Test your movie clip Ctrl + Enter. You should now be able to move the object simultaneously in two directions. Try using two keyboard arrows to move the object. Obviously, if you have both the: up & down, and left & right key pressed, the object won’t move.



If you wish to limit the stage boundaries of the object then checkout this tutorial, and if you want to use the Key.isDown() method from AS2 to move the object, checkout this tutorial.

Change Frame rate in Actionscript 3

In Actionscript 2 it wasn’t possible to change the frame rate directly at runtime, but now in Actionscript 3 you can change the frame rate of Flash files. The frame rate is the frames per second of the loaded SWF, so the higher the frame rate the faster the SWF will run.

The code for changing the frame rate is very simply and only requires one line of code. Below is the code for the changing the frame rate.

stage.frameRate = ‘yournumber’

Below is an example of changing the frame rate using a simple animation of a moving ball across the stage area.


Change Frame rate in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select the Oval tool and create a simple circle on the stage like below, then place the circle shape at the left edge of the stage.




Step 2

Convert your circle into a movie clip (F8) and give the following instance name: circle_mc




Step 3

On the timeline insert a key frame (F5) at frame 50, and then right click anywhere in between the 1st and 50th frame and select ‘Motion Tween’.

Select the 50th frame and drag the ball movie clip to the right side of the stage.




Step 4

On the timeline create a new layer called buttons. This layer will contain the buttons which will increase and decrease frame rate. Select Window > Components and drag two button components onto the stage. Then change the button labels to ‘decrease’ and ‘increase’.

Give your buttons the following instance name accordingly: decrease_btn and increase_btn.


Step 5

On the time create a new layer called ‘display FR’. This layer will contain a dynamic text box which will display the frames rate.

Select the text tool with dynamic text and drag and text box on the stage like below:



Give your dynamic text box the instance name: showFR_txt.


Step 6

On the time create a new layer called ‘Actions’. Select the first frame and hit F9 to open up the actions panel and enter the following code:

//Event listeners for the buttons with the mouse click event, and
//an event listener on the stage with the enter frame event.
decrease_btn.addEventListener(MouseEvent.CLICK, decreaseFR);
increase_btn.addEventListener(MouseEvent.CLICK, increaseFR);
stage.addEventListener(Event.ENTER_FRAME, showFR);

//Displays the current frame rate on the dynamic text box.
function showFR(event:Event):void {
 showFR_txt.text=String(stage.frameRate)+"FPS";
}

//Increase the frame rate by 1fps. The frame rate is limited to 80.
function increaseFR(event:MouseEvent):void {
 if (stage.frameRate < 80) {
  stage.frameRate +=1;
 }
}
//Decrease the frame rate by 1fps. 
function decreaseFR(event:MouseEvent):void {
 if (stage.frameRate > 1) {
  stage.frameRate -=1;
 }
}

Step 7

Test your movie clip Ctrl + enter. Now press the increase and decrease buttons and you should see the frame rate go up and down.



You should now be able to change the frame rate in Actionscript 3.

Drawing lines in Actionscript 3 – part 3

This is a continuation from the previous Drawing lines in Actionscript 3 – part 2. This time you will be able to change the line thickness of the drawn lines using the slider component in Flash. So, this allows you to increase the lines by dragging the slider. Make sure you have completed the previous tutorial before attempting this one, as more code will be added from the Drawing line file.


Drawing lines in Actionscript 3 – part 3

Step 1

Open your Drawing line file.
Select Window > Components from the menu bar, and drag the slider component onto the stage. I placed my slider component in between the colour picker and the clear button.




Step 2

Select the slider component and give the following instance name ‘theSlider’ like below:




Step 3

On the timeline locate the ‘Actions’ layer then select the first frame and hit F9 to open up the Actions panel. Now add the following code shown in red colour. I have left out some of the code the previous tutorial.

//1.
theSlider.minimum=3;
theSlider.maximum=20;

//2.
function MouseDown(event:MouseEvent):void {
var theColor:Number=colorPicker.selectedColor;
var theLineThickness:uint=theSlider.value;
drawingLine.graphics.lineStyle(theLineThickness,theColor);
drawingLine.graphics.moveTo(mouseX, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);

}

Code:
1. This sets the minimum and maximum values of the slider. I have set the minimum to 3 and the maximum to 20, but you can change this to whatever you wish.
2. This stores the values of slider, so when the user drags the slider the thickness of the line will be updated.


Step 4

You should now be able to change the line thickness using the slider component, but when you use the slider you will notice that it will not work properly. As every time you drag the slider it will be cover in drawn lines. To fix this, you need to enter the following lines of code into the ‘Actions’ layer.

//1.
theSlider.addEventListener(MouseEvent.MOUSE_OVER, stopMouseMove);
theSlider.addEventListener(MouseEvent.MOUSE_OUT, startMouseMove);

//2.
function stopMouseMove(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
}

//3.
function startMouseMove(event:MouseEvent):void {
stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
}

Code:
1. This is two event listeners for the slider component with the mouse over and mouse out events.
2. This function removes the ‘mouse_down’ event listener from the stage when the mouse is over the slider which prevents any lines from being drawn on the slider.
3. This function adds the ‘mouse_down’ event listener to the stage when the mouse is off the slider.


Step 5

Test your drawing application Ctrl + Enter. Now try change the thickness of the line by dragging the slider.

Drawing lines in Actionscript 3 - part 2

This is a continuation of the previous Drawing lines in AS3 tutorial. This time you will be able to change the colour of the lines using the colour picker component in Flash. Be sure you have completed the previous tutorial before attempting this one, as additional code will be added to the Drawing line file.


Drawing lines in Actionscript 3 - part 2

Step 1

Open your Drawing line file.
Select Window > Component and you should see the following component window appear.



Drag the colour picker component onto the stage. I placed my colour picker at the bottom left side of the stage, but you can place your picker wherever you want.


Step 2

Select the colour component and give the following instance name ‘colourPicker’ as shown below:




Step 3

On the timeline select the ‘Actions’ layer then choose the first frame and hit F9 to open up the Actions panel. Now enter the following code shown in red colour. Most of the code should look familiar to you. Some of the code from the previous tutorial has been left out.

function MouseDown(event:MouseEvent):void{
 var theColor:Number = colorPicker.selectedColor; 
 drawingLine.graphics.lineStyle(3,theColor);
 drawingLine.graphics.moveTo(mouseX, mouseY);
 stage.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}

Code:
The code in the red colour stores the current colour in the palette and changes to the selected colour when the user chooses a different colour from the colour palette.


Step 4

Test your Drawing lines application Ctrl + Enter. Now try changing the colours of the lines by using the colour picker.



Checkout Drawing lines in AS3 part 3 where you will learn how to change the line thickness.