iWeb Tip #1 – Flash in iWeb

80
18563
Flash in iWeb

See how to get Flash SWF files into iWeb

This tutorial will show you how to get an Adobe Flash created file into iWeb.  Flash adds all sorts of interactivity to your site as well as fun animations.  It really makes your sites come to life. iWeb does not accept those files natively to just drag and drop them in, so how can you get those files into iWeb?  Well, the HTML Snippets is the key. If you don’t know what flash is or how to use it there are many books, podcasts, online tutorials that can help you learn.  This tutorial is just how to get that flash created file into iWeb.  So buckle up, here we go.

VIEW DEMO »

1-Create flash .swf file

2-Place swf file on server (like your iDisk (MobileMe) or your own server).  If using MobileMe I recommend making a folder called “flash” in your sites folder like this: iDisk/Web/Sites/flash/myflashfile.swf
If your not using MobileMe and using your own server like GoDaddy, iPower, etc. then you could just make a folder on the root level of your server called “flash” and put it in there.  That way your link to the file become https://www.yoursite.com/flash/yourfile.swf

3-Go to iWeb, choose HTML Snippet and paste this code:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=" https://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="400" align="middle"> <param name="movie" value="https://www.yoursite.com/flash/myflashfile.swf"> <param name="allowScriptAccess" value="always"> <embed type="application/x-shockwave-flash" pluginspage="https://www.adobe.com/go/getflashplayer" width="550" height="400" align="middle" src="https://www.yoursite.com/flash/myflashfile.swf" allowScriptAccess="always"></embed></object>

4-Now just change the code in to your own URL and flash width and height and hit apply in the HTML Snippet.

5-You now have successfully put a flash file in your iWeb document.


If No Flash, Show Image

Many users these days are using devices that simply don’t have a flash player (i.e. iPhone, iPad, iPod Touch, Etc).  If they visit a page that has flash it shows a blank spot on the webpage.  Like the image below:

Many people are starting to use alternatives to flash (such as HTML 5, JQuery, etc) so it shows on all devices.  Well here is a bit of code that you can use as an alternative to the code above to get flash into your iWebsite and if the browser the user is using doesn’t have flash it will default to an image instead, that way they at least don’t see a blank screen and your site can still be beautiful.

Here’s an image of viewing a webpage that has a flash file with this alternative code to show an image on the iPad.  Notice that there is not black screen where the flash should be, there is now an image as it code has detected that there is no flash player and instead is showing the image.

Here is an example.  Click the link below.  If you view it on a device/computer that has flash player you will see an animating flash (swf file) that says “Flash in iWeb”.  If you view the link in on a device/computer that doesn’t have flash, then you will see a image that (of course) is not animating that says “iWeb Alternate Flash Image” with a description.  Check it out.

Alternate Flash Example »

So here’s how to do it:

1) Create .swf file and an image/graphic the same size.  You can create the image in photoshop, or you could even just make a layout in iWeb, then use the screenshot tip using command + shift + 4 and take a screenshot of the area, and crop it in preview to make sure it’s the correct width and height that matches your swf file.

2) Place swf file and image on your server (like your iDisk (MobileMe) or your own server).  If using MobileMe I recommend making a folder called “flash” in your sites folder like this: iDisk/Web/Sites/flash/myflashfile.swf
If your not using MobileMe and using your own server like GoDaddy, iPower, etc. then you could just make a folder on the root level of your server called “flash” and put it in there.  That way your link to the file become https://www.yoursite.com/flash/yourfile.swf

3) Go to iWeb, add an HTML Snippet and paste this code:

<SCRIPT LANGUAGE=JavaScript>
<!--
var plugin = 0;
if (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"] && navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin) {
if (navigator.plugins && navigator.plugins["Shockwave Flash"])
plugin = 1;
}
else if (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0
&& (navigator.userAgent.indexOf("Windows 95")>=0 || navigator.userAgent.indexOf("Windows 98")>=0 || navigator.userAgent.indexOf("Windows NT")>=0)) {
document.write('<SCRIPT LANGUAGE=VBScript\> \n');
document.write('on error resume next \n');
document.write('plugin = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFla sh.3")))\n');
document.write('if ( plugin <= 0 ) then plugin = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFla sh.4")))\n');
document.write('if ( plugin <= 0 ) then plugin = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFla sh.5")))\n');
document.write('</SCRIPT\> \n');
}
if ( plugin ) {
document.write('<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=3,0,0,0" ');
document.write(' ID=flash WIDTH=585 HEIGHT=162>');
document.write(' <PARAM NAME=movie VALUE="https://yoursite.com/flash/flashfile.swf"> <PARAM NAME=loop VALUE=false> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> ');
document.write(' <EMBED src=" https://yoursite.com/flash/flashfile.swf" loop=false quality=high bgcolor=#FFFFFF ');
document.write(' swLiveConnect=FALSE WIDTH=585 HEIGHT=162');
document.write(' TYPE="application/x-shockwave-flash" PLUGINSPAGE="https://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">');
document.write(' </EMBED>');
document.write(' </OBJECT>');
} else if (!(navigator.appName && navigator.appName.indexOf("Netscape")>=0 && navigator.appVersion.indexOf("2.")>=0)){
document.write('<IMG SRC="https://yoursite.com/flash/flash_image.jpg" WIDTH=585 HEIGHT=162 BORDER=0>');
}
//-->
</SCRIPT><NOSCRIPT><IMG SRC="https://yoursite.com/flash/flash_image.jpg" WIDTH=585 HEIGHT=162 BORDER=0></NOSCRIPT>

4) Now just change the code in your HTML Snippet to your own URL’s, change the flash width and height, and hit apply.

5-You now have successfully put a flash file in your iWeb document with an image alternative.


I hope this tutorial helps you to get flash in iWeb with ease as well as provides a good site experience wheather the browser being used has flash or not.  If you feel this tip has helped you please consider donating to the iWebUnlimited cause.

[iWeb-Code=’donation’]

80 comments

  1. Chris Gatewood 15 February, 2010 at 13:22 Reply

    When using GoDaddy, where do create the Flash folder? I’ve tried putting it where I think is the root folder but I’m not sure where to place the .swf file.

  2. iWebUnlimited 15 February, 2010 at 16:18 Reply

    Chris, simply make a folder on the root level of your GoDaddy server. The root level of the server is where you have your index.html file. Make a folder along side of the index.html file called “flash”, then put your .swf file in that flash folder you created. Then your URL becomes http://www.yoursite.com/flash/yourflashfile.swf
    Then just plug in that URL into your code and be sure to put in the flash dimensions and your set.

    Hope that helps.

    • GH23 19 March, 2010 at 14:50 Reply

      Thanks, this is exactly what I didn’t understand I guess. I need to put the flash folder in same area where the index.html file was. Now it works like a charm, just tweaking the dimensions of the video.

      Thanks for the great info, this is a fantastic site!

  3. Good 19 February, 2010 at 04:59 Reply

    Hello I try to put a flash file into Iweb and it doesn’t work at all. I carefully followed the easy instructions but there is no answer from my server. I tried several ways ( in a folder, without folder changing the place,…) I even made the same page with dreamweaver aned the flash file works on the browser. I use a server called Haisoft and all the docs are in a httpdocs file ( the root level). I often use flash in dreamweaver and it always works. Do you have any idea of the problem? Thank you very much for your answer

  4. Robedom 19 February, 2010 at 11:08 Reply

    Hey there. Im seeming to have the same problem that GOOD is having. Hers what I did. I followed the instruction to the T. I first made a banner that changed pics for me. played it to verify it worked as an swf. then saved it in the order give to us. I opened my i disk then my Web folder then my sites folder then i created a folder named flash. then i saved my file named myflashfile.swf just to keep it simple. and then paste the html code and changed the Ht and Wd accordingly. then changed it to my websites address www.*******.com in both necessary fields but with no luck. When that didn’t work i thought maybe because there are 6 sites on my idisk that was the problem and moved it to the folder for that specific site. but no luck there. Any thoughts?

    Thanks again for all your help!
    Dave

  5. Robedom 19 February, 2010 at 23:12 Reply

    Ok so FYI users if you are using mobile me and domain forwarding do not use your http://www.yoursite.com address it will not work. you must use your http://web.me.com/“your me address here” in place of http://www.yoursite.com in order to pull the file from the proper location. Took me a little bit to figure out so I wanted to share it with you guys.Other than that the instructions are perfect. If you have problems try and open the file from your idisk first and make sure the file works from that location so you dont make the same mistake i did.

  6. Chris Gatewood 20 February, 2010 at 14:00 Reply

    Thanks! I finally got it to work! But I have another quick question. When trying to convert some other files to .swf, I’ve run into the “Can’t get text item 1 of “”. (-1728)” error inside of VisualHub. Have you encountered it? I can’t find anything about it online and I can’t seem to find a better alternative than VisualHub. Also, if I try to convert the file to .flv, can I make the video autoplay without movie controllers (play, pause, etc.) as if it’s an swf file?

  7. iWebUnlimited 21 February, 2010 at 00:03 Reply

    Robedom, glad you got it working.

    Hey iWeb’ers, be sure to post longer posts and problems in the forum instead of here. Then we can have a full thread and discussion on the topic to help you solve it. This here is for comments. Thanks

    Chris, I haven’t seen that problem with VisualHub. I use Adobe Media Converter more myself, but have you tried using a mpeg4 video file (h264) with JW player? Works great, and more compatible too. Anyway, this is probably something again more for the forum so we can have a discussion about it. Post your questions there and we’ll see if I and other users can help you out. And yes, JW player will allow you to hide controllers (unless rollover) and autoplay. See you in the forum.

    • Chris Gatewood 6 March, 2010 at 16:08 Reply

      Thanks! I think I found an alternative for it. I know I’m asking a lot of questions haha, but I’m also having problems when viewing the flash in Firefox. It works in WebKit based browsers like Safari and Chrome but in Firefox, it just doesn’t want to cooperate and displays it much smaller than it actually is with black borders around it? Is there a way I can alter the code or make the video render out larger for different web browser. I promise that this is the last question!! haha

  8. Linda 8 March, 2010 at 18:11 Reply

    Arghh! I’ve been trying this for over a week now and keep getting a blank white box. I am creating the files on a pc with FL(because my media encoder on my Mac FL isn’t working). Trying to upload files on my host at network solutions, and do the copy and paste into HTML snippets in my iWeb on Mac. Tried moving the files and recreating. Found 3-4 different tutorials and can’t get it to work. We should see the file display as soon as we click apply? If I’ve uploaded the files to host, do I need to copy the files onto the Mac’s iWeb folder, too? Even on publish it doesn’t show/ Any suggestions, please?

  9. Ken 15 March, 2010 at 23:15 Reply

    Trying to place a free flash player which includes an index.html file, the swf file, and a ‘player’ folder containing subfolders which have the mp3’s, images, and xml files for scrolling of artist albums/art.
    Ive uploaded all this data to a folder called ‘Flash’ on my host and entered the URL into my browser, and it works.

    Im not doing something right with the code. I tried entering the location of the swf on my hard drive, and also using the location on my host. There is only a black screen in the widget window. But no flash operation. Any ideas? Thanks

  10. alex 16 April, 2010 at 11:07 Reply

    Hi, thank you for this great tip. I however have a question, my site is in black, and i think that part of your code is for white flash background. How can i get it black?

  11. jonathany26 23 April, 2010 at 13:02 Reply

    Error code #2044 and error code #2036

    my flash video plays fine in Safari and Firefox, but in internet explorer it plays for a second or two then it gives me this error

    Error #2044: Unhandled IOErrorEvent:. text=Error #2036: Load Never Completed.
    why is that ? this is what I am doing

    This text will be replaced

    var so = new SWFObject(‘http://www.dreamdigitalmedia.com/flash/ogsby/player.swf’,’mpl’,’640′,’480′,’9′);
    so.addParam(‘allowscriptaccess’,’always’);
    so.addParam(‘allowfullscreen’,’true’);
    so.addParam(‘flashvars’,’&file=http://www.dreamdigitalmedia.com/flash/ogsby/ogsby.flv
    so.write(‘player’);

    in the flash folder I have my ogsby.flv file I also have a swfobject.js file and a player.swf file

  12. scott 27 April, 2010 at 09:55 Reply

    hey there- i am trying to put flash into iweb. It works, using code from iWebunlimited, but there is a white box that flashes momentarily before the video loads… I’ve tried so many different encoders, iweb code, etc..

    Any idea as to what is causing the white flash before the video?

    thanks so much……!!

    scott

  13. Richard 8 May, 2010 at 19:02 Reply

    I place the the .swf file on my iDisk in the right folder, I paste and copy the code, I change sections of it as it for my web site. The flash animation show on the iWeb window, then I publish it. Open safari or firefox, no flash animation,SURPRISE the flash file is not any more in my iDisk, it simply disappear !!!

    Is someone got an idea ?

  14. Thomas Bricker 21 May, 2010 at 12:29 Reply

    I tried this technique.
    The flash file shows up in Safari but not in Firefox.
    What do I do?

  15. kramocker 18 June, 2010 at 08:54 Reply

    Hi,

    For me, it works fine if I put the actual; location of the .swf file in the HTML. The only problem I have, is that now the site requires a user name and password, before fully opening the page.

    Any ideas?

    Cheers,

    Kramocker

  16. Garb-e 2 July, 2010 at 15:25 Reply

    Is there any way to layer the html snippet? When I create the snippet, it is always on top of other items, even if I send it to the back, it is always shown on the top!

    Any help will be appreciated with this.

  17. Leslie 15 July, 2010 at 12:31 Reply

    Hi, I am new to all of this but have taught myself a lot with sites like yours. I do make donations once I see that a site answers me in a reasonable time and helps me. I am creating a site for my husband’s business, using iweb. I wanted the introduction page to be animated somewhat and show a hyperlink that reads “ENTER SITE”. After much research, I don’t think that I am willing to learn FLASH. I decided to create the animated graphics in Keynote (one slide only). It is a background, then his logo falls onto the page with transitions. I saved this as a QUICKTIME Movie without audio because I did not want to complicate things) . I then downloaded a free trial of Doremisoft Mac Converter…Video to Flash. Now I have this folder filled with things like AC-RunActiveContent.js, Black.swf, codebase.swf and the others files end with these .flv, .html, .jpg, .swf Where do I go from here. The rest of the site that I am working on needs to be tweeked. I am currently reading about image and content optimization, ranking…etc… I have not yet published the site. Thanks again. Leslie

Leave a reply

Facebook
Twitter
YouTube