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.
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 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.
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 symbols. To have a 15 pixel radius for the rounded corners, we can provide the following:
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 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 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(). 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 () 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 , 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.
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 column.
After we have done this, we can create a new layer on top of the background layer by clicking on the within the bottom layer tool menu 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 () within our toolbar and, and shift our focus to the PROPERTIES panel.
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:
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.
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
+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.