Creating a Plan

Before you can start to build the Gallery component, you need to plan the scope of the project. Just what will the component do? We distill the planning process by telling you the component's features, but in the real world, you will need to brainstorm your ideas and formulate directives for a workable production schedule, accountable to your client's budget and your time.

Cross-Reference 

Read Chapter 3, "Planning Flash Projects," for more information on production guidelines for Flash projects.

Describing the Feature Set

It might sound too simple to state, but you have to have a plan before you can build anything — even a Flash movie. And more often than not, the lack of proper planning before you start to build a Flash project only results in bigger problems later — the kind that keep you up late at night days before the final delivery date. One of the most common problems that arise early in a Flash project is the desire to overbuild, or add more features to a project than are necessary to satisfy the goals of the project.

The goals we're aiming to fulfill with the Gallery component include:

• Quick updates to images on the server: Many of your business clients love the capability to just upload some images to a Web server, and voila — the images are automatically loading into a Flash user interface you designed for them. One of the goals of this project, therefore, is to use server-side scripting (in this case, using PHP as the serverside language) to dynamically read the filenames in a given Web folder and deliver that data to the Flash movie. Whenever a new JPEG file is uploaded to that Web folder, the PHP script automatically includes the file in the XML feed it sends to the Flash movie.

• Unique yet usable interface for browsing images: At the end of the day, if your Flash movie's user interface is too confusing for a Web visitor to understand, the project has lost the potential that Flash offers over standard HTML-based sites. The Gallery component should indicate the state of image browsing clearly, with rollover and rollout states for thumbnail buttons. The thumbnails should also remember if they've been clicked previously or not.

• Downloadable images: If a user likes an image, she should be able to download the image to the desktop. In this component, you learn how to use the new FileReference API to download files directly from a Flash Player 8 movie. You use this new feature with the ContextMenu class to enable the user to right-click the large image area to download the JPEG file currently displayed.

  New Feature 

  You can also use the FileReference API to upload files from the user's computer to your Web server.

• Utilizing JPEG metadata: If you've used a digital camera, you know that JPEG images can store a lot of useful data related to the exposure, camera model, flash settings, and so on. You can also use an application like Adobe Photoshop to add more metadata, such as a caption and an author byline. If the JPEG image displayed in the Gallery component has a caption, the component should display the caption below the image.

• Dynamic resizing of original JPEG files for thumbnails: With the power of server-side scripting, you can create dynamically resized JPEG images on the fly — without ever having to manually create a thumbnail version yourself in a program like Macromedia Fireworks or Adobe Photoshop. The Gallery component will feature a property that specifies the URL to a resizing script.

Determining the Server-Side Scripting Requirements

As we mentioned in the previous section, our Gallery component requires the power of server-side scripting to work its magic. We picked PHP as the server-side language to use for this project, although you could adapt the same functionality with any server-side language, including Macromedia ColdFusion, Microsoft .NET/ASP, Perl, and so on. One of the reasons we use PHP for this project is that PHP is available on practically every Web account that you purchase from an Internet Service Provider (ISP) or Internet Presence Provider (IPP). The following list provides the server-side requirements for this project.

On the CD-ROM 

You can upload the info.php document to your Web server account to discover more details about your server's PHP installation. You can find this file in the ch35/finished files/prod/wwwroot folder of this book's CD-ROM.

• PHP5: We recommend that you use PHP5 for this project, but you should be able to use PHP4 as well.

• GD library: This library enables your PHP scripts to manipulate image data, including the capability to resize JPEG images. Without this library, you won't be able to create the thumbnail images for the Gallery component. If you run the info.php script on your Web server, search for the term "gd" to see if the GD library is installed, as shown in Figure 35-2.

Figure 35-2: The GD library information as displayed by the info.php script.

Once you've determined that your server has met the core requirements, you're ready to use the three PHP scripts we've included in the ch35/finishedfiles/prod/wwwroot folder on this book's CD-ROM.

Tip 

You can quickly determine if your Web server has PHP installed and enabled. Upload the info.php script to a publicly accessible folder on your Web server, and access the info.php script in a Web browser. If the browser asks you to download the info.php file, your Web server most likely does not have PHP enabled.

Note 

It's beyond the scope of this chapter to discuss the PHP scripting used in each script file. We provide a basic overview of the each file's functionality in the following sections. We encourage you to open the PHP files in your preferred text editor to review the syntax. For the PHP experts out there, note that the $doc_root variable (found in both the files.php and resize.php scripts) uses a nonstandard way — for portability reasons — to determine the document root of the Web server. The syntax we use enables the scripts to function properly in both Windows IIS server and Apache Web server environments. Feel free to modify any of the scripts to suit your particular needs.

files.php

This script dynamically reads a specified Web folder to search for JPEG files and displays the found JPEG files in an XML document. You must pass a directory name, either relative or from the server root, as a variable named dir. For example, if you specify

 files.php?dir=images/ 

the script looks for a folder named images in the same folder where the files.php script resides. You can also specify a directory with the syntax:

 files.php?dir=/gallery/images/ 

which tells the script to look for a folder named gallery at the server root, and then looks for a folder named images within that gallery folder.

To see a sample XML document created by this script, type the following URL into a Web browser:

• www.flashsupport.com/f8b/gallery/files.php?dir=images/

When this page loads, you should see the XML data shown in Listing 35-1. Note that the character indicates a continuation of the same line of code. The schema for this XML file uses a parent node named <gallery>, which contains several child nodes named <img> . Each <img> tag represents a JPEG file found in the images folder. The files.php script retrieves all of the information listed for each JPEG file, including the image's width and height (in pixels), the path to the image on the server (src), the caption stored within the JPEG's metadata (if a caption exists), and the name of the file (filename) without the directory path.

Listing 35-1: The XML Data for the JPEG Files

 <?xml version="1.0" encoding=" utf-8"?> <gallery>    <img width="500" height="200" src="/books/4/403/1/html/2/images/darkPine.jpg" caption="Dark        pine and setting sun, Griffith Park, CA" filename=" darkPine.jpg" />    <img width="500" height="200" src="/books/4/403/1/html/2/images/dustHalo.jpg" caption="Dust        halo on small tree, Griffith Park, CA" filename="dustHalo.jpg" />    <img width="500" height="200" src="/books/4/403/1/html/2/images/dustyClearing.jpg"        caption="Dusty clearing with slanting sun, Runyon Canyon Park, CA"        filename="dustyClearing.jpg" />    <img width="500" height="200" src="/books/4/403/1/html/2/images/japaneseTree.jpg"        caption="Japanese tree in fog, Runyon Canyon Park, CA"        filename="japaneseTree.jpg" />    <img width="500" height="200" src="/books/4/403/1/html/2/images/rainbowTower.jpg"        caption="Rainbow sky and metal tower, Hollywood Hills, CA"        filename="rainbowTower.jpg" />    <img width="500" height="200" src="/books/4/403/1/html/2/images/roadNorth.jpg"        caption="Road north to Mulholland Drive, Runyon Canyon, CA"        filename="roadNorth.jpg" />    <img width="500" height="200" src="/books/4/403/1/html/2/images/scrolledRoot.jpg"        caption="Scrolled root at dusk, San Fernando Valley, CA"        filename="scrolledRoot.jpg" />    <img width="500" height="200" src="/books/4/403/1/html/2/images/skyPools.jpg"        caption="Rain pools under cloudy sky, Runyon Canyon Park, CA"        filename="skyPools.jpg" />    <img width="500" height="200" src="/books/4/403/1/html/2/images/valleyOverlook.jpg"        caption="Overlook, San Fernando Valley, CA"        filename="valleyOverlook.jpg" />    <img width="500" height="200" src="/books/4/403/1/html/2/images/weepingTree.jpg"        caption="Weeping  dark tree, Mulholland Drive, CA"        filename="weepingTree.jpg" />    <img width="500" height="200" src="/books/4/403/1/html/2/images/wiredCity.jpg"        caption="Phone poles and palms, Hollywood, CA" filename=" wiredCity.jpg" />    <img width="500" height="200" src="/books/4/403/1/html/2/images/wiredHill.jpg"        caption="Dark hills and paths under wires, Los Angeles, CA"        filename="wiredHill.jpg" /> </gallery> 

Note 

In order for the files.php script to function properly, the JPEG-Meta.php script must be located in the same Web folder as the files.php file. We discuss the JPEG-Meta.php script later in this section.

The XML data provided by the files.php script is loaded into the Flash movie, which turns the XML data into an array to pass as a data provider to the Gallery component.

resize.php

This PHP script performs the task of resizing a copy of the original JPEG image to fit a specific height. In this project, the Gallery component's thumbnails should be 50 pixels tall. The resize.php script requires two parameters: height and img. The height parameter should be an integer value, while the img parameter specifies the path and name of the JPEG file to resize. For example, if you type the following URL into a Web browser, you should see a picture of a beach on Prince Edward Island, Canada, resized to a height of 50 pixels:

• www.flashsupport.com/f8b/gallery/resize.php?height=50&img=/images/beach.jpg

With the Gallery component, you can specify the resize.php script as the value of the thumbScript property.

Tip 

You can quickly determine if you have the GD library installed (and/or enabled) on your Web server by uploading the resize.php script to a publicly accessible folder and accessing the script in the Web browser as we demonstrated with the beach picture. Specify an img path that points to a JPEG you've uploaded to another folder on the server.

JPEG-Meta.php

This amazing script, provided to us by Rob Williams at CommunityMX.com, enables the files.php script to retrieve the metadata, if any exists, of each JPEG file in the specified folder. This script must be uploaded to the same Web folder as the files.php script. Without this file, the files.php script does not function.

Web Resource 

For more information about using Rob William's PHP script, read his tutorial at CommunityMX.com. You can find a link to this tutorial in the PHP Utilities section of the www.flashsupport.com/links page.

Note 

You also need to upload the JPEG images to your Web server, into a folder whose path you specify with the files.php script from the Flash movie.