Ravelry is now hosting the flash file!

A HUGE thank you to Casey for removing my concerns about bandwidth by hosting the flash file on Ravelry. It’s free for anyone to use now if you can figure out how to put it on your page/blog. If you need help you may be able to ask for help on the We <3 Progress Bars group on Ravelry.

To make access easier I am sharing the instructions publicly that explain how to get my flash widget onto your own blog/website 🙂 So now you’ll have to fill in your own info to make them work, but it’s really not too difficult.

Adding the code to your website

Just add the following inside of an HTML/text block wherever you want it to show on your blog (the ones on my sidebar are placed inside of simple text widgets – super easy):

<object id="progressbars" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="185" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="name" value="progressbars" />
<param name="align" value="middle" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="wmode" value="transparent" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="SCALE" value="exactfit" />
<param name="src" value="http://badges.ravelry.com/swf/sarahspins/progressbars.swf?userName=yourusername&userKey=yourAPIkey&userStatus=in-progress" />
<param name="allowfullscreen" value="false" />
<embed id="progressbars" type="application/x-shockwave-flash" width="100" height="185" src="http://badges.ravelry.com/swf/sarahspins/progressbars.swf?userName=yourusername&userKey=yourkey&userStatus=in-progress" scale="exactfit" bgcolor="#ffffff" quality="high" wmode="transparent" allowfullscreen="false" allowscriptaccess="sameDomain" align="middle" name="progressbars"></embed>
</object>

You will need to change “yourusername” in the links in the code (in both places) to your ravelry username, and then get your API Key from the top of this page and insert the correct values for “yourkey” in BOTH links or it will not work. You need to leave the “sarahspins” in the address – since that is where Casey uploaded the file on Ravelry.

For example, the correct link for my own Ravelry projects would be: http://badges.ravelry.com/swf/sarahspins/progressbars.swf?userName=sarahspins&userKey=ae41fc5cf517196975e939a91e5a46cca8849a8c&userStatus=in-progress

Customizing:

userName and userKey are the only input variables required, leaving those out will cause it not to load the Ravelry data (likewise any typos will also do the same) but you’ll easily be able to tell if that happens, because you will get a red text message in the flash animation telling you it failed to load the API data…like so:

If this happens, double check that there are not accidentally any spaces or missing characters in your username or API key, and try again. You can load the swf link directly while you are testing if that makes it easier.

You are able change which projects are used for display. Simply change userStatus to in-progress, hibernating, frogged, or finished (or any combination of those, just use + inbetween them, for example userStatus=in-progress+hibernating will pull your active and hibernating WIP’s). If you leave userStatus off completely it will default to in-progress.

The other options you may change are color values for the various elements within the flash animation, and all accept hex values without the hash in front (you just add these onto the query at the end of the movie location in *both* the param tag and the embed tag. So you would add &barColor=FF0000 to the end of each if you wanted red bars, for example). They may be used in any order, but they are case sensitive, and each one needs to be tacked on in the same way, with the amperstand and the variable, followed by the value.

barColor – background of the bar color (this is also the border color around your images)
fillColor – the “progress” portion of the bar (the percentage that is filled)
barText – the progress bar text color (ex 15% completed”)
linkColor – the link color
linkHoverColor – the link hover color
infoColor – the text color of the project info (applies to everything that is not a link)

You don’t have to declare any of the colors if you don’t want to, all of the default colors all match the green and burgundy from Ravelry’s site. If you aren’t sure what hex values are, you can convert RGB colors or just choose from a fairly extensive list of colors here: http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php

Currently the text color for the prev pause/play and next ‘buttons’ is fixed and cannot be changed.

Think you know enough about flash to play with the source files?

Then go for it! It’s coded entirely in ActionScript3.0 (and poorly, I might add – I am not a programmer!) so feel free to use my code as a stepping stone to create something amazing. If you do though, I would appreciate a link back, as well as a copy of what you’ve done.. I’d really like to see where people take this 🙂 There is some scripting/declarations in the .fla file, but the majority of the rest resides in it’s own .as file. There is some other stuff that I was tinkering with that doesn’t work yet as well.. what I am sharing is where I left things when I stopped working on it. All of the libraries needed to build the final .swf are included.

You can download all the project files here: Ravelry.zip (and yes, I know some of the files have “Ravelry” spelled wrong..).

Having Problems?

To put it quite simply, I’m sorry, but I can’t devote any time to troubleshooting this if you can’t make it work… it works for me, and everyone else I’ve set it up for, and that’s all I wanted out of the project. Flash will not work on many blogs because embedding of flash objects is blocked server-side. To my knowledge the flash will not work on wordpress.com or livejournal sidebars (it will work on your LJ profile page). It works fine on blogger/blogspot. I don’t know where else it may or may not work.