Embedding Flash in FrontPage   

 
If you've been following our Masterclass tutorials on Flash, you should have 
created some pretty amazing animations that would impress your friends and family. 
Now that you've got these animations, how do you show them off? Well, the best 
way is to put them on the Internet. And the way to do this is to embed them 
into an HTML page. This Masterclass tutorial will show you how to put your 
animation into a web page using Microsoft FrontPage. 

Part 1: getting started
Before you start creating your page, make sue you've got all the tools you need 
for the job. There's nothing worse than starting a job only to find half-way 
through that you haven't got an animation to include on the page. So, before your 
start make sure you have created a Flash animation. 

For more information on Flash, check out our previous tutorials. 

Part 2: publishing your animation
Once you've created your animation in Flash, you then need to publish it. 
This is one of the most important things you need to do, so pay attention and have 
a pen and paper handy. You must always save your animation before you publish it 
as this will tell the software where to put the published animation. As ever, we've 
saved our on the desktop so that we can get to it easy, but you should really use a 
specific folder. 

Before you publish your work, you need to make sure the settings are correct. 

From the file menu, select 'publish settings' 
Make sure that .swf and .html file type are both ticked (it won't work otherwise) 
Click OK 
From the file menu, select publish 

Flash will now publish your work to the folder where you saved your original work. 

If you open the folder that contains your animation, you will see two new files 
as well. One is an HTML page with all the correct code inserted into it, the other 
is an SWF file. This is the same as your .FLA file, but it has now been compiled 
into a format that can be used on the web. 

After you've published your animation, quit out of Flash and then load up FrontPage. 
You can of course use whatever web building software you like, although you will 
probably have to do this a bit differently. We're using FrontPage because most people 
will have it installed on their machine. 

Before you start embedding your animation into a page, you must first create a site 
for it to sit within. 

From the file menu, select 'new' > 'web' 
Select 'one page web' from the list of available templates 
Click OK 

This will create all the local route folders that are needed for the page. These 
include image and sound folders. This will make it very easy when it comes to the 
publishing of your site on the web. 

In the folder list window, double-click on the index.htm icon 

This will load up the main page of your site, and this is where we're going to put 
the Flash animation. 

To bring your animation into FrontPage, you need to import it. 

From the file menu, select 'import' 
Locate the .swf and .html files that were published in Flash 
and click OK to import them 

You should now see both files are listed in the folder list window. Now, although 
you've imported the necessary files, the animation won't work. You need to run it 
before you do anything else. 

Double-click on the .html page that was created in Flash 

Your Flash animation should now start running in the main FrontPage window. You 
will now see that the icons of the imported files have changed. 

Now, do remember that the animation isn't in your index page, it's only in the 
preview page that was created when you published the animation. To make the 
animation work on the index page, we have to copy the code over from the preview 
page, to the index page. 

Toppers' tip: publish your Flash file as SWF and HTML 

Part 3: copying the code
The easiest way of copying the animation into the index page is to view the 
animation by clicking on the preview tab at the bottom of the FrontPage screen. 
Then, simply click once on the animation and some handles will appear around the side. 

While holding down the shift key, click and drag the bottom-right handle to shrink 
the animation 
Right-mouse click on the animation and select copy 

You can of course copy the html code and paste that into the HTML page, but this 
way is easier. 

Double-click on the index.html page in the folder list window to load it 

Now, we're going to put our the Flash animation into a table so that it will have 
some formatting on the page. 

Just like in Word, use the function on the toolbar to create a table 
(we created a 3x3 table) To merge any cells, highlight them, right-mouse click 
on the table and select 'merge cells' 
Type any text into the table if you want 
To paste the animation, click inside a cell and press CTRL+ V to paste it 
Save your file 

Now, after you've done all that, you're now ready to test it. From the file menu, 
select 'preview in browser' You can now select what browser you want to use, and 
then your page will be loaded into it. 

And there you have it, a working Flash animation embedded into an HTML page. Now 
that it works, you're free to go and add loads more stuff to your page to make it 
look really cool. 

Toppers' tip: copy Flash and paste