INTERACTIVE COMMUNICATIONS

Interactive Communications

Interactive Communications

In this tutorial you'll create a simple promotional web page for the fictitious Double Identity movie website. The page will consist of an interactive SWF header at the top of the page (see Figure 1) with supporting text filling out the layout. Along the way, you'll explore the Adobe CS4 product workflow and learn the fundamentals of creating mockups and interactive content.

Figure 1. Fireworks mockup for the web page's header movie

The mockup shown in Figure 1 is a focal point for the tutorial. First you'll gather supplied media assets in Adobe Photoshop, Adobe Illustrator, and Adobe Soundbooth. Then you'll create a mockup for the header in Adobe Fireworks and transform it into an interactive movie in Adobe Flash Professional. To wrap things up, you'll produce the final site files in Adobe Dreamweaver, along with a few notes about editing the files.

When you've completed this tutorial, you'll have the knowledge you need to navigate the CS4 workflow to create your own projects. The tutorial takes approximately an hour and a half to complete.

Getting Started

A good way to start any project is to sit down with a blank sheet of paper and start sketching out an idea. Add notes, scribble, cross out things that don't work—overall, get some sense of where you're going. Then, create a list of assets needed to generate the layout you want or to pull motivation from. Do whatever you can to start with a plan.

In this tutorial, the visual assets and content are supplied in an organized collection of source files. This section will help you set up the project structure and understand the assets you'll use to construct your mockup.

Set Up The Project Structure

It's a good idea to start your projects by taking a moment to think about file organization. There are two types of files you'll work with: source files and published files. Source files are the editable master files that you'll use to build and edit the site. Published files are the exported versions of the source files, along with supporting files used by the web page's content. Only the published files are uploaded to a server on the Internet.

Figure 2. CS4_Project root folder and _Source folder containing sample files

Figure 2. CS4_Project root folder and _Source folder containing sample files

The CS4_Project folder acts as the root folder for the project containing all the published files alongside the _Source folder. As you work, you'll save source files to the _Source folder and published files to the CS4_Project folder. When the site is complete, you'll upload all the files in the root folder (except for those in the _Source folder) to a server.

Understanding The Sample Files

There are three types of media assets supplied with this tutorial: images, audio, and text.

Computer images come in two general formats: vector and bitmap. Vector images are generated from mathematical equations that define shapes through lines and points. Vector images are resolution-independent and tend to have smaller file sizes than bitmap ...