Adding Flash to Websites

Ryan Dube
web scripting

Most webmasters use Adobe Flash CS3 when adding flash to websites, because it is a well-established web technology. Most webmasters trust it as a reliable tool to deliver interactive web content. In some cases, they even use Flash to build an entire website.

Building Components When Adding Flash to Websites

The capabilities of Flash are nearly unlimited. This makes adding flash to websites a very easy choice. Use Flash to:

  • Display animations
  • Play media such as video or music
  • Serve as fully functional web-based software

How Flash Works

The only requirement when creating flash components for your website is that you must first install Adobe Flash CS3 (or the older Macromedia Flash MX 2004) on your computer.You use Adobe Flash to design the webpage components. While you design these components, save the files locally on your own computer. Once finished creating and testing those components, you then upload those files to your web server. Finally, by inserting code into your original, your new flash creation displays on your webpage.

Creating a Component

The Adobe software is very straightforward and easy to use. Creating a component is a lot like creating an image. You start out with a blank form, called a "stage", and then create or import anything you want onto that stage. You can import elements into your project including:

  • MP3 audio
  • Video
  • Animation
  • Images
  • Data and text
  • Much more

Within the Flash CS3 software, creating a new component is as simple as opening a new document, setting its dimensions in the Document Properties box, and then importing any of the elements listed above to your blank stage.

Flash design is organized in frames and layers. Frames play sequentially along the timeline; however, you choose to configure it. Layers overlay one another within each frame. For example, frame one may consist of a background image layer with an image layer on top of it, and an animated text layer on top of that.

Advanced Components

Text - The most powerful part of this software is the array of elements you can use within the project. For example, you can use several types of text in a Flash document including static text that doesn't change, dynamic text which loads from an external file or database, or input text which the user types into a field.

Symbols - Even greater flexibility comes from the use of symbols. These are graphics, animation, or other content that change dynamically on the page. Within the Adobe software, you create animation that exists within its own time line in the flash component, like a movie within a movie. You can create the following animation with Adobe Flash:

  • Frame-by-frame animation: Cartoon-style animation created from individual frames.
  • Tweened animation: Animation that requires you create only those frames that change, the software then fills in the rest for you.

Buttons - Buttons allow the user to click within the flash component, whether it's a banner or a web application, or to open a new browser window. You create buttons that are either visible as standard "select" buttons, or invisible buttons that work like HTML links.

Actionscript - Any time an element of your page interacts with the user or performs an action such as opening a new browser window, you need to write the background program to make that happen. This program is called Actionscript.

You can learn Actionscript from websites such as actionscript.org, Adobe's Actionscript Tech Center, or the Code Depot which provide sample Actionscripts to use and customize for your specific needs.

Uploading Flash Files to Your Website

Once you've created a flash component that you want to embed onto your existing webpage, you need to publish the flash file you created, edit your existing page to point to the new flash file, and then upload that file to your web server.

Publish to HTML and SWF

When you are finished creating your Flash project, click File > Publish Settings: Formats, and make sure that "Flash (.swf)" and "HTML (.html)" are both selected. Finally, close that screen and click the "Publish" button. This exports your project to two files: the SWF file that holds your entire flash project, and an HTML file that contains the HTML code you embed into your webpage code.

Edit Your Webpage

Using any HTML editor, open the HTML file that Adobe Flash created, then highlight and copy all of the HTML code between the BODY tags. Finally, open the HTML document from your website where you want to embed your new Flash component, and paste the code you just copied into the webpage where you would like the flash animation to display.

Upload Flash File

Now that you've pointed your page to open your flash project, you need to upload that project to your web server. Using ftp software (or whatever software your web host provided for you to transfer files to or from your website), upload the SWF file that the Adobe Flash software created on your hard drive. Make sure to upload the SWF file to the same folder as the HTML file that you just edited.

Learning More about Flash

Although the guidelines above can help you to publish simple Flash objects on your website, in time you may want to develop more complicated and interactive web applications using Flash technology. There are a number of valuable resources online which provide advanced tutorials that can help, such as Adobe's Flash Developer Center, good-tutorials.com, or flashkit.com.

With enough time, patience, and practice you will have the skills to develop some of the most advanced animations, movie clips, or web applications for your website.

Adding Flash to Websites