Tutorials

Insert Flash into iWeb

This is a question I am often asked and, although I covered it in one of my ‘iWeb Questions of the Week’ posts a while back I still get  e-mails asking me every now and again so I thought it was about time that this subject got a post all to itself.

To get a flash movie into iWeb you will need 2 things; A flash movie clip and a bit of code to stick into a HTML snippet. That’s it really, it’s that easy. If you look around the WWW there are lots of different codes for inserting a flash movie into a web-site (not just iWeb) and I have been testing a few. The one I show below is the one I had most success with.

Not that I had many problems, but I wanted to find the best code possible that would work on the most amount of browsers as possible. Of course there is the problem that Internet Explorer users have with the fact that they have to click on any flash elements to get them working, but isn’t there always problems with IE?

Before we start I have to issue a minor warning. If you want to achieve this effect in iWeb and you are not hosting your iWeb site on MobileMe then you will have to publish to a folder and upload your iWeb site via a third-part FTP application such as CyberDuck. This is because we have to copy the flash file itself to the web-site ‘post production’.

So let’s assume you have your flash movie already made, open iWeb and navigate to the page you want to have the movie added to.

Insert an HTML Snippet and when the transparent black window opens, paste in the code shown below.

320" height="240" id="mymoviesname">
http://www.mydomainname.com/sample.swf" />


320" height="240"
name="mymoviename" align="" type="application/x-shockwave-flash"
pluginspage="http://get.adobe.com/flashplayer/">

You will notice that there are various elements highlighted in red. These are the elements that you can/will have to change in order for your flash movie (swf file) to work.

The width and height values are self-explantory, they must match those of your flash file. If they don’t then it will appear squashed and mishapen on your web-page.

The other 2 elements are the name of your flash file. You will notice that in the latter file name I have included the domain name too; that is because this part of the code is where your iWeb page will look for where you have stored your flash file within your iWeb site.

There is a really easy way of finding out the full and correct path for your flash file that involves a little bit of work beforehand.

Simply pick any file on your Mac, such as a photo or text document but nothing important or too big. Copy it to your desktop and then, in iWeb, on the page that you want to have displaying the flash movie type a bit of text (anything you want, but just one word will do) and select it all.

Select the Hyperlink tab in Inspector and add a hyperlink to the word(s) you typed. From the drop-down menu select ‘A File’ and then browse to your desktop and link to that file you copied there earlier.

Save your iWeb site and publish as normal. Now open your site in Safari, Firefox or whatever browser you choose and navigate to the page you just created. Find the hyperlink you added and right-click (Ctrl-click) on it, from the drop-down menu select ‘Copy Shortcut’. Job done. You now have the correct URL for the flash movie (apart from the name but you know that already). It you go back to the code I added earlier you can highlight the path that is there and paste your correct URL over the top, remembering to change the filename at the end.

If you want to read more about inserting Flash into a webpage I found this really interesting article on AListApart, why not take a look.

You may also like

7 Comments

  1. Good article Tim. Can I add couple thing:

    1. Flash movie (animations) will NOT work on Iphone/Ipod Touch/IPad because Apple decided that Flash was absolete and the future lays in HTML5.
    2. I have been wanted to insert a flash in my website for a while but because I’m cheap 😉 I have not found a free tool on the internet that can do that, do you know of any? Iwork 09 does not produce flash anymore but Iwork 08 does (I only have the newer version).

    Finally, if I can produce a flash I will probably insert it to my home page and create a new home page for my mobile visitors using your article from few days ago: http://allaboutiweb.com/index.php/2010/02/how-to-detect-an-iphone-visitor-to-your-iweb-site/

    Thanks for this nice article.
    Thierry

    1. Good points, well made Thierry. It’s a shame that Apple doesn’t want to support Flash, for the time being anyway, and in particular for videos. I think web designers are shying away from building their sites in Flash but coding on-line video in it is becoming very common.

      I know what you mean about creating free flash too. I was disappointed when iWork 09 lost the ability.

      Tim

  2. Hey Thierry,

    I’m having some real problems with flash on iweb. In Safari all the flash files show up perfectly, which shows the sizing and code is right. However, in Firefox, one shows up perfectly while my top banner is squished to about 15% of its actual size and pushed all the way over to the left, rather than being justified in the center – any ideas on what I can do to resolve this?

    Muchas Gracias.

  3. I’m still having trouble getting flash to load: http://www.lifewaves.com Any ideas?

  4. how to add an autoplay option to the code?

  5. i have a question:
    i host my i webs ite on drop box can i still follow these instructions and will it work! because if i ask to coppy the link it will give me a dropbox adress…

  6. Hello,
    I am building a website with Iweb, societyatsea.com and I was wondering how can you use a star rating system in your blog!
    Is this possible? I have checked online, found many rating systems but all of them require php. What about flash version, there will be still PHP involved though, no?

    thanks a lot, I am struggling with this so any help will be appreciated.

    Andreas

Leave a reply

Your email address will not be published. Required fields are marked *

More in Tutorials