Flash buttons [Archive] - CodingForums.com

View Full Version : Flash buttons

rflowers

06-25-2007, 03:00 PM

Hi all,

I am very new to website designing, in fact, the website I am asking about here is my first, so please excuse the simplicity of it, it is for one of the schools that I work at. I have ran into a little issue I'm hoping someone can help me with.

I have decided to use flash buttons, simply to make the website look a little bit more attractive. Hovever, I am getting this problem where the user is having to click twice on each button. I haven't used frames here, just a new page everytime, so each time a new page is loaded, the user must first click on a button to 'activate it' if you like, and then the second click uses it. Due to this, the user isn't really seeing the animation that the flash button produces, as they are quickly clicking it again after the first click. Also I didn't intend the buttons to be clicked twice...

I'll post a link here so you can possibly see the problem first hand, if this method is frowned upon, I'll be happy to try to find another way to show you the problem, it just seems sensible to show you exactly what the problem is as opposed to my poor description!

http://www.aldermanrichardhallam.leicester.sch.uk

If anyone could offer a solution I would be very grateful. My little knowledge has been exhausted!

Thank you,
Rob

PappaJohn

06-25-2007, 04:08 PM

The buttons are working fine for me - just 1 click.

kewlceo

06-25-2007, 04:59 PM

Hovever, I am getting this problem where the user is having to click twice on each button.

Hi Rob,

The problem exists because Microsoft (in order to settle a patent dispute) changed the way IE handles ActiveX elements such as Flash.

It takes a little bit of coding to get around it, and there are different ways to handle it, but here's some JavaScript that will do what you need. Let's just demonstrate fixing your Home button, and from there you'll see how to do the others.

First off, paste the following code into a text editor and save it as a file called "menu.js", then upload that file to your host in the same directory as your HTML files.

function RunMenuHome()
{
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="20" accesskey="1" tabindex="1" title="Home">\n');
document.write('<param name="allowScriptAccess" value="sameDomain">\n');
document.write('<param name="movie" value="flash_home_button.swf">\n');
document.write('<param name="quality" value="high">\n');
document.write('<param name="bgcolor" value="#000033">\n');
document.write('<embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" name="home" width="100" height="20" src="flash_home_button.swf" quality="high" swliveconnect="true" allowscriptaccess="sameDomain" ></embed>\n');
document.write('</object>\n');
}

Now open your home.html file, and place the following code between the <head></head> tags:

<script src="menu.js" type="text/javascript"></script>

While in your home.html file, find the following block of code:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="20" accesskey="1" tabindex="1" title="Home">
<param name="movie" value="flash_home_button.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000033" />
<embed src="flash_home_button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="20" bgcolor="#000033"></embed>
</object>

Delete the above, and replace with:

<script type="text/javascript">RunMenuHome();</script>

Now save home.html and upload it to your host. Refresh (F5) your home page in IE7 and click on the Home button. The page now reloads itself with instantly.

HTH,

_Aerospace_Eng_

06-25-2007, 07:34 PM

I actually recommend using SWFObject (http://blog.deconcept.com/swfobject/) since it uses DOM to create the flash code, it gets around the EOLAS click to activate thing, it detects to see if the user even has flash if not it will provide alternate content so they aren't left with nothing. The alternate content in your case could be a link to the page that the flash button would have normally linked to.

kewlceo

06-25-2007, 07:56 PM

Whichever method you decide on, Rob, you definitely need an alternate non-Flash navigation menu (usually placed in the footer). That way, people who don't want to download the Flash player can still navigate around your site.

Also, the search engine bots need a non-Flash means of crawling your site.

rflowers

06-27-2007, 12:25 PM

Hi,

Thanks very much for your helpful replies guys, I will definately try these methods out. The problem I'm going to have with your suggestion Aerospace is I dont have a clue where to start. I read through the link you provided, but I have no idea how to implement it with my site. I can only make a website with wysiwyg approach, so I dont know where/how to embed (if that's the correct word) SWFObject into my html code.

kewlceo, thanks for the dummies guide there, I will definately be giving this a go today!

Thanks again guys, I will keep you posted on my progress.

PS I wonder why it worked for one user....

Rob

_Aerospace_Eng_

06-27-2007, 12:27 PM

rflowers

06-27-2007, 01:06 PM

Read the site in the link thoroughly. It gives examples of how to implement it. It even tells you how to install it.

I'm struggling here, I have read through again and I can't really work it out. I dont see how to install it, only how to include an operation within my site to update the users flash. The example in here is for a flas movie, so i dont understand how to set it to adapt the code for a flash button.

I'm not expecting to be baby sat through this, but I think this is a bit beyond my capabilities.

So, an alternate method of browsing through my site could be a site map?

I might just lose the flash buttons altogether and just use plain text links.

Rob

kewlceo

06-27-2007, 01:25 PM

kewlceo, thanks for the dummies guide there, I will definately be giving this a go today!

Hi again Rob,

It should work out fine, but be sure and let me know if you need any additional help. Most importantly, be sure to add an alternate menu in your footer so that search bots (and humans without Flash) can navigate the site.

PS I wonder why it worked for one user....

He was using a browser other than IE7. It's with IE7 that Microsoft added the "Click to activate..." step.

Good luck mate,

rflowers

06-27-2007, 01:38 PM

Thanks chap....

I'm lost now, I like the sound of this swfobject approach, but it seems difficult to implement. Ideally, for the website to look its best, I would have only 1 navigation method, and swfobject seems good in that depending on whether the user has flash installed or not, it will supply plain or flash links. It doesn't seem like it's meant for beginners though

Thanks again

Rob

kewlceo

06-27-2007, 03:26 PM

Ideally, for the website to look its best, I would have only 1 navigation method, and swfobject seems good in that depending on whether the user has flash installed or not, it will supply plain or flash links. It doesn't seem like it's meant for beginners though

Okay, let me try to help you with the SWFObject method then. If you downloaded and unzipped SWFObject 1.5 (http://blog.deconcept.com/swfobject/swfobject.zip) the only file you'll really need is swfobject.js, which you can upload to the same directory as your HTML files to keep things simple.

Firstly, make a backup copy of your index.html just in case things don't work out, then open the file and put this bit between the head tags:

<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
#home { width: 100px; height: 20px; }
</style>

Now on to the body. Locate the following code:

<td width="100" height="20" bgcolor="#FFFFFF"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="20" accesskey="1" tabindex="1" title="Home">
<param name="movie" value="flash_home_button.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000033" />
<embed src="flash_home_button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="20" bgcolor="#000033"></embed>
</object></td>

Replace the above with this:

<td id="home" width="100" height="20" bgcolor="#FFFFFF">
<a href="index.html">Home</a>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("flash_home_button.swf", "Home", "100", "20", "5", "#FFFFFF");
so.write("home");
// ]]>
</script>
</td>

Now upload index.html to your host, and refresh the page in your browser. When you are on your home page you should be able to click on the Home button just once to make it work (the page will reload instantly) whereas the other buttons still require the extra click.

Let me know if you have questions. :)

rflowers

06-27-2007, 04:01 PM

Oh Rick you didn't have to go to such lengths chap, thank you very much. I will try this later on. So if a user browses to my site who doesn't have Flash player installed, then a simple text link will be displayed for them?

I look forward to trying this later

I cant praise you enough

kewlceo

06-27-2007, 04:06 PM

Thanks Rob, no worries, I do this stuff every day (minus the non-semantic tables, lol) so it's really no trouble.

Once you get the Home button tested later, the rest of the buttons will be easy. :)

rflowers

06-27-2007, 06:49 PM

Hi Rick,

Sorry to hastle you again. I have made the changes that you suggested, and it appears that the button is replaced with a plain text hyperlink. I guess this is what users without flash will see, however I do have flash player installed lol

You can take a look if my description was as poor as I thought it was. (I'm not up to date with the technical jargon)http://www.aldermanrichardhallam.leicester.sch.uk

thanks chap,
Rob

kewlceo

06-27-2007, 07:08 PM

Rob, you'll be happy to know it was MY mistake, not yours, lol.

Find:
so.write("flashcontent");

Replace with:
so.write("home");

One other thing to change is to put the home ID inside your already existing CSS style tags. You could just place it at the bottom as shown below, then delete the style section that you added (I should have been paying more attention).

.style20 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#home { width: 100px; height: 20px; }
-->
</style>

rflowers

06-27-2007, 07:28 PM

You're an absolute star, I wish I knew all of this myself! So am I right in thinking that if someone was to view my site now without flash player, they would see the link as we were seeing it before? (A text link)

And no problem about the mistake, without you, I'd have no chance at all, and I'd have carried on running the risk of some users not being able to see the nav buttons.

Just out of interest, could you give me your expert opinion of my site please? I know it's very basic, but honestly, it's just about all I'm capable of.

Cheers,

Rob

kewlceo

06-27-2007, 08:04 PM

You're an absolute star, I wish I knew all of this myself! So am I right in thinking that if someone was to view my site now without flash player, they would see the link as we were seeing it before? (A text link)

Wow, you made my day, thanks.

Once the changed code is uploaded, then the users without flash or with JavaScript disabled will see standard text links in place of the buttons. You can actually see for yourself quite easily in most browsers. Assuming IE7, just click on the "Tools" icon and select Internet Options then open the Security tab. Adjust the security slider to High, click OK then press F5 to refresh the page. You'll see text menus. Just go back and set your slider to medium after you're done testing.

Just out of interest, could you give me your expert opinion of my site please? I know it's very basic, but honestly, it's just about all I'm capable of.

I like the site! It's logically laid out, has plenty of relevant material, the button bar looks great, and most of all it is very readable and usable. The color choices are relaxing and the overall look is clean and organized.

My only nit is the links on the footer bar are hard to read because of the low contrast of the blue on black. No biggie though, that's easily resolved with a bit of style code. Nice job.

rflowers

06-27-2007, 08:35 PM

Well thank you very much, that means a lot.

I think I'm going to start again and go through your guide. When I'm viewing the site locally, the button appears as I expect it to. When it's live, it doesn't appear. I must have done something wrong!

Regarding the links at the bottom, I just couldn't change the colour of them to save my life, I guess it's not possible through the gui tools. It's almost like you have to over ride the standard hyperlink format rule through some kind of script.... I bet you're having a good laugh at my personal terms for these features lol

Cheers,

Rob

_Aerospace_Eng_

06-27-2007, 08:54 PM

Did you upload swfobject.js to your site?

rflowers

06-27-2007, 09:10 PM

Just when I thought I couldn't get any dumber....... :o

Thank you

kewlceo

06-27-2007, 11:27 PM

Just when I thought I couldn't get any dumber....... :o

Bah, that's nothing mate. Once I was driving my SUV through a rough neighborhood in East L.A. and my CD player jammed. The changer was all the way in the back, so I hopped out to go clear the CD and realized just as the door slammed that I locked myself out with the keys in the ignition and the thing was RUNNING, lol. http://img132.imageshack.us/img132/2102/hystericalwdukv7to.gif

---

Anyway, you've got the Home button working now on the Home page, so the next step would be to get the other buttons functional on that page, and then you can paste your code in to each HTML file after that.

In the style code, you'll want to add the IDs for the other buttons, so just clone the #home ID for each button and then add it between the existing style code. The added code is shown in red below:

Example:

#home { width: 100px; height: 20px; }
#news { width: 100px; height: 20px; }
#students { width: 100px; height: 20px; }
#staff { width: 100px; height: 20px; }
#parents { width: 100px; height: 20px; }
#info { width: 100px; height: 20px; }
a { color: #999; }
-->
</style>

Once you've done that, you can find each <td...> tag that holds the button, and modify it by adding the ID code for each button, for example:
<td width="100" bordercolor="#000033" bgcolor="#000033" id="news">

Then delete the object tags (plus everything in between the tags) for each button, and replace like so, updating the portions I've marked in red for each button code:

<a href="news.html">News</a>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("flash_news_button.swf", "News", "100", "20", "5", "#000033");
so.write("news");
// ]]>
</script>

Keep in mind that the file names are case-sensitive, so you'll need to make sure that they are referenced properly: news.html, Students.html, Staff.html, office.html, school_info.html.

After you have home.html fully functional, the other five pages will be a breeze because you can copy/paste the entire finished block over the existing code, and the entire style code + script call in the head section.

Keep us updated of your progress! :)

Cheers,

rflowers

06-28-2007, 05:24 PM

Hi Rick,

I keep saying it, but thanks again! I didn't have time to do much today, but I'll be finishing it off tomorrow I hope. Will keep you posted chap.

Cheers,
Rob

kewlceo

06-29-2007, 04:20 AM

Hi Rick,

I keep saying it, but thanks again! I didn't have time to do much today, but I'll be finishing it off tomorrow I hope. Will keep you posted chap.

Cheers,
Rob

Sounds great Rob. I thought of one more thing that will help your links stand out on the dark areas whilst remaining visible on the light areas. I've added this to my previous post, but here it is in case you missed it:

#home { width: 100px; height: 20px; }
#news { width: 100px; height: 20px; }
#students { width: 100px; height: 20px; }
#staff { width: 100px; height: 20px; }
#parents { width: 100px; height: 20px; }
#info { width: 100px; height: 20px; }
a { color: #999; }
-->
</style>

That last line in the style code will give you a gray that will show up on both light and dark backgrounds.

Cheers mate,
Rick