Book Image

Flash with Drupal

By : Travis Tidwell, Dries Buytaert
Book Image

Flash with Drupal

By: Travis Tidwell, Dries Buytaert

Overview of this book

Due to its power and expandability, Drupal has become one of the most popular open source content management systems. At the same time, Flash has been adopted for its ability to create beautiful and dynamic web applications. By combining these technologies, you can create Flash applications that are both visually stunning and rich in content. This book is an in depth discussion and tutorial on how to integrate Flash applications with Drupal CMS. It will describe the best techniques and practices for integrating Flash technology with the power and flexibility of Drupal by building real-life Flash applications. Within this book, you will learn how to build Flash applications that show text from within Drupal and also present images, music, and video within a single Flash application. You will also be able to take advantage of the expandable fields and content filtering provided from the CCK and Views modules to add flexibility and power to your Flash applications. Finally, you will learn how to add your own custom functionality to Drupal and then utilize that from within your Flash applications leaving you with a world of possibilities. This book starts out with a simple introduction to Flash and Drupal technology where you will create a simple Flash application and then embed that within Drupal. From there, each subsequent chapter builds on the previous chapters tackling a new and challenging task. For each new task, you will take a step-by-step approach to building a real-life application that utilizes the feature introduced within that chapter. You will also explore alternative design approaches that will eliminate the current design challenges that developers face when building Flash-driven Drupal sites; and all this while staying true to the Object Oriented Principles that govern the foundation of the ActionScript 3 language. By the end of this book, you will be able to apply all the lessons learned from this book to any other use case you may encounter.
Table of Contents (17 chapters)
Flash with Drupal
About the Author
About the Reviewer

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 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 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 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.

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 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.

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 +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.