Web Safari at Giraffeweb

I have a client that loves sounds on her websites. I am not going to expound here about the pros and cons of sounds because regardless of anyone’s opinions, sometimes you have to pick and choose your battles!

The problem I had did not come to light until this client purchased a Mac for her PC-based office, and of course the first web site viewed on it was their corporate web site. Instead of the sound of people laughing, all they heard was static, and it was loud and annoying.

I had placed a .wav sound in SwishMax to play when the site opened.

The static was a result of exporting the SwishMax file using the export option .sw6 (for version 6 of the Flash Player). The fix was described as this:

“Mac by default uses quicktime as the swf player.
Quicktime can only handle swf4 format.”

So, I immediately exported the file as .sw4, uploaded it and tested it on the Mac, and the problem was resolved. I would like to thank Michael Chrysler up at the SwishMax forum for helping me with this! Since it was posted earlier this year, it has been viewed about 400 times.

I started out like most people in the web design field, using a pseudo WYSIWYG program to generate code. One of the first programs I used was Macromedia Fireworks to make some DHTML menus. Oh, when I figured out how to make my first drop down menu, I was estatic! It worked, sort of, in IE5 on the PC, not very good in NS 4.7, and the drop down part of the menu showed up somewhere else on the page, if at all on the Mac.

After this fiasco, I tried the XARA drop down, All the Web, Dynamic Drive , and even Suckerfish. My latest particular problem involved a drop down menu that used images for the buttons and did not working in IE5. Granted, this is the summer of 2005, and IE 5.2, which is still shipped on Macs yet hasn’t been updated by Microsoft in at least 2 years and support stops completely by 2005. However, making it work in this browser was the task at hand.

Earlier in the year I had purchased the latest DHTML menu from Project Seven, Pop Menu Magic to create fly-out menus, and even though I was reluctant to give up my Son of Suckerfish Menu (I had graduated to that one by now), I decided to give it a whirl.

The menu STILL did not work in IE 5.2 on Mac. The Pop Menu Magic worked fine as long as I used the CSS the program generated for text buttons, which assumes a fixed-width for the buttons, and also worked fine with a fixed width for image buttons, but these buttons varied in width.

These are the steps I used to make the menu work in IE5.2 for Mac. (This assumes you have Dreamweaver, know how to install extensions and have purchased the Pop Menu Magic from Project Seven) :

1. I created the menu using the Pop Menu Magic in Dreamweaver.
2. Using Dreamweaver’s Insert, Image Object, Rollover Image, I let Dreamweaver insert each button on the menu (even though I am not a fan of Dreamweaver’s rollover javascript).
3. I then edited my menu by specifying a specific width for each <li>. You can do this using inline CSS or by creating a separate ID for each button in your stylesheet.
   <li style=”width:72px;”>

Although this method seems quite simple to me now, It took several revolutions before I finally got it all together and it works great now. For additional information, visit the support forum at Project Seven.

The software I use is Dreamweaver 8, Swish Max and some Flash. I have been
on a mission to figure out how to validate the code that these software packages
generate for web pages. I am no expert, but have been hoping that someone
who knew a lot more about how browsers work would come up with a solution.
I knew that w3c only supports the “object” tag, yet Mozilla-based browsers only support the “embed” tag,
so to make the code validate would result in the Macromedia Flash not displaying
in Mozilla.

Sample Code generated by software programs:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs
/flash/swflash.cab#version=5,0,42,0"
id="flash" width="200" height="200" />
<param name="movie" value="flash.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed name="Movie1" src="flash.swf"
quality="high" bgcolor="#FFFFFF" swLiveConnect="true"
width="200" height="200"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>


On one of my web design lists, I asked if anyone had found a solution. The first response came from Cranium Creations:

<object type="application/x-shockwave-flash"
codebase="http://download.macromedia.com/pub/shockwave/cabs
/flash/swflash.cab#version=6,0,79,0"
data="http://www.websitename.com/flash.swf" width="200px" height="200px"/>
<param name="movie" value="http://www.websitename.com/flash.swf" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="scale" value="100%" />
<a href="http://www.macromedia.com/go/getflashplayer"
title="link to the Macromedia Flash Player download page">Get the latest
Flash Player from Macromedia</a>
</object>


This validates just great. But in IE it places a small graphic box (that looks like what happens when you don’t upload an image but have it in the code) in the upper left corner of the Flash object on the page until the Flash loads. For most sites that I create, that is not a huge problem, but I felt like to get the page to validate, I created a different problem. I have a larger Flash file on one web site that requires a preloader, and all the page would show was the little color graphic until after the preloader had virtually loaded the movie. Since the majority of the viewers on this particular site would be using IE, I felt I needed a better solution.

I plodded on and found a post on A List Apart (http://www.alistapart.com/articles/flashsatay/ — please refer to to that link for the details). This is a great explanation of the various elements of the Flash code generated by the software programs, but I still had a problem with being able to create the Flash necessary by using SwishMax:

<object type="application/x-shockwave-flash"
data="c.swf?path=flash.swf" width="200" height="200" />
<param name="movie" value="c.swf?path=flash.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
<img src="images/byline.jpg" width="200" height="200" alt="" />
</object>


I could not get SwishMax to create the container movie above, “c.swf”,
correctly, as it would not take the variable passed to it from the path=flash.swf.
I had to use Macromedia Flash to create the container movie (if someone
knows how to get it to work in SwishMax, I would certainly welcome the
comment!).

(Side Note: the wmode parameter above allows a menu to drop down over the
Flash object.)

This does not totally finish the Flash code though, as now there is no way
to detect the Flash Player (or version). The suggestion is to create an
empty Flash object somewhere else on the page and add in the flash detection
code, which can be accomplished quite simply with the code supplied above
by Cranium Creations.

However, if you don’t care about Flash detection, the img src in the code

above will place a static image on the page instead of the Flash.

The above code has been tested on a PC in IE 6, FireFox 1.5, and Opera 7,
and on a Macintosh in IE 5.2 and FireFox.

I think it is interesting at best to see that Drew McClellan’s quest up at
A List Apart was to condense the markup because he didn’t like the bloated
code generated yet Cranium Creations was because he wanted it to validate
in XHTML.

Now if someone could figure out for me how to make the Windows Movie Videos
load in Mozilla without using the embed command, that would really make
me happy!