PI7 Flash File Link Object Web Page

In PI7, it's now possible to build a web page which includes "link objects," including plug-ins, java applets, and Flash, Shockwave and video files. This tutorial shows you how to embed a Flash file link object in a PI7-created web page. Be aware that you can add any link object following the directions in this tutorial, which uses a "Breathing Goku" Flash animation file from Flashkit. You can probably tell I'm a big fan of DragonballZ, and Goku spends a lot of time breathing heavily in the show.

View the Flash Link Object page here, or view the same technique applied to a link object video file here.

Flash file link object

I can't redistribute Flashkit's files, but do go visit this wonderful resource and select one to use while you make this tutorial. Alternatively, use on of your own Flash files.

If you are interested in other tutorials on using PI to build web pages, you may want to check out my Component Designer Web Page, Web Album, Template Library Slide Show, Image Map, Web Page Edited With FrontPage, Vertical Scrolling Text and Images, CSS Fixed Background Scrolling Text, Customizing a Web Page Template, Remote Rollovers, Popup Menu and Basic Web Page tutorials.

Start by making yourself a new web page. Choose File, New, New Web Page. Make a new 800 X 600 pixel web page image with a black background.

new web page image

In this tutorial, I'm using a combination of Text objects (for navigation) and HTML text objects (for the copyright statement at the bottom of the page). Select the Text tool and type in your header text and navigation link text. I've made up a site which has a comic book anthology, TV show synopsis, my own Goku drawings, links and an email link. After creating each Text object, right click on it and choose Properties. From the Image Map tab, enter the URL for the link, target frame if desired, Alt text and Status bar text, then click OK.

object properties

Repeat for each Text object linking to an HTML page. To add a copyright statement at the bottom, choose Web, HTML Text Object. This will open the HTML Text Entry Box. Type in the desired copyright text and click OK.

HTML text entry box

Align your Text objects and HTML text as desired. To make sure that your page is saved with the correct information in the head tags and that you save the image files as desired, choose Web, Web Properties. Click each tab and fill in the desired information or make choices from the options available. Pay attention especially to the Image File tab. PI7 defaults to saving cell objects as Progressive JPG's. The text objects would not look good as JPG's, so I made sure to select GIF Optimized 256.

save text objects as GIF's

Note also that PI7 will create an images subfolder, to which it will save the sliced images from the web page. You can select a different folder if you wish, just remember where it is. The Flash file you'll be adding next will also be added to this same folder. Click OK to close the Web Properties dialog box.

Now here comes the fun part. Let's add the Flash file. Choose Web, Link Object, Flash File.

link to Flash object

Doing so accessed the Open dialog box. Browse to and select the desired Flash file, then click Open. A little gray square with a Flash symbol on it, surrounded by a resizable bounding box, will appear in your web page.

little gray box for Flash object

Drag this box over to the upper left side of the web page and resize as necessary.

resize the Flash object

One last step is necessary before you can preview the web page with the Flash animation. Select the Slice tool. In the Attributes toolbar, choose Auto Slice.

select auto slice

You'll get a little warning box that says "The cell will discard any Script Effects if new boundaries do not match old boundaries." Click OK and the web page will be sliced automatically. Now you can preview the web page by choosing File, Preview in Browser. This will open up your default browser so you can see how it looks. Close the browser when you're done previewing. If something isn't right, edit the page and preview again until it all works OK.

To save your work as a web page you must choose File, Save for Web, As HTML. Doing so will open the Save As dialog box. Browse to a folder to which you'll save the HTML page. Remember, an images subfolder will be created automatically for all of the sliced images and the Flash file. Click Save to save the HTML page and associated files. Remember that when you upload the HTML page and image files, you must have the exact same file structure on your server, or your link object page won't work right.

View the Flash Link Object page here, or view the same technique applied to a link object video file here.

This tutorial uploaded 1/04/02

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage