What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

Adobe Flash Help & Tutorials

 Back to Topics

 

  How to Create an Application in Flash

Basic Tasks: Create an Application

Set up your workspace

Copy input and dynamic text fields

Name text fields

Add and name a Button component

Declare variables and values for the prices

Specify values for input text fields

Write a function

Write an event handler for the component

Test your application

Summary

 

Basic Tasks: Create an Application

TOP

The application that you'll create in this lesson lets users view the cost of selecting multiple products. A Calculate button then adds the total cost.

 

Set up your workspace

#TOP

First, you'll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons.

  1. To open your start file, in Flash select File > Open and navigate to the file:

    • In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\Create an Application and double-click calculator_start.fla.

    • On the Macintosh, browse to Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/Create an Application and double-click calculator_start.fla.

    NOTE The Create an Application folder contains completed versions of the tutorial FLA files for your reference.

  2. Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file.

    NOTE As you complete this lesson, remember to save your work frequently.

  3. Select Window > Workspace Layout > Default to set up your workspace for taking lessons.

    The form already includes an input text field in the QTY column and a dynamic text field in the Price column. You'll copy the text fields for the Shocks and Cover rows.

     

Copy input and dynamic text fields

TOP

You'll use input text fields to create a form.

  1. Click the input text field where users enter the quantity of CD players. Press Alt and drag the copy of the field down to the Shocks QTY area.

  2. Alt-click the input text field that you just dragged; then drag the new copy of the field to the Cover QTY area.

  3. Alt-click the dynamic text field for the CD player's price; then drag the copy of the field to the Shocks price area.

  4. Alt-click the field that you just dragged; then drag the copy to the Cover price area.

 

Name text fields

TOP

Before you can specify values for the text fields in ActionScript, you first need to give each text field an instance name in the Property inspector. Appending the instance name with "txt" identifies the object as a text object.

  1. Click the top input text field in the QTY column. In the Instance Name text box of the Property inspector (Window > Properties), type qty1_txt.

  2. Follow the previous procedure to name the middle and bottom input text fields qty2_txt and qty3_txt, respectively.

  3. Click the top dynamic text field in the Price column. In the Instance Name text box of the Property inspector, type price1_txt.

  4. Follow the previous procedure to name the middle and bottom text fields in the column price2_txt and price3_txt, respectively.

 

Add and name a Button component

TOP

Components are movie clips that offer an easy way of adding advanced functionality to your document without having to know advanced ActionScript. You'll use the Button component to create a Calculate button that totals prices. Because the component you're using is based onv ActionScript 2.0, you first need to configure your Publish Settings dialog box to ensure your Flash content plays as expected.

  1. Select File > Publish Settings.

  2. On the Flash tab of the Publish Settings dialog box, select ActionScript 2.0 in the ActionScript Version pop-up menu, if it's not already selected.

  3. In the Timeline, click the Components layer to select it.

  4. From the Components panel (Window > Components), drag the Button component to the Stage and place it over the Calculate guide.

  5. On the Parameters tab of the Property inspector, with the Button component selected, click the Button text on the Label row, and type Calculate. Then press Enter or Return.

    The text that you type in the Label text box is the text that appears on the component.

  6. In the Instance Name text box, enter calculate to provide the button with an instance name.

 

Declare variables and values for the prices

TOP

For your application to multiply the quantity of parts selected by the price of the part, you need to define a variable for each part in ActionScript. The value for the variable is the cost of the part.

  1. In the Timeline, click Frame 1 of the Actions layer and open the Actions panel (Window > Actions).

  2. In the Script pane, type the following:

    // Declare variables and values for car part prices.

    The parallel slashes (//) indicate that the text that follows is a comment. As a best practice, always add comments that offer an explanation of your ActionScript.

    NOTE As you take this lesson, you might find that you'd like to turn off code hints--the tooltips that prompt you with the correct ActionScript syntax. If so, you can turn off code hinting by clicking the pop-up menu in the upper-right corner of the Actions panel. Select Preferences, and then deselect Code Hints on the ActionScript tab.

  3. Press Enter (Windows) or Return (Macintosh) and type the following to indicate the cost of each part:

    var priceCD = 320;

    var priceShocks = 150;

    var priceCover = 125;

     

Specify values for input text fields

TOP

You must specify values for the input text fields. You'll use the values when you write ActionScript that multiplies the quantity and cost values.

  1. In the Script pane, with the insertion point after the text that reads 125;, press Enter (Windows) or Return (Macintosh) twice and type the following:

    //Set initial values for the quantity text fields.

  2. Press Enter or Return, and type the following:

    qty1_txt.text = 0;

    qty1_txt is the instance name that you gave the first input text field under the QTY column. The .text property defines the initial value in the text field, which you specify is 0.

  3. Press Enter or Return, and type the following two lines to set values of 0 for the other two QTY fields:

    qty2_txt.text = 0;

    qty3_txt.text = 0;

    When you finish, the ActionScript should appear as follows:

    //Set initial values for the quantity text fields.

    qty1_txt.text = 0;

    qty2_txt.text = 0;

    qty3_txt.text = 0;

     

Write a function

TOP

A function is a script that you can use repeatedly to perform a specific task. You can pass parameters to a function, and it can return a value. In this lesson, every time your user clicks the Calculate button, a function will run that multiplies data in the input text fields and returns values in the dynamic text fields. You'll write that function now.

  1. In the Script pane, with the insertion point after the ActionScript that reads qty3_txt.text = 0;, press Enter (Windows) or Return (Macintosh) twice and type the following comment:

    //Calculate quantity times price.

  2. Press Enter or Return and type the following to create a function that runs when the playhead enters Frame 1, where you're attaching the script:

    this.onEnterFrame = function (){

  3. Type the following ActionScript to specify how the function should multiply the values in the input text fields for the airplane:

    price1_txt.text = Number (qty1_txt.text)*Number (priceCD);

    price1_txt is the instance name that you gave to the top price input text field on the Stage.

    .text defines the text that should appear in the text field, which is the number of parts multiplied by the cost of the part: the $320 that you set as the value for the priceCD variable.

  4. Press Enter or Return, and type the following two lines:

    price2_txt.text = Number (qty2_txt.text)*Number (priceShocks);

    price3_txt.text = Number (qty3_txt.text)*Number (priceCover);

    };

    Your function should appear as follows:

    //Calculate quantity times price.

    this.onEnterFrame = function (){

    price1_txt.text = Number (qty1_txt.text)*Number (priceCD);

    price2_txt.text = Number (qty2_txt.text)*Number (priceShocks);

    price3_txt.text = Number (qty3_txt.text)*Number (priceCover);

    };

     

Write an event handler for the component

TOP

For your SWF file to react to events such as a mouse click, you can use event handlers--ActionScript associated with a particular object and event. You'll use an on() event handler for the Button component that calculates the total price when users click the button.

  1. On the Stage, click the Button component and go to the Actions panel.

    The tab at the bottom of the Actions panel, labeled Calculate, indicates that you're attaching the script directly to the selected object rather than to a frame.

  2. In the Script pane, type the following comment:

    //Calculates total price.

  3. After the comment, press Enter (Windows) or Return (Macintosh) and type the following to create a handler for the PushButton component that you placed on the Stage:

    on(click) {

    You just typed the start of the on() event handler. The (click) specifies that the event should occur when the user clicks the Calculate button.

    A Button component has its own Timeline. In the Timeline hierarchy, the component Timeline is a child of the main Timeline. To point to elements from the Button component Timeline to the main Timeline in this script, you use the code with (_parent).

  4. With the insertion point at the end of the line you just typed, press Enter or Return and type the following:

    with(_parent){

  5. Press Enter or Return and complete your handler by typing the following:

    priceTotal_txt.text = Number (price1_txt.text) + Number (price2_txt.text) + Number (price3_txt.text);

    }

    }

    When you finish, your script should appear as follows:

    on(click) {

    with(_parent){

    priceTotal_txt.text = Number (price1_txt.text) + Number (price2_txt.text) + Number (price3_txt.text);

    }

    }

The event handler that you typed specifies that the text in the priceTotal_txt field should be the sum of the values in the price1_txt, price2_txt, and price3_txt fields.

 

Test your application

TOP

You'll test your application to ensure that it executes as expected.

  1. Save your document and select Control > Test Movie.

  2. In the test version of your movie that appears in Flash Player, type numbers in the QTY fields to see what appears in the Price fields.

  3. Click Calculate to see the total price for all parts.

 

Summary

TOP

Congratulations on learning how to create an application. In a few minutes, you learned how to complete the following tasks:

  • Copy input and dynamic text fields.

  • Assign instance names to text fields.

  • Add a Button component.

  • Declare variables and values.

  • Specify values for text fields.

  • Write a function.

  • Write an event handler for the component.

To learn more about ActionScript, see the ActionScript tutorials in Flash Tutorials.

 

Copyright ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Working with Flash Documents

How to work in Flash WorkSpace

Working with Projects in Flash

Process to Build your First Application in Flash

Using Symbols, Instances and Library Assets in Flash

How to Build Video Player in Flash

How to Work with Color, Strokes and Fills in Flash

How to Create Document in Flash

What is Vector and Bitmap Graphics in Flash

How to Create a Banner in Flash, Part 1

How to Work with Text in Flash

How to Create a Banner in Flash, Part 2

How to Use Imported Artwork in Flash

How to Create a Banner in Flash, Part 3

How to Work with Graphic Objects in Flash

How to Work with Layers in Flash

How to Use Filters and Blends

Working with Graphics in Flash

What is Accessibility Features in Flash

How to Create Motion (Shape Tween & Motion Tween) in Flash

How to Create an Application in Flash

What is Masking in Flash

How to Work with Video in Flash

How to Use Layout Tools in Flash

What are Behaviors in Flash

How to Work with Sound in Flash

How to Create Symbols and Instances in Flash

What is ActionScript in Flash

How to Write ActionScript With Script Assist in Flash

How to Add Button Animation and Navigation in Flash

What is Data Integration in Flash

How to Work with Screens

How to Create a Presentation with Screens

What is Extending Flash

How to Create Multilanguage Text in Flash

How to Create Graphics: Draw in Flash

What is Flash Lite

Ways of Data Integration

How to Create Graphics: Create a Timeline Animation in Flash

Getting Started with Flash Lite in Flash

How to Publish Flash Documents

How to Create Graphics: Making Animations with Easing

Learning Flash Lite 1.X ActionScript in Flash

How to Export Flash Content and Images from Flash

How to Create Graphics: Applying Gradients in Flash

Process of Writing and Editing ActionScript 2.0 in Flash

How to Create Accessible Content in Flash

How to Create Graphics: Apply Graphic Filters and Blends

What is Data and Data Types in Flash

Process of Printing from SWF Files in Flash

Using ActionScript: How to Use Script Assist mode in Flash

Learn Syntax and Language Fundamentals in Flash

How to Create E-learning Content in Flash

Using ActionScript: How to Write Scripts in Flash

Working with Functions and Methods in Flash

Process of Using Templates in Flash

Using ActionScript: Process of Adding Interactivity in Flash

What are Classes in Flash

Control Tag Summary of XML to UI in Flash

Using ActionScript: How to Create a Form with Conditional Logic and Send Data in Flash

What is Inheritance in Flash

What is Data Integration: Overview

Using ActionScript: How to Work with Objects and Classes in Flash

Overview on Interfaces in Flash

What is Data Integration: Using XML for a Timesheet

How to Work with Text and Strings in Flash

How to use Handling Events in Flash

What is Data Integration: Using XUpdate to Update the Timesheet

Learning Animation, Filters and Drawings in Flash

How to Work with Movie Clips in Flash

How to Create Interaction with ActionScript in Flash

How to Work with Images, Sound, and Video in Flash

How to Work with External Data in Flash

What is Security in Flash

How to Debug Applications in Flash

List of Error Messages in Flash

Using Object-Oriented Programming with ActionScript 1.0 in Flash

How to Write Scripts for Earlier Versions of Flash Player in Flash

List of all Keyboard Keys and Key Code Values for using in Flash

Terminology

Introduction to Components in Flash

What are Components in Flash

How to Create an Application with Components

How to Work with Components in Flash

How to Handle Component Events in Flash

How to Customize Components in Flash

How to Create Components in Flash

What is Collection Properties in Flash