back

Getting started with Adobe Flash Builder 4

by John Ulliman and Tommi West

With the newest beta release of Adobe Flash Builder 4 software, there has never been a better time for Flash Professional developers to try the other side of the ActionScript environment. The Flash Builder workbench makes it easy to build ActionScript based projects — especially if you've been using Flash for a while and have some experience coding in ActionScript 3.

Flash Builder 4 includes an extensive set of pre-built components that you can drag and drop to add functionality to your projects. The applications you create in Flash Builder are assembled from a set of MXML tags. By editing the tag attributes, you can set the desired properties to customize the components. This workflow is very similar to working with HTML, where you control the formatting of the page with tags and attributes.

The MXML editor in Flash Builder 4 offers different modes that enable you to choose how you wish to work. Click the Source button to edit code directly in Source view, and take advantage of the auto-complete feature as you type. Or click the Design button and switch your workspace to work in Design view (see Figure 1).

Use the Source and Design buttons to choose your desired workspace.

Figure 1. Use the Source and Design buttons to choose your desired workspace.

Working with Flash Builder 4 is just like working with Adobe Dreamweaver software because the source code is easily accessible, but you can jump into Design view to quickly drag and drop the elements of your application onto the design canvas.

In this tutorial, we show you how to build a sample application based on the Rochambeau (rock-paper-scissors) game. You'll drag and drop some of the components to the design canvas and then edit them using the Property inspector — the same steps you use when working with Flash or Dreamweaver. You'll also add a ColorPicker component that enables users to customize the background color of the panel when the application is running. Users can click a button to dynamically generate a rock, paper, or scissors response from both opponents. Images of the two selections are displayed in a panel above the text labels. Logic in the code indicates which side wins, or it identifies that there is a tie (see Figure 2).

Click the button to see which side wins; use the ColorPicker to select the background color.

Figure 2. Click the button to see which side wins; use the ColorPicker to select the background color.

To follow along, download the sample files (ZIP: 128K ) for this project. After downloading the ZIP file, uncompress the folder to your desktop. The rock_paper_scissors folder contains two ZIP files: rps.zip and rps final.zip (the completed project). Follow these steps to get started:

  1. Launch Flash Builder 4. Choose File > Import Flex Project (FXP).
  2. In the Import Flex Project dialog box, click the Browse button next to the File field. Navigate to the rock_paper_scissors folder on your desktop, and select the rps.zip file. Click Open.
  3. The path to the project folder is automatically generated in the File field of the Import Flex Project panel, indicating the location of the new project. Click Finish to close the dialog box.

The RPS project files are organized in folders; the documents containing the source code are stored in the src folder. The set of finished application deliverable files are in the bin-debug folder. The assets folder in the project archive contains the images used in the game. Now that the project is imported, you can see the hierarchy of these files displayed in the Package Explorer panel on the left of the workbench. Click the arrows to expand the RPS project folder and the subfolders (see Figure 3).

Expand the src folder and its contents to see the RPS.mxml file.

Figure 3. Expand the src folder and its contents to see the RPS.mxml file.

To begin creating the application, double-click the RPS.mxml file (an empty application file).

In Source view, you can see the application tag and some other starter code. If you click the Design button to access Design view, you'll see the empty design canvas where you can assemble the application. At this point in the project, only the dimensions of the application are set.   

In Design view, several panels are arranged in tabs around the workbench. Below the Project Explorer on the left side is the Outline panel. This panel makes it easy to see and select the components in your application as you add them. Click the Components panel to see the entire list of components you can drag and drop into your application.

The Components panel has several categories. In this tutorial, you need components from the Controls and Layout categories. Follow these steps:

  1. Open the Layout category in the Components panel. Drag a Panel component to the design canvas. Click the Outline tab, and you'll see the Panel listed in the Outline panel (see Figure 4). Now you can use the Property inspector and Appearance panel located on the right side to adjust the panel's settings.
When you drag and drop a component onto the design canvas, you'll see that component listed in the Outline panel.

Figure 4. When you drag and drop a component onto the design canvas, you'll see that component listed in the Outline panel.

  1. While the Outline panel is still selected, click the Properties tab to access the Property inspector. In the Common section, enter Rock Paper Scissors Challenge in the Title field. To center the text, scroll down to the Text section and click the Align Center option.
  2. To change the background color of the panel, scroll down a little further in the Property inspector and click the Background color chip in the Style section. In the ColorPicker dialog box, select a color and then click OK.
  3. Above the Package Explorer, click the Save icon and then click the Run icon to run the application.
  4. Close the browser and return to Flash Builder. Click the Source tab to view the MXML code that is used to insert the Panel component. The settings you made in the Property inspector have been added to the MXML as additional tags or attributes (depending on the settings).
  5. Previously you used the Property inspector to set the panel's background color. Now you can experiment by hand-coding a different color value. Find the code that specifies the backgroundColor and change the hexadecimal value to #ffffff. Save and run the application again. Notice that the panel's background color is now set to white.

Flash Builder makes it easy to control how components look by enabling you to make settings in the interface. It's also fairly easy to set up the components to work with each other. Instead of hard coding the background color of the game's panel, add an interface control to enable the user to select the panel's color at runtime:

  1. Click the Design tab and open the Components panel. Expand the Control category.
  2. Drag a ColorPicker to the design canvas.
  3. Save the application and run it again.
  4. Click the ColorPicker and choose a color. The ColorPicker selects a new color, but for now, the panel's background color does not change.

To make the ColorPicker component control the panel's background color, you need to use binding syntax to connect the values and properties of one component to another. The first step is to assign an ID to the ColorPicker component so it can be linked by name:

  1. In Design view in Flash Builder, select the ColorPicker and open the Property inspector.
  2. In the Common section, enter colorPicker1 in the ID field. The colorPicker component has a selectedColor property, which you need to hook up to the panel.
  3. Switch to Source view and look for the code that sets the backgroundColor property inside the panel code.
  4. Edit the line to remove the #ffffff white color value between the quotes.
  5. Replace the hard-coded color value with code to connect the backgroundColor property to the selectedColor property by using normal ActionScript dot syntax and curly braces:
    backgroundColor="{colorPicker1.selectedColor}" 
  6. Save and run the project again. Now when you choose a color from the ColorPicker component, the panel's background color updates automatically to match.

Next, add a few more items to set up the game:

  1. In Design view, open the Components panel.
  2. Drag an Image component out of the Controls category and onto the design canvas. The icon displays a placeholder, indicating that you need to choose an image from the assets in the project folder.
  3. In the Common section of the Property inspector, click the folder icon next to Source and browse to select the file named question.jpg that is stored in the assets folder. Click Open to select the image.

This game requires two images, one for each player. You can either repeat the previous steps for the second image or select the desired image on the canvas, copy it, and then paste it to create a second image. Position the images so they appear side by side in the panel (see Figure 5).

Use the helpful blue alignment guides to center the two image components.

Figure 5. Use the helpful blue alignment guides to center the two image components.

  1. Click the image on the left. While it is selected, use the Property inspector to enter the ID imagePlayer1.
  2. Click the image on the right and assign it the ID imagePlayer2.
  3. In the Components panel from the Controls category, drag out a Button component and place it below the two images. While it is selected, use the Property inspector to enter Rock Paper Scissors! in the label field.

To make the button do something, add an ActionScript function to randomly choose among rock, paper, and scissors. The assets folder has three images: 1.jpg (paper), 2.jpg (scissors), and 3.jpg (rock).

The following function generates a random number of 1, 2, or 3. Now you need to use that randomly generated number to set the URL for the source property of the two images:

private function rollDice():void{
var roll1:int = Math.ceil(Math.random()*3);
var roll2:int = Math.ceil(Math.random()*3);
imagePlayer1.source="../assets/" + String(roll1)+ ".jpg";
imagePlayer2.source="../assets/" + String(roll2)+ ".jpg"
}

When you work in Flash Builder, you can put ActionScript in two places: in an ActionScript file (as a class) or inside a Script tag within your MXML document. To add the function:

  1. Click the Source button to switch to Source view.
  2. Directly below the declarations tag, create a new line and begin to add the script tag by typing <scri. Without even completing "<script>", the auto-complete feature displays the appropriate tag. Press Enter (Windows) or Return (Mac), and Flash Builder will finish typing the tag for you. Then type a greater-than sign (>), and the CDATA section is all set up so your ActionScript function won't break XML rules.
  3. Paste the ActionScript function shown earlier between the CDATA tags. After making these changes, your finished code should look like this:
     <fx:Script>
    <![CDATA[

    private function rollDice():void{
    var roll1:int = Math.ceil(Math.random()*3);
    var roll2:int = Math.ceil(Math.random()*3);
    imagePlayer1.source="../assets/" + String(roll1)+ ".jpg";
    imagePlayer2.source="../assets/" + String(roll2)+ ".jpg"
    }
    ]]>
    </fx:Script>

After adding the rollDice function, you need to add an inline event handler call to the button to run the function whenever the button is clicked:

  1. Return to Design view and select the button.
  2. In the Property inspector, type rollDice() in the On Click field.
  3. Save the project, and then run it.
  4. Choose a different background color for the panel.
  5. Click the button repeatedly to see the two players pick rock, paper, or scissors.

 Next, add two Label components to display the winner of each round:

  1. In Design view in Flash Builder, open the Components panel.
  2. Expand the Controls category and drag a Label component from the list to the design canvas.
  3. While the Label component is selected, access the Property inspector. In the Background section, click the color chip and set the background color to white. This ensures the label will show up against the panel's background color and make the text more legible.
  4. Copy the Label component on the canvas and paste it to create a second copy with the same white background color. Position the two labels to center each one below an image, moving the button as needed to place it below all the other elements (see Figure 6).
Center the labels below the images.

Figure 6. Center the labels below the images.

  1. Select the Label component on the left. In the Common section of the Property inspector, enter txtPlayer1 in the ID field.
  2. Select the Label component on the right. Enter txtPlayer2 in the ID field.

To populate the two Label components with the tie text, add a little more code to the rollDice function. The logic in this code example determines the winner of each match:

  1. Switch to Source view.
  1. Copy and paste the following code just before the closing curly brace at the end of the existing function in the MXML document:
    if(roll1 == roll2){
    //it is a tie
    txtPlayer1.text = "tie";
    txtPlayer2.text = "tie";
    }else if(roll2 > roll1){
    //roll2 wins if roll1 is not paper
    if (roll1 == 1 && roll2 == 3){
    player1Wins();
    }else{
    player2Wins();
    }
    }else{
    //roll 1 wins if roll2 is not paper
    if (roll2 == 1 && roll1 == 3){
    player2Wins();
    }else{
    player1Wins();
    }
    }
  1. Paste the following two functions after the closing curly brace (but still inside the CDATA tags) to update the Label components with the winner and loser text, so the labels indicate which side won:
    private function player1Wins(){
    txtPlayer1.text = "WINNER";
    txtPlayer2.text = "loser";
    }
    private function player2Wins(){
    txtPlayer1.text = "loser";
    txtPlayer2.text = "WINNER";
    }
    After making these changes, your finished script tag should look like this:
     <fx:Script>
    <![CDATA[
    private function rollDice():void{
    // rock:1, scissors:2, paper:3
    var roll1:int = Math.ceil(Math.random()*3);
    var roll2:int = Math.ceil(Math.random()*3);
    imagePlayer1.source="../assets/" + String(roll1)+ ".jpg";
    imagePlayer2.source="../assets/" + String(roll2)+ ".jpg"
    if(roll1 == roll2){
    //it is a tie
    txtPlayer1.text = "tie";
    txtPlayer2.text = "tie";
    }else if(roll2 > roll1){
    //roll2 wins if roll1 is not paper
    if (roll1 == 1 && roll2 == 3){
    player1Wins();
    }else{
    player2Wins();
    }
    }else{
    //roll 1 wins if roll2 is not paper
    if (roll2 == 1 && roll1 == 3){
    player2Wins();
    }else{
    player1Wins();
    }
    }
    }
    private function player1Wins():void{
    txtPlayer1.text = "WINNER";
    txtPlayer2.text = "loser";
    }
    private function player2Wins():void{
    txtPlayer1.text = "loser";
    txtPlayer2.text = "WINNER";
    }
    ]]>
    </fx:Script>
  2. Save the game and run it again.

Now you can set the panel's background color, and you can click the button repeatedly to see if the two sides tie each other. When one side wins, the Label components display the winner and loser labels.

We hope this quick tutorial has piqued your interest in building applications with Flash Builder 4. Working in Flash Builder really is very similar to working in other products you are already familiar with — and the projects you develop run in Adobe Flash Player, so you don't have to worry about browser or platform compatibility.

To learn more, be sure to check out the Developer Center article, What's new in Flash Builder 4, and visit the Flash Builder 4 home page on Adobe Labs.  Additionally, Adobe TV has several excellent videos on how to get started with Flash Builder.

Videos on Adobe TV

 

‹ Back


John Ulliman founded On The Wave in 1991. His studio produces digital media, and he provides both live and DVD training. Ulliman is an Adobe Certified Expert and Instructor for Flash, Fireworks, Dreamweaver, Director, and mobile development.

Tommi West is a freelance web designer and creative director at tommiland.com. Prior to starting her own business in 2004, she worked at Macromedia for six years as a technical writer, editor, and web producer. Tommi is an Adobe Community Professional.