Flash learns to create radio buttons from scratch

We will use the drawing tool and the timeline in ActionScript 3.0 to make a nice radio button with mouse events.

Final Preview

Let's take a look at the final work:

First step: Overview

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

In this tutorial, we'll create a traditional radio button.

Step two: Set up flash

Open Flash to create a new document with the stage size set to 320*190, the color is #181818 and the frame rate is 24fps.

Step Three: interface

This is the interface we're going to use: a simple background with headings, some text to interact with the user, a radio button that works, and two static button samples.

There is also a dynamic text (called [Disabled] in the picture) that can be modified by a working button.

Fourth Step: Background

Select the Rectangle tool and draw a 320x40 px size rectangle, place it at the top of the stage, and fill its color with a radial #D45C10到 #B43B02的过渡.

What you need now is to divide it into several parts.

Or with a rectangular tool, draw a 300x1 px size rectangle to fill with another color: #737173到 #181818. Copy it and put it in the picture below.

Fifth Step: Title

Select the Text tool to set the Font property to Helvetica Bold, 20pt, #FFFFFF. (If you are using Windows, you may not have Helvetica fonts, instead of Arial) enter the caption and place it in the upper-left corner of the screen.

To get a printing effect, you can copy it and change the color to #8c2d00 to move it up 1px, perform the Modify > Arrange > Move to the bottom. Can get the following effect.

Sixth Step: User Feedback

We will create a series of static text to tell the user what each button means. There are two kinds of text: the title text and the descriptive text.

The properties of the caption text are: Myriad Pro Regular, 20pt, #DDDDDD.

The properties of the description text are: Myriad Pro Regular, 14pt, #BBBBBB.

Seventh Step: Radio button action

A button that works when used will respond, for example, when dynamic text changes to show the status of the current button.

Using the Text tool, create a dynamic text, set its instance name to Statusfield, and then place it in the following figure:

Write [Disabled] in the text

Eighth Step: Button

Below we will draw the button.

It has three states:

Normal: The button works fine in this state

Enabled: This state is displayed when the user clicks the button

Disabled: The button cannot be used when this state is in use

Nineth Step: Background

Select the Ellipse tool to draw a 128x128px circle (regardless of the size you are going to create, this is for reference only), line 1px, color #aaaaaa, fill color for #F7F3F7到 #bdbebd.

Step Tenth: Enable status

When the button is enabled, the area that we are going to create will change.

Copy the background, reset its size to 64x64px, line color to #EEEEEE, #AAAAAA linear transition, fill color to #c3c6c3, #B5B2B5过渡.

Turn it into a symbol and double-click into its editing interface.

Add a frame (F6) and change the small circle fill color to #d45c10, #B43B02.

This frame will display the button enabled state.

11th Step: Disable Status

The following shapes will be displayed when the button is disabled.

Add a frame (F6) and delete the middle circle. Change the background color to #D4D2D4, #A2A3A2.

This darkens the background and loses the part that can change when enabled.

12th Step: Instance Name

The three buttons will be placed behind each state individually.

Set its instance name as shown in the following figure

13th Step: Class file

In this tutorial we will use the class file.

14th Step: New ActionScript 3 class

Create a new ActionScript 3.0 class file and save it in Main.as in the class file.

15th Step: Code

The following are all the code used

Package

{

Import Flash.display.Sprite;

Import flash.events.MouseEvent;

public class Main extends Sprite

{

Public Function Main (): void

{

Active.stop ();

Inactive.gotoandstop (3);

Enabledbox.gotoandstop (2);

Active.addeventlistener (mouseevent.mouse_up, changestate);

}

Private Function Changestate (e:mouseevent): void

{

if (E.target.currentframe = 1)

{

E.target.gotoandstop (2);

Statusfield.text = "[Enabled]";

}

Else

{

E.target.gotoandstop (1);

Statusfield.text = "[Disabled]";

}

}

}

}

General statement

In a few simple steps, you've created a complete traditional radio button that you can use to make your own buttons.