Creating a Flash application

For this example, our Flash application will be very basic. For the most part I would just like us to walk through the process of creating a Flash application within Flash, and then take that application and embed it within a page in Drupal. Once we have conquered this, we will be geared up to create some really cool applications that will surely wow your visitors. But keep in mind that your imagination is the key, so feel free to go crazy and create something very cool, and not feel limited with what we create in this section.

Before we begin, however, we will need to create a home for our Flash project. In this book we will always start out each chapter by first creating a new directory to hold the contents for that chapter. With that said, we first need to create a new folder called chapter1 and then save our currently opened up Flash application as chapter1.fla within this folder, by clicking on the File | Save As menu item. Once we have saved our Flash application, we can now start by adding objects to our stage.

Creating a background

Our first task will be to create a background for our Flash application so that it sticks out when viewing through Drupal. We can do this by clicking on the Creating a background

tool within our toolbar. This should then change our mouse to the cross-hair symbol when you move the mouse over the stage. Before we begin to draw our rectangle, though, we will need to make sure that all of our rectangle properties are set up just the way we want them.

Rectangle properties

We will now shift our focus to the PROPERTIES panel, which should show some of the options that we have for drawing a rectangle object.

The FILL AND STROKE region is used to describe how the rectangle will be drawn and what colors can be used to either fill or stroke (border) the rectangle. For this example we would like to have a rectangle that has a 3 pixel dark grey border, with a dark blue center, which we can configure by setting the following:

Finally, we would like our rectangle to have rounded corners. We can do this by adding a value within the RECTANGLE OPTIONS section that shows the Rectangle properties

symbols. To have a 15 pixel radius for the rounded corners, we can provide the following:

We can now move our cursor over the upper left-hand corner of our stage region (where the white square begins), and draw our rectangle region as follows:

Adding a gradient

We will now give our background some character by adding a gradient as the fill color. To do this, we will first click on the fill region of the rectangle using the Selection tool (

) and then open up the Color tool Adding a gradient

on the right side of the screen.

We can now give our background a linear gradient by clicking on the Type drop-down menu and selecting Linear. Next, change the gradient colors by first clicking on the right tab within the Gradient tool Adding a gradient

and then changing that color back to the dark blue color. Then, click on the left tab of the gradient tool and give it a lighter blue color. Finally, to make this background more interesting, we will orient the gradient so that it is not completely horizontal. We can do this by first clicking and then holding down our mouse over the Transform tool( Adding a gradient

). By clicking and holding down our mouse over this tool, it should bring up a submenu, where we can then select the Gradient Transform tool ( Adding a gradient

) Once we have this tool selected, we will click on our fill region, which will expose some handles where we can resize and change the orientation of our gradient. The circle symbol Adding a gradient

, over our fill region, will allow us to change the orientation of our gradient, which we will use to change our fill gradient to be oriented at approximately 45 degrees.

We are now done with our background, and ready to move onto adding some text.

Adding text to a Flash application

Before we begin adding text, we first need to create a new layer so that our text does not collide with our newly created background. To do this, we will first click on our TIMELINE tab, where we will first rename the default layer name to background, and then lock this layer by clicking on the dot in the Adding text to a Flash application

column.

After we have done this, we can create a new layer on top of the background layer by clicking on the Adding text to a Flash application

within the bottom layer tool menu Adding text to a Flash application

and then calling this new layer as text.

Now that we have a blank layer to add our text, we can click on the Text tool ( Adding text to a Flash application

) within our toolbar and, and shift our focus to the PROPERTIES panel.

Text properties

The text properties are most likely familiar to anyone who has used a Word processor application. It allows you to change the color, size, style, and letter spacing. In our example, we want a fairly large size and light color so that our text will stand out against the dark background that we just created. For that reason, we should provide the following information for our text field properties:

After we have our properties set up, we can add our text to our stage by clicking anywhere on the stage we would like to show our text. When we are done, we should see the following:

Compiling our Flash application (making a SWF)

Now that we have created our Flash application, the next step is to run and compile this into a SWF file, so that we can embed it within our Drupal web site. This will first require us to take a look at the Publish Settings, so that we can make the necessary changes to our published SWF file.

Publish Settings

Publish Settings can be found by clicking on the File | Publish Settings menu item, where we will see the following page:

Since we are using Drupal to show our Flash applications, the first thing that we need to do is uncheck HTML from the publish type column. After we have done this, we can take a look at the Flash tab on the publish settings, which will show the following screen:

Since our goal is to stay consistent with the Flash CS3 readers, we will probably want to use Flash Player 9 to compile and run our SWF movies. We can do this by clicking on the Player drop-down box and then selecting Flash Player 9. When we are done, we can click on the OK button at the bottom of the settings page to accept the changes.

Now that we have our set tings in place, we can run and compile our Flash application by pressing Publish Settings

+Enter for Mac, or Ctrl+Enter for Windows. If you wish to just compile your application, then you can alternatively select File | Publish from the main menu. When we are done with this step, we should be able to navigate to our chapter1 folder and see the following:

The SWF file is the compiled Flash file that we will now embed within our Drupal web site.

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Flash with Drupal

By : Travis Tidwell

Flash with Drupal

By: Travis Tidwell

Overview of this book

Creating a Flash application