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>
</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.

  1. 24 Responses to “Flash Bars”

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

    By HolyCuteness on Dec 9, 2009

  3. Thank you for this!

    By ianne on Feb 15, 2010

  4. This .. is.. awesome!

    By KicknKnit on Apr 9, 2010

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

    By Katie @ Yarn Love on Jun 30, 2010

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

    By lindseyg on Aug 31, 2010

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

    By Laura on Sep 17, 2010

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

    Heather aka museumgirlknitz

    By museumgirlknitz on Sep 18, 2010

  9. Hi!
    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!

    By Jenny on Sep 23, 2010

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

    By Crushedcorn on Sep 26, 2010

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

    By LaurieM on Oct 11, 2010

  12. Thanks so much for the code. It looks great!

    By Kelli on Nov 1, 2010

  13. this is completely so awesome! Thank you so much 🙂

    By Heidi on Nov 5, 2010

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

    By Anskuh on Dec 14, 2010

  15. Thank you, thank you, for sharing this!

    By Staci on Jan 27, 2011

  16. You are awesome!!!! xoxo

    By jamielynk on Mar 9, 2011

  17. 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..

    By Mambba on Mar 19, 2011

  18. 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 🙂

    By Sarah on Mar 26, 2011

  19. Great widget that’s very easy to install! 😀

    By Sarah on Apr 7, 2011

  20. thank you very much 🙂

    By susina on May 2, 2011

  21. Thank you so much! I <3 it!

    By Carolyn on Jul 7, 2011

  22. Thank you for sharing this! 🙂

    By tiinaniit on Sep 4, 2011

  1. 3 Trackback(s)

  2. Nov 12, 2009: sarahspins - spinning, knitting, and some other stuff too :) » Blog Archive » Ravelry Flash for Everyone!
  3. May 8, 2010: Fondelifair » Blog Archive » Installing Wordpress in Sub-directory
  4. Dec 11, 2010: Wordpress Blog in a Sub-Directory « Fondeli

Post a Comment