Flash with Drupal: Build dynamic, content-rich Flash CS3 and CS4 applications for Drupal 6

There are many ways to install Apache, MySQL, and PHP, but I would highly recommend installing a pre-built AMP package onto your computer, and then running Drupal on your machine through a local server. Luckily, there are several pre-built installers that make this step as simple as possible. Each operating system has its own version, and they all can be found at the following locations:

Each of these packages has an easy-to-follow installer that will install an AMP server on your local machine, so that we can then install Drupal. After we are done with the installation of these packages, we should be able to go to the following locations within your web browser, to see a welcome page.

If you are using MAMP, then I would highly recommend setting the default Apache and MySQL ports by clicking on the Preferences button in the MAMP application. Once you are in the Preferences section, we will then select the Ports tag and click on Set to default Apache and MySQL ports.

This will make it such that you can type http://localhost within your browser without the port (:8888), which is consistent with the rest of this book. Now, with a web server installed, our next step is to install Drupal.

Once we have our AMP server running, our next task is to create a database that we will use for our Drupal installation. This simply requires running phpMyAdmin that comes with the AMP packages, and can usually be found by navigating to the welcome screen at http://localhost (for XAMPP) and http://localhost/MAMP (for MAMP), and then clicking on the link that says phpMyAdmin. Once we are inside the phpMyAdmin front page, we can easily create a new database called drupal6 using the Create new database input field and clicking on the Create button.

Now that we have a new database, we will need to create a new user who can use our Drupal database.

We will create a new user by first navigating back to the main phpMyAdmin screen, and then clicking on the link that says Privileges. Once we are in the Privileges section, we can create a new user by clicking on the Add a new user link. We will then fill out the user information by providing the following information (of course, you can use your own username):

Our next task is to make sure that we give our user the correct privileges to use the database that we just created. Since we are just using this as a local server, it is completely fine to give your new user global privileges by clicking on the Check All link that is next to the Global privileges section.

We can now click on the Go button, at the bottom right of the Privileges section, to create our new user. Our next step is to increase our PHP memory, so that Drupal does not timeout when it is installing.

This next step is almost always overlooked when installing Drupal. By default, the AMP packages do not allocate enough PHP memory required to install Drupal. Because of this, we will need to edit the php.ini file and manually increase this value. The php.ini file can be found within the conf/php5 directory of our AMP package installation directory. Once we open the php.ini file, we will perform a search for memory_limit and change it to 32M. While we are in this file, we should also probably increase the execution and input time as follows:

max_execution_time = 1000
max_input_time = 1000
memory_limit = 32M

After we save our changes, it is very important that we reset Apache so that these changes take effect. We can do this by opening up our AMP control application, and choosing to reset the Apache server, or we can simply close and restart this application to perform the required Apache restart. With this done, we are now ready to install Drupal!

Moving right along, we can download the latest version of Drupal by going to http://www.drupal.org and clicking on the download links found on the homepage. For this book, we will be using Drupal 6, so select the latest version of Drupal that begins with 6. At the time of writing, the release was version 6.10, which can be downloaded at http://ftp.drupal.org/files/projects/ drupal-6.10.tar.gz.

Once we have downloaded this package, the next step is to extract the contents into the document root of the web server. This is typically within the htdocs folder of the XAMPP or MAMP installation. Whatever resides in this folder is now visible when you navigate to http://localhost from your browser. For example, if we created an HTML file called index.html inside the htdocs folder, and then navigated to http://localhost, we would see that HTML file rendered within our browser as a web page. In this book, we will simply create a new folder within our htdocs called drupal6, and then extract the contents of the Drupal 6 package inside that new folder. Since we have placed all of our contents inside the htdocs/drupal6 folder, we can now open up our browser and type http://localhost/drupal6 to see the following:

We can begin our installation by clicking on the link that says Install Drupal in English, where we will then be greeted with the following page:

Don't let the red scare you. What this is telling us to do is find the default.settings.php file within the sites/default folder of our extracted Drupal folder. Once we find this file, we simply need to rename it as settings.php. After it has been renamed, we need to change the permissions of the file so that it is writable. When we are done, we can click on the try again link, and see the following:

From here, we will just enter all the database information that we set up in the previous section, and then click on the Save and continue button. This should then walk through the installation process. If it does not, then we can manually edit the settings.php file and manually put in our database information by changing the following line:

$db_url = 'mysql://travist:mypassword@localhost/drupal6';

We can now navigate to http://localhost/drupal6/install.php and kick off the installation. If all goes well, we should see the following page:

At this point, we can fill out all of the initial configurations for our Drupal web site, including the site name, email, user name, password, and so on. When we are done, we can click on the Save and Continue button at the bottom of the page, where we should see the following:

When we click on the link that says your new site, we should then be greeted with the most popular Drupal page (as shown in the following screenshot).

With Drupal installed, we will now add some content.

In this step we will set the workspace layout so that it looks identical to the Flash CS3 default. In Flash CS4, we can accomplish this by clicking on the Window menu item. Once this menu item opens up, we will select the Workspace menu item, and then select Classic.

We should now have a workspace that resembles the following diagram. We will take a look at each highlighted section within this workspace, so that we know what they are when they are referenced in this book.

For each of the following sections, simply refer back to this diagram to see where to find the item under discussion.

With our workspace set up the way that we want, we can shift our focus to the white square in the middle of the screen. This white square region is called the stage and will be referenced quite a bit in this book. The stage is simply the visible window for any object that is placed within our Flash application. By dragging an object off of the stage, we are removing the object from the visible region of our Flash application.

The toolbar presents many of the tools that can be used to create or edit objects on the stage.

When you click on this tab, you should see the timeline for our Flash application. The timeline is a very important aspect in Flash since it allows us to create objects that can change in time. There are many elements within the timeline that will be important for us in this book, and each of these items is described as follows:

The properties panel is used to describe the object that is currently selected. We will use this panel quite often in order to change the width and height, and to give names to our object's instance.

We will use this tool to change the fill colors for the objects that we create. We will also use this tool to create gradients to give our application depth and character.

This tool is used to keep track of all objects that we have created within our Flash application. We will use this to edit existing objects as well as to create new objects that will be used in our Flash application.

Now that we are familiar with the Flash Integrated Development Environment (IDE), we can create something within Flash and then embed that within Drupal.

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:

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.

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:

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.