Dreamweaver Article

Creating data-driven application prototypes with Dreamweaver and Flash

Set up your project

The first thing I do when I start to prototype an application is to set up an organized location for my source files and exported files. I find that starting off in an organized way makes things move quickly and saves a lot of hassle later on. Also, you'll need to know information about the file system when configuring the application, so you might as well start there.

This page shows you how to get started by setting up your directory structure for the prototype.

Development servers, master files, and exported files

A development server is a server that is used to stage a website during development. The development server is capable of running scripting languages and handling HTTP requests. It's ideal for prototyping PHP and similar languages that require a server to execute.

I use the IIS server that comes with the professional version of Windows. During the course of this article I will be referencing the IIS server for my server choice and PHP for my server scripting choice. In my experience these are the two easiest mediums to work with. In the end, the prototype provides a suggestion for a server-integration pattern whether the target language is PHP or not.

The first thing to know is that you'll be working with files in three different locations: the development server, your local files folder, and your local files dev folder (see Figure 1).

Figure 1. The development server folder on the left and the local files folder on the right.

The development server simulates the functionality and data available on the server. This includes a PHP file that simulates server logic and XML files that simulate server-generated data.

The master files and exported files are saved into a local files directory somewhere on your local hard drive. The local files folder holds the web-ready files, including exported Flash movies, HTML files, CSS files, and anything that would be included in the site files. I like to create a subfolder named dev to separate my source files from my exported files.

Build your development server file structure

This article assumes that you have access to a local development server or network development server that has PHP installed on it. If you own Windows XP Professional or Windows Vista Ultimate, you can install the IIS server from the extra components supplied with the OS. PHP installers are available for free from www.php.net.

I'll refer to the server as the development server from here on out regardless of the type of server you're using. If you choose to use a server-scripting language other than PHP, you can implement the concepts behind the PHP file in the language of your choice.

Start by creating a new root folder in your development server. In my case, I'm creating a folder named abobe in the wwwroot folder of my IIS server.

Build your local file structure

I usually store my source files on my local hard drive or an external drive on my network. Pick a location that makes sense. If everything is configured correctly, you should be able to move the files around easily in the end.

Create a folder for your source files:

1. Create a folder named local files on your desktop or somewhere on your hard drive or network. (You can name this folder with a more specific project name or whatever you like).
2. Inside the local files folder create a subfolder named dev.

The dev folder holds the FLA file that defines the application and the ActionScript files that define the assets in the application (see Figure 2).

Figure 2. The file structure in the dev folder.

Now create the placeholder FLA file in the dev folder:

1. Open Flash CS3 and create a new ActionScript 3.0 FLA file.
2. Save the file into the dev folder and name it Application.fla.
3. Inside the dev folder, create another folder named code. You will place ActionScript files here later.

The local files folder holds the dev folder and the website files that will be transferred to the server in the end. I find it helpful to split the master files from the exported files so I can visualize everything, and it makes it quick to bundle a build of the prototype into a ZIP file during routine reviews.

Create placeholder files in the local files folder by publishing the Application.fla file.

1. Return to Flash and open the Publish Settings for the Application.fla file (File > Publish Settings).

2. Under the Formats tab in the Publish Settings dialog, add the ../ prefix before the Application.swf and Application.html File paths to change the path to which the files export to the folder above the dev folder.

   ../Application.swf
   ../Application.html

3. Click Publish to export the files.
4. Click OK to close the panel and save the file.
5. Return to your local files folder to see the exported files (see Figure 3).

Figure 3. The placeholder files published to the local files folder.

Set up a new site in Dreamweaver

At this point you have your file system defined. Some of your files will be edited in Flash, whereas others will be edited in Dreamweaver. Although you may find it's easiest to manage your Flash files in Flash, it's helpful to define a site in Dreamweaver to manage all the other files that make up the prototype.

Figure 4. Local and remote info for the site defined for the prototype in Dreamweaver.

Set up a Dreamweaver site for the source files:

1. Open Dreamweaver and create a new site (Site > New Site).
2. In the panel that appears, click the advanced tab and enter a site name in the Site name text box.
3. Click the folder icon to browse for the local files folder in the Local root folder text box.
4. Enter a path to the development server in the HTTP address text box. In my case, the path is http://localhost/adobe/. The localhost path is a generic shortcut to the ISS development server running on my computer. If you're running a development server locally, you should be able to use the http://localhost/ path or http://127.0.0.1/.
5. Click the Remote Info item in the Category list on the left to switch to the Remote Info view.
6. Change the Access field to match your access type. In my case, I'm setting it to Local/Network. I'm going to use a direct connection to the IIS folder in my folder system so I can avoid dealing with FTP login information.
7. Enter a path to the root folder on your development server. In my case, the path in the local file system is C:\Inetpub\wwwroot\adobe\.

8. Click OK to close the panel.

   You should now see your local files folder in the Files panel in Dreamweaver.

9. Select the exported files in the Files panel (everything except the dev folder).
10. Right-click the selected files and select Put to upload these files to the server (see Figure 5). For now, these are just placeholders, but it's nice to see how easy it is to copy files to the development server.

You can now switch the Files panel view field from Local view to Remote view to see the files on the development server.

Figure 5. The Dreamweaver Files panel enables you to view the site's files and transfer files to the development server.

The ability to show both the local and remote view of the files and synchronize them in the Files panel is one of the strengths of Dreamweaver. As you move forward, you will build files locally and then synchronize them to your development server to see them run from a browser.

Page 2 of 6

Previous Page

Next Page