Wimpy Button

version 3.0.10
by Mike Gieson
©2006 Plaino.
Available at: www.wimypplayer.com

Installation Overview

To use the Wasp you should know how to paste HTML code into a web page using a web page editor (like Macromedia Dreamweaver or Microsoft Front Page) and upload files to your web site. (Both of these things are very easy to do even if you're not a computer whiz!)

1. Upload wimpy_button.swf to your web server

2. Generate the required Wimpy Button HTML code.

There are two tools available in the "tools" section of www.wimpyplayer.com to create the necessary HTML code:

The online Customizer tool

The Wimpy Button Maker tool

3. Paste the resulting HTML code into your web page.

You can paste the HTML code anywhere between the opening <body> and closing </body> tags in your HTML page.

 

 


 

 

Installation step-by-step

1. Upload all the wimpy_button.swf to your website.

Use your favorite FTP program to transfer the wimpy_button.swf file (in "binary mode") to a public area on your web site. I recommend using WS_FTP or Filezilla (open source)

4. Use the Customizer tool or the Wimpy Button Maker tool.

These tools will generate an HTML snippet that contains the necessary HTML code to display Wimpy Button in your web pages.

Copy and paste the resulting HTML code anywhere between the opening <body> and closing </body> tags of your page.

Example:

<html>
<title>My Wimpy Button</title>


<body>

<p>Hello</p>

<!-- Start Wimyp Button Code -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=6,0,47,0" width="35" height="35" name="wimpybutton138" id="wimpybutton138">
   <param name="movie" value="http://www.yoursite.com/mp3s/wimpy_button.swf?theFile=
http%3A%2F%2Fwww%2Eyoursite%2Ecom%2Fmp3s%2Fexample%2Emp3" />
   <param name="loop" value="false" />
   <param name="menu" value="false" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#FFFFFF" />
   <embed src="http://www.yoursite.com/mp3s/wimpy_button.swf?theFile=
http%3A%2F%2Fwww%2Eyoursite%2Ecom%2Fmp3s%2Fexample%2Emp3" width="35" height="35" bgcolor="#FFFFFF" loop="false" menu="false" quality="high" name="wimpybutton138" id="wimpybutton138" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>
<!-- End Wimpy Button Code -->


</body>


</html>

When using the customizer tool, you will need to enter the address (URL) to wimpy_button.swf and the MP3 file on your site. So you should have that information ready before your go to the customizer tool.

A URL to wimpy button looks something like:

http://www.yoursite.com/wasp/wimpy_button.swf

A URL to your MP3 file looks something like:

http://www.yoursite.com/wasp/audio.mp3

I highly recommend entering the URL to each file into a browser's address field to ensure that it is the proper URL to the file. If after putting the URLs into the browser's address field you receive an error, check the URL and try again until your browser doesn't return any errors.

5. Upload the page that contains the Wimpy Button HTML code to your web site.

6. Refresh your browsers cache.

Doing this makes sure that your browser loads the latest changes to the file that was edited. Click here to lean how to clear your browser's cache.

For development I highly recommend Mozilla's Firefox browser. The primary reason is because FireFox's "Clear Cache Now" button actually works. Internet Explorer does not always clear files from the cache, shich causes many hours of double thinking where the code is wrong. With FireFox, you KNOW that the cache is cleared when you "Clear the cache."

To clear the cache in FireFox, From the Main Menu > Tools > Options > Privacy Icon > Cache tab > "Clear Cache Now." You can also include the "clearing of the cache" by clicking the "settings" tab in the same screen and check "cache" from the list, This way you only have to From the Main menu > Tools > Clear Private Data. OR, ctrl+ shift+del.

6. View the HTML page that contains Wasp.

Navigate to the HTML file that contains the Wasp HTML code with your web browser.
Example: http://www.yoursite.com/myWasp.html

 

 


 

 

Using the JavaScript button

1. Open Wimpy Button Maker.

If you don't have Wimpy Button maker, Click here to download the Wimpy Button Maker tool.

2. Set the options within Wimpy Button Maker

Be sure to set the proper URL to your MP3 file and the wimpy_button.swf file.

3. Click "Save As..." to save the necessary HTML code.

This will prompt you to save the HTML code to your local PC.

4. Click the "Make JavaScript" button.

A new screen will appear so that you can verigy the proper URL to the SWF file.

Be sure that the URL to wimpy_button.swf is set correctly. Wimpy Button Maker will use the existing URL to wimpy_button.swf that you set while in the normal mode.

Click "OK" to save the JavaScript file. This will prompt you to save a JavaScript file to your local PC.

5. Upload the files to your website.

Upload the newly created HTML and JavaScript files to the same folder as wimpy_button.swf.

Example:

http://www.yoursite.com/mp3s/wimpy_button.swf
http://www.yoursite.com/mp3s/wimpy_button123.html
http://www.yoursite.com/mp3s/wimpy_button.js

6. Test the files.

Test the newly created HTML file by navigating to the wimpy_button123.html file on your web server.

Example:

http://www.yoursite.com/mp3s/wimpy_button123.html

7. If everything works OK...

You can open the wimpy123.html file in a text editor and copy and paste the HTML for the JavaScript button into your existing HTML page.

The Javascript code starts with:

<!-- START WIMPY BUTTON: JavaScript
... and ends with:
<!-- END WIMPY BUTTON: JavaScript -->

 

 

 

 


 

Manually editing the Wimpy Button HTML code

Experienced HTML authors only.

I recommend only using the Customizer tool at wimpyplayer.com to generate the HTML code, but I realize that fellow nerds like myself will invariably go direct to the source.

The Wimpy Button HTML code consists of two sets of "tags" -- the <object> tag and the <embed> tag. The <object> tag is used for Mozilla-type browsers and the <embed> tag is used for Internet Explorer based browsers. The <object> tag contains a number of additional sub-tags named <parameters>.

When editing the HTML code manually, you must edit any changes in both the <object> and <embed> tags. Failure to edit both tags will result in the player not displaying properly on all web browsers -- even though things may look normal to you, folks who use a different browser will not be able to see the button.

The following is the "de facto" HTML code required to display a wimpy button, which will allow all browsers to render the button properly. Notice the items in red, width, height, id and name show up in two locations, once in the <object> tag and again in the <embed> tag. In addition, there are two references to the wimpy_button.swf file which also includes a reference to your mp3 file.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,47,0"
width="40" height="40" id="wimpy_button_1" name="wimpy_button01">
    <param name=movie value="wimpy_button.swf?theFile=example.mp3">
    <param name=quality value=high>
    <param name=wmode value=transparent>
<embed src="wimpy_button.swf?theFile=example.mp3" quality=high width="40" height="40" name="wimpy_button01"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>

Specify an mp3 file. (aka "pointing wimpy button to your mp3 file")

To "point" wimpy to your mp3 file add a "?theFile=" plus the location of the mp3 file to the end of the wimpy_button.swf

Examples:

wimpy_button.swf?theFile=some_song.mp3
wimpy_button.swf?theFile=mp3_files/some_song.mp3
wimpy_button.swf?theFile=../../mp3_files/some_song.mp3
wimpy_button.swf?theFile=http://www.yourserver.com/mp3_files/some_song.mp3

Again, you must edit the name/location of your mp3 file in two places within the HTML.
- One is in the <PARAM> tag section.
- The other is inside the <EMBED> tag.

IMPORTANT:

When using a relative URL to your MP3 file, the URL to the file must be relative to the HTML file that the button is embedded into -- NOT relative to the wimpy_button.swf file.

Example:

Let's say your HTML file that displays a Wimpy Button resides here:
http://ywww.yoursite.com/content/html_files/wimpy.html

And your wimpy_button.swf file resides here:
http://ywww.yoursite.com/graphic_files/wimpy_button.swf

And your mp3's reside here:
http://ywww.yoursite.com/mp3_files/some_song.mp3

Then you would reference "theFile" as::
wimpy_button.swf?theFile=../../mp3_files/some_song.mp3
or using an absolute url:
wimpy_button.swf?theFile=http://www.yourserver.com/mp3_files/example.mp3

NOTE: The wimpy_button and it's associated HTML file must reside on the same server...
It's a built in security feature of Flash.


More than One Wimpy Button:

If you are putting more than one wimpy button on a page, you must use a unique id/name for each instance of a button in the HTML code.The "id" attribute is only used in the <object> tag, but both the <object> and <embed> tag use the "name" attribute.

Example:

The first button would use "wimpy_button01" as a unique identifier:

<object ... blah blah ... id="wimpy_button01" name="wimpy_button01">
    <param >'s ... blah blah ...
<embed ... blah blah ... name="wimpy_button01" ... blah blah ... ></embed>
</object>

And the second button would use "wimpy_button02" as a unique identifier:

<object ... blah blah ... id="wimpy_button02" name="wimpy_button02">
    <param >'s ... blah blah ...
<embed ... blah blah ... name="wimpy_button02" ... blah blah ... ></embed>
</object>

 


© 2006 Plaino. www.wimpyplayer.com