Web Design Tutorials: Photoshop, HTML, Flash, PHP

Flash Tutorial – Create a Custom Radio Button from Scratch Using Flash

Posted on Jun 24th, 2010 in Flash Tutorials | 0 comments

Step 1: Overview

From Wikipedia:

A radio button or option button is a type of graphical user interface element that allows the user to choose only one of a predefined set of options.

In this tutorial, we will create a custom Radio Button from scratch using Flash and ActionScript 3. Read on!

Step 2: Set Up Flash

Launch Flash and create a new document. Set the stage size to 320x190px, #181818 for the color, and the frame rate to 24fps.

(You can see some examples of Flash radio buttons in the “Match” box, above.)

Step 3: Interface

This is the interface we’ll use: a simple background with a title, some static textfields used as user feedback, a working radio button and two static demos. This will show you how can you enable or disable the radio button.

There is also a dynamic textfield (which says [Disabled] in the image) that will be modified by the working radio button.

Step 4: Background

Select the Rectangle Tool (R) and create a 320×40 px rectangle, place it on top of the stage and fill with this radial gradient: #D45C10 to #B43B02.

Now we need something to separate the sections.

With the same tool, create a 300×1 px rectangle and fill it with another gradient fill: #737173 to #181818. Duplicate this shape and place them in the center.

Step 5: Title

Select the Text Tool (T) and set this format in the Properties Panel: Helvetica Bold, 20pt, #FFFFFF. (If you’re on Windows, you probably won’t have the Helvetica font; use Arial instead.) Type a title and place the textfield in the top-left corner of the screen.

To get the letterpress effect, just duplicate (Cmd + D) the textfield, change its color to #8C2D00, move it 1px up and go to Modify > Arrange > Send Backward.

You should end with the following effect.

Step 6: User Feedback

We’ll create a series of static Textfields that will tell the user what every radio button represents. There are two types of textfields; a title and a description.

This is the format for the title: Myriad Pro Regular, 20pt, #DDDDDD.

For the descriptions we use: Myriad Pro Regular, 14pt, #BBBBBB.

Step 7: Radio Button Action

The Active Radio Button will do something when activated, for this example, a dynamic textfield will be changed showing the current status of the button.

Using the Text Tool (T), create a Dynamic Textfield and set statusField as its instance name, then place the textfield as shown in the next image:

As the button will be disabled by default, you can write [Disabled] in the textfield.

Step 8: Radio Button

Next, we’ll create the Radio Button.

It has three states:

  • Normal: In this state the button works normally.
  • Enabled: This state is shown when the user clicks on the button
  • Disabled: In this state, the button can’t be enabled.

Step 9: Background

Select the Oval Tool (O) and create a 128x128px circle (it doesn’t really matter the size you create it since you’ll be able to scale it, only for reference) with a 1px stroke color #AAAAAA and a #F7F3F7 to #BDBEBD gradient fill.

Step 10: Enabled Area

Now we’ll create the area that will change when the radio button is enabled.

Duplicate (Cmd+D) the background shape and resize it to 64x64px, change the stroke color to a #EEEEEE, #AAAAAA linear gradient and the fill to #C3C6C3, #B5B2B5.

Convert the shapes to MovieClip and double-click it to enter edit mode.

Create a new Frame (F6) and change the smaller circle fill to #D45C10, #B43B02.

This will be the frame shown when enabled.

Step 11: Disabled

This graphic will be shown when the radio button is disabled.

Create a new Frame (F6) and delete the center shape. Change the background gradient to #D4D2D4, #A2A3A2.

This will make the background darker and without the part that changes when enabled.

Step 12: Instance Names

Three Radio Buttons are placed in stage, one for each state.

Set the instance names as their section titles suggest, except for the enabled section, as that is an exclusive ActionScript keyword. Name that button enabledBox.

Step 13: Document Class

We’ll make use of the Document Class in this tutorial, if you don’t know how to use it or are a bit confused please read this QuickTip.

Step 14: New ActionScript 3 Class

Create a new ActionScript 3.0 Class and save it as Main.as in your class folder.

Step 15: Package

The package keyword allows you to organize your code into groups that can be imported by other scripts. It’s recommended to name them starting with a lowercase letter using intercaps for subsequent words for example: myClasses. It’s also common to name them using your company’s website: com.mycompany.classesType.myClass.

In this example, we’re using a single class, so there isn’t really a need to create a classes folder.

1 package
2 {

Step 16: Import Directive

These are the classes we’ll need to import for our class to work, the import directive makes externally defined classes and packages available to your code.

1 import flash.display.Sprite;
2 import flash.events.MouseEvent;

Step 17: Declare and Extend the Class

Here we declare the class using the class definition keyword followed by the name that we want for the class, remember that you have to save the file using this name.

The extends keyword defines a class that is a subclass of another class. The subclass inherits all the methods, properties and functions, that way we can use them in our class.

1 public class Main extends Sprite
2 {

Step 18: Constructor

The constructor is a function that runs when an object is created from a class, this code is the first to execute when you make an instance of an object or runs using the Document Class.

1 public function Main():void
2 {

Step 19: Set Radio Button State

Here we control the states of the three radio buttons in stage.

The first one will operate normally. The second one will be inactive and the last one will show as enabled.

1 active.stop();
2 inactive.gotoAndStop(3);
3 enabledBox.gotoAndStop(2);

Step 20: Handle Mouse Interaction

This code tells the Active radio button to listen for mouse events, and every time it detects a MOUSE_UP MouseEvent (this is when the button of the mouse is released), launch the changeState() function.

1 active.addEventListener(MouseEvent.MOUSE_UP, changeState);

Step 21: Perform an Action

This function will run every time the user clicks the radio button.

It checks if the button is currently enabled or disabled and performs a determined action in each of the cases. In this example, it changes the value of the dynamic textfield.

01 private function changeState(e:MouseEvent):void
02 {
03 if (e.target.currentFrame == 1)
04 {
05 e.target.gotoAndStop(2);
06 statusField.text = "[Enabled]"; //This is the action to perform
07 }
08 else
09 {
10 e.target.gotoAndStop(1);
11 statusField.text = "[Disabled]"; //This is the action to perform
12 }
13 }

Step 22: Full Code

If you are having trouble during any of these steps, remember that you can access the source files at the top of this tutorial. You can also take a look at the full ActionScript code to compare with yours:

01 package
02 {
03 import flash.display.Sprite;
04 import flash.events.MouseEvent;
05
06 public class Main extends Sprite
07 {
08 public function Main():void
09 {
10 active.stop();
11 inactive.gotoAndStop(3);
12 enabledBox.gotoAndStop(2);
13 active.addEventListener(MouseEvent.MOUSE_UP, changeState);
14 }
15
16 private function changeState(e:MouseEvent):void
17 {
18 if (e.target.currentFrame == 1)
19 {
20 e.target.gotoAndStop(2);
21 statusField.text = "[Enabled]";
22 }
23 else
24 {
25 e.target.gotoAndStop(1);
26 statusField.text = "[Disabled]";
27 }
28 }
29 }
30 }

Conclusion

You have created a fully customizable Radio Button using these easy steps, use them to make your own Radio Buttons!

Next step: why not combine this with André Cavallari’s tutorial about creating Flash components to turn this into an object you could use in any project?

And a challenge for you: you’ve customized the appearance and made the toggle work; try putting five radio buttons on the stage and writing code to only allow one to be enabled at any time.

I hope you liked this tutorial, thank you for reading!

you may also like:

No Responses to “Flash Tutorial – Create a Custom Radio Button from Scratch Using Flash”

  1. avatar Flash Tutorial - Black And White Flash Banner | ink9 blog | Web Design Tutorials says:
    October 11, 2010 at 17:41

    [...] a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document [...]

Leave a Reply

Powered by WordPress | Designed by Elegant Themes