Flash Bars

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>

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


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.

24 Responses

  1. HolyCuteness says:

    Thank You so much for making this available! I love it!

  2. ianne says:

    Thank you for this!

  3. KicknKnit says:

    This .. is.. awesome!

  4. […] to get the RGB values for my backgroud colour. Lastly I got the ravelry sideshows from this Sarahspins. There are still a few other things that I think I want to do with the blog. I had a bit of a […]

  5. Thanks for sharing your beautiful badge/button. I love it!

  6. lindseyg says:

    Love the badge. Using it on my blog! Thank you for building and sharing the code!

  7. Laura says:

    Thankyou so much for this! Exactly what i was looking for!

  8. museumgirlknitz says:

    THIS IS AWESOME!!!! I love it and your directions are the clearest I’ve seen thus far. Thank you!

    Heather aka museumgirlknitz

  9. Jenny says:

    i’ved just put the gadget on my website, and it work correctly, but i want to change color, but i don’t understand where put the code, can you help me please?

    Nice gadget, thanks!

  10. Crushedcorn says:

    This worked wonderfully and looks great! Thanks so much for making this available!

  11. LaurieM says:

    Thanks! I just installed this on my blog and I’m very happy with it. Very easy to do.

  12. Kelli says:

    Thanks so much for the code. It looks great!

  13. Heidi says:

    this is completely so awesome! Thank you so much 🙂

  14. […] with Ravelry I found the fab flash Ravelry Status bars by SarahSpins. She has descried very well with easy to follow instructions, how to put these in a text widget on […]

  15. Anskuh says:

    This was wonderfull, just what I wanted. Thank you for sharing this code!

  16. Staci says:

    Thank you, thank you, for sharing this!

  17. jamielynk says:

    You are awesome!!!! xoxo

  18. Mambba says:

    Great and cute !!! I love it 😉

    But I’ve a problem : on Firefox or Chrome, when i click on the name of a project, it doesn’t open the ravelry page, nothing happens actually.
    I’ve the same problem on yours widget, on this page, so it’s not only mine…
    If i click on the photos on my widget, it bring me on the same page with an added # at the end of the url. On your widget it bring me on the Flickr page of the photos..

  19. Sarah says:

    Thanks so much for sharing this – it’s so straight forward even I could get it working!!!!

    (Also can I check whether the pattern name and designer etc should be clickable links as they are not on mine.)

    Thanks again 🙂

  20. Sarah says:

    Great widget that’s very easy to install! 😀

  21. susina says:

    thank you very much 🙂

  22. Carolyn says:

    Thank you so much! I <3 it!

  23. tiinaniit says:

    Thank you for sharing this! 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *