FAQ: Adding a Macromedia Flash file to a web page

Flash files are usually sponsor ads or other types of animated items that are created using the Macromedia Flash program. There are four basic steps to add a Flash file to a web page on your Members24x7 site:

Whoever created the Flash file (this may be you, or Affiniscape, or a third-party vendor) should be able to publish the Flash file and generate two specific files: the Flash movie file (also known as an SWF file, because its file extension is .swf), and the HTML file that can display the Flash movie. You need both of these files before you can proceed.

If you are the one who created the Flash file, or you need to give specific instructions to the creator of the Flash file, here are the specific steps to create those two files in Flash:

Next, you must make sure that the Flash file (the .swf file from the previous step) is uploaded to your Members24x7 web site. To do so, use the Upload Files admin link, browse for the .swf file from the previous step, and upload it. (See Uploading documents/files and linking to page for specific instructions on uploading a file.)

As always, when the file is uploaded, the system will display a link at the top of the page - for example, associations/3887/files/mymovie.swf. Highlight and copy this link (use your mouse to highlight the link, then press CTRL+C, or right-click the highlighted link and choose Copy). You will need it in the last step.

Your next step is to find and edit the content page, sub page, right navigation, etc. that you would like to add the Flash file to. See the appropriate help file if you need to learn the basics of finding and editing your pages.

Once you have the appropriate page loaded in the editor, figure out where you want to put the Flash file on the page. It will be similar to adding an image, so you can simply put the Flash file in its own blank line on the page, or put it into a table cell, or something similar. Once you know where you want to put the Flash file, I recommend typing ZZZZZ in that location in your editor. (You'll see why in just a second.) See the example screenshot below.

Now switch to HTML code view using the Toggle Edit Mode

button. This will change the page to something vaguely like this (your code will be different, but the overall look will be the same):

Don't worry if this code is somewhat mystifying; all you need to do is find the part that has the ZZZZZ "marker" you created earlier. If you can't find it by looking, try using your browser's Find feature (by pressing CTRL+F) and search for ZZZZZ. Once you locate it, you'll be ready for the last step below.

You will need to open up the HTML file you obtained in Step 1 and view the HTML code. You can do this one of two ways:

Whichever method you use, you'll now be looking at the HTML code for inserting the Flash file, which will probably have some codes like <!DOCTYPE> and <HTML> at the top.

Somewhere in the middle of this code, you'll see <object followed by more code, and then </object> lower down. Here's an example; yours will look different, but should start with <object and end with </object>:

</object>

Before you use this HTML, you need to make a couple of changes to it. First of all, you should see something that says classID="..." (there will be a giant string of random numbers and letters instead of ... within the quotes). Notice that this string is bolded in the above example. You'll want to delete the classID parameter (if you don't, it conflicts with our Site Editor). In the example above, you'd be left with the following:

</object>

Next, you need to find the two references to the name of your Flash file (the .swf file from step 1) in the HTML code. In the example above, these references are bolded. You need to replace these with the URL that the Upload Files page supplied in Step 2 above. Hopefully, you copied that to the clipboard already, so you can just paste it over top of the existing filenames in your file. If you didn't copy it, go to your Upload Files page in the system, find the .swf file in the list of files, and highlight and copy the URL reference to the far right of it.

When you're finished, your HTML code should look similar to this (notice the bolded sections):

</object>

Next, highlight the entire section starting with <object and ending with </object>, and copy it (by pressing CTRL+C or right-clicking it and choosing Copy). Now you're ready to paste the HTML into your web page!

Go back to your Site Editor for your web page. Highlight the ZZZZZ you located in step 3, and then paste (by pressing CTRL+V or right-clicking and choosing Paste). This will replace the ZZZZZ with the modified HTML you just copied.

Now, switch back to normal view by again pressing the Toggle Edit Mode

button in the lower left of the editor. Your screen should have what looks like a broken image in place of the ZZZZZ you typed, as shown below. (Don't worry; this is what it's supposed to look like in the editor.)

Save your page, and then preview it on the front end of your site. Your Flash animation should be running right where you want it to! If not, just review the steps above; make sure you remembered to upload the SWF file, change the code exactly as instructed, and inserted it in code view as shown.