I am making this post for three reasons:
- I have bee meaning to make a post about fluid for quite some time now
- I wanted to write something about the increasingly cool muxtape.com
- I needed an excuse to play with ScreenFlow
Naturally I have combined these three “to-dos” into one. Below is a quick tutorial on harnessing the power of Fluid’s new thumbnail plugin to create a simple Muxtape application with sweet coverflow previews of the featured mixes. Video after the jump.
update: If you having problems finding the thumbnail plugin or unable to edit URL patterns make sure you update your muxtape SSB to the newest version of fluid (0.8.9.1 at the time of posting this). If you downloaded the already assembled app from Tom Martin’s blog you will need to update it in the preferences.
Also make sure Leopard is up to date as some folk are experiencing difficulties on older releases. Thanks Marshall
update 2: I have gotten a couple comments and emails about the URL pattern and CSS selector. Here they are ready for copy and paste or just reference so you don’t have to scrub back through the video.
URL Pattern: http://*muxtape.com/*
CSS Link or Image Selector: ul.featured a
You can find out more about specifying thumbnail content here
update 3: If you are having problems with thumbnails loading properly make sure your SSB is updated to at least version 0.9.2.2.
Thanks a ton Colin! couldn’t have made a better screencast myself. Great, great stuff!!!
also, i never thought of using the plugin with muxtape, but now that i’ve seen your ‘cast i realize its such a great fit.
[Reply]
OMG, this is so effing brilliant. I love it!
[Reply]
replied: (on May 5th, 2008 5:40 pm)
I want a Mac.
[Reply]
found through @factoryjoe’s tweet. this is awesome!
[Reply]
Goddamnit, I can’t get the previews to show up! Looks awesome though. Really want to figure it out and write about it.
[Reply]
Figured out that I needed to do a software update, then worked great. Except a handful of the screens don’t preview fully. Regardless, totally hot - thanks!
[Reply]
replied: (on May 9th, 2008 9:50 pm)
I can’t get it to work either… what software update did you do?
[Reply]
soo genius!
[Reply]
Thanks for your posting this, I am really impressed by this combination of muxtape and fluid.
However, I had problems with setting up the “thumbnail” functions, nothing shows up after I input the URL pattern and CSS link.
Is it because I am using the latest version of Fluid app?
[Reply]
replied: (on April 17th, 2008 10:40 pm)
Not sure why it isn’t working for you. You must have the latest version to even be able to edit the URL pattern so it sounds like you have the correct version.
I tried this on a few systems and I did have issues getting it working on my Girlfriends mac however I did not get long enough to figure out what went wrong. I will let you know if I can figure out what went wrong.
[Reply]
replied: (on April 17th, 2008 11:19 pm)
Hey, it works now, I found out its because I don’t have the latest version of Leopard. Thanks for helping anyway!!!
Its such a cool app!!! tHx
[Reply]
I had to do a software update on Leopard before it worked for me. Now it does and I’m loving it.
[Reply]
this is great
[Reply]
I just downloaded the latest version of AirFoil and now I’ve got this app running through my speakers! sweet.
[Reply]
Though I’d share my Muxtape with you…
http://tinyurl.com/5lqrf2
[Reply]
replied: (on April 18th, 2008 4:29 pm)
Nice, digging the fortet remix of imitosis. Thanks for the share.
[Reply]
Hi,
not sure if you up to the task but someone really needs to make an app like this for the iphone/ipod touch. right now muxtape doesn’t really work on iphones (it won’t play a whole playlist - each song has to be selected manually). If I knew how, I would do it.
[Reply]
Hi - what a great little tutorial! I am also, however, unable to get it working - latest Fluid, latest Leopard. The thumbnail pane works with other sites, and it opens with muxtape but shows nothing… I have triple checked to make sure I typed the url & css values correctly (that is a space after ‘featured’, right?)… I wonder is it possible it’s a non-Intel Mac issue (I’m on a powerbook)? Can’t think why but ya never know! Or is it Safari 3.1.1 update that’s the issue? Anyway, many thanks!
[Reply]
UPDATE: the problem (on my powerbook G4 at least) seems to be the split panel view - the floating hud panel version of this works fine but the panel view shows nothing… Odd.
[Reply]
replied: (on April 19th, 2008 10:27 am)
Strange indeed. You might want to drop Todd a line over in the Fluid google group: http://groups.google.com/group/fluidapp
[Reply]
Great use of some great apps. Where can I get that awesome walle wallpaper!?
[Reply]
replied: (on April 19th, 2008 11:18 am)
I cropped that wall-e wallpaper down from these ridiculously high resolution stills on /film
http://www.slashfilm.com/2008/04/12/cool-stuff-super-high-resolution-wall-e-photos/
Let me know if you want me to just post up a copy of the walllpaper instead.
[Reply]
replied: (on April 19th, 2008 12:28 pm)
Awesome, thank you so much. I am definitely keeping an eye on your blog.
[Reply]
ANy way of getting the muxtape/extension to remember where you put the horizontal divider bar which splits between the cover flow at the bottom and the normal site at the top?
[Reply]
replied: (on April 20th, 2008 12:32 pm)
Not that I know of. Head over to the Fluid Google group to request it as a feature http://groups.google.com/group/fluidapp
[Reply]
I made a video about Fluid and Socialthing! if you want to check it out. http://www.vimeo.com/805366
[Reply]
I put your tutorial on our blog. Nice work, man!
[Reply]
Thank you very much a wonderful surprise finding fluid, muxtape and how to mod it all on the same page. Excellent work! Thanks
[Reply]
Hey that’s my icon on Flickr - cool! haha great tip! thanks
[Reply]
replied: (on April 20th, 2008 12:33 pm)
Awesome! A good icon makes a Fluid SSB so much better.
[Reply]
hi
how are you able to find
CSS Link or Image Selector
for sites such as
ffffound.com
?
[Reply]
Nice quicksilver appearance. Care to share?
[Reply]
I dont get it … I thought it was going to pull album cover art for each and much more. THough it gives me some ideas!
Well nice job you landed on Digg’s front page in turn promoting MuxTape, creation.net and FluidApp and this site too! I am now familiar with all these apps. Was familiar with MuxTape before. Social Media bended FTW!
[Reply]
Cool tutorial! I was wondering what application you used to create your video? I like the screen zoom and spotlight effects!
[Reply]
replied: (on April 20th, 2008 12:33 pm)
Screenflow: http://www.varasoftware.com/products/screenflow/
[Reply]
Great tip - kind of a off topic question, but what app are you using for screen captures? The zoom function is great.
[Reply]
replied: (on April 20th, 2008 12:33 pm)
Check the comment above you
[Reply]
What a great idea — finally, a way to find great featured playlists easily on Muxtape! I am having one issue, however; if I want to see more playlists by refreshing the page, the thumbnails do not automatically update. I have to exit the Muxtape app and open it again to get new thumbs. Any ideas?
[Reply]
replied: (on April 20th, 2008 3:40 pm)
I spoke to Todd abut this one. It will be addressed in the next release which should come out any time now.
[Reply]
replied: (on April 21st, 2008 10:45 am)
Works perfectly now. Great app!
[Reply]
Awesome! Killer video and overview.
[Reply]
Still hoping you’ll share your Quicksilver theme/appearance with us!
[Reply]
replied: (on April 20th, 2008 2:56 pm)
I can’t find the exact HUD theme I use for quicksilver but this one is very popular:
http://www.mygnu.com/julius/proj_bezel.html
[Reply]
replied: (on April 20th, 2008 3:16 pm)
Thanks! This is exactly what I was looking for.
[Reply]
I just noticed that if you search site:http://muxtape.com artist name - coverflow shows up for whatever artists were present when mixes were indexed too!
[Reply]
replied: (on April 20th, 2008 6:38 pm)
Brilliant! Good find!
[Reply]
I eagerly await your next blog post.
[Reply]
Outstanding.
[Reply]
This rocks! Think I’ve found something to fill the void that the Twitter outage has created. Thanks for sharing with such clear directions.
[Reply]
Where did you get that robot background, thing is tight.
[Reply]
Could you please add the Thumbnail plugin settings to the text so one does not have to wait for the video to play all over again to get it? Thanks.
[Reply]
replied: (on April 23rd, 2008 8:27 am)
Done and done. You weren’t the only one requesting this.
[Reply]
replied: (on April 23rd, 2008 3:48 pm)
Great! Thanks again.
[Reply]
replied: (on April 23rd, 2008 4:03 pm)
Just to let you know that it was misspelled:
CSS Link or Image Selector: ul.featured a
[Reply]
replied: (on April 23rd, 2008 4:16 pm)
Woops! Fixed now, thanks!
[Reply]
For ‘favorited’ on each tape as well.
URL Pattern: http://*muxtape.com/
CSS Link or Image Selector: .featured a
[Reply]
replied: (on April 26th, 2008 11:27 am)
Nice one, hadn’t noticed that you can pop that tab down to reveal users tapes.
[Reply]
thanks for this tutorial. now i’m hooked on muxtape and fluid.
I did some searching and found a great muxtape search site, then added the coverflow fluid combo.
here you go:
Advanced Preferences: *muxseek.ah-huh.net/*
URL Pattern: http://muxseek.ah-huh.net/*
CSS Link or Image Selector: ul li a
[Reply]
Great tip, works perfectly, if onlymuxtape auto played the playlists, I’d never have to actually see the website, and could go full scren with the coverflow mode, that would be sweet.
[Reply]
Here’s the link to the flickr icon if anyone was searching for it (I know I was)
http://www.flickr.com/photos/kridgway/2433201214/sizes/o/in/pool-636943@N22/
[Reply]
i helped developed Mux and thank all the positive feedback I am seeing
[Reply]
Killer video and overview
[Reply]
Hey Cawlin - I loved this screencast! I just got my first Mac two days ago (I’ve been a PC guy for the last 14 years) and this was an awesome little tweak! Thanks so much for putting this together!
[Reply]
Awesome screencast. I didnt even know about the plug ins. BTW now there is a better icon on the flickr page for muxtape at the following link: http://tinyurl.com/55acsc
[Reply]
replied: (on May 14th, 2008 7:48 pm)
I like the classic feel to that icon. Check out my newer post for some other muxtape tricks as well as a great mac style icon: http://internetjogging.com/2008/04/26/pimp-my-muxtape-ssb/
[Reply]
Excellant news this is so cool.
And now I’ve found http://www.muxtapestumbler.com its much easier to find new muxtapes.
[Reply]
Hey, do you need window’s vista to do this?
[Reply]
replied: (on May 24th, 2008 7:00 am)
Hate to burst your bubble but you actually need Leopard (Mac OSX 10.5) to run fluid. You could check out prism (http://labs.mozilla.com/2007/10/prism/) for a similar windows application.
[Reply]
replied: (on May 24th, 2008 1:20 pm)
thanks, i was flipping out trying to get it to work with my widows XP thinking i needed vista!
[Reply]
well done….very cool
[Reply]
Please, how do you launch the aplications? what launcher are you using?
thnx
[Reply]
replied: (on June 2nd, 2008 11:19 am)
I am using quicksilver, a free application launcher from blacktree. You can download it here: http://www.blacktree.com/
[Reply]
Many thanks, slick screencast.
[Reply]
i have it all loaded, but for some reason when i try to flip through the mixtapes in thumbnail view they don’t load up their songs, only the rectangle with a big white space….any ideas?
[Reply]
replied: (on June 26th, 2008 10:16 am)
same…
[Reply]
replied: (on June 27th, 2008 11:23 am)
Same. Running 10.5.3 & 0.9.2.1
So gutted - please help!
[Reply]
replied: (on June 27th, 2008 12:10 pm)
Hey guys, I’m going to check this out with Todd as I am experiencing the same issues. The 0.9.2.1 updates included some changes to the way thumbnails are rendered (to be more efficient) I am guessing this is the root of the problem.
I’ll post an update as soon as I know what’s going on!
[Reply]
replied: (on June 27th, 2008 12:25 pm)
thanks cawlin, this is Todd, the developer of Fluid.
I just tried to use Fluid 0.9.2.1 (the latest version just released) with Muxtape, and I see this issue too. I know what is going wrong, and will ship a change to Fluid in the next version to fix it.
Here’s the deal. I made a change in the latest release to *not* execute JavaScript in the offscreen webpage renderer that generates the page thumbnails for the Coverflow view. This is actually a huge performance gain, as *all* JavaScript runs on the main GUI thread… that means you could have the JS for up to 50 webpages all running at once and blocking the UI… making interaction with Fluid often very choppy while the thumbnails are loading.
unfortunately, some sites like Muxtape generate their UI programmatically via JavaScript (Muxtape does this)… its pretty rare, and on the whole I think the change to 0.9.2.1 was def a good idea, and def a keeper. (if you ask me, Muxtap should def not be doing this, but I guess nobody asked me ;0])
Anyhow, it will be easy enough to add a single special case for Muxtape.com in the plugin. I’ll do that in the next release. It may be a week or so until this comes out tho. hold tight. thanks.
[Reply]
replied: (on June 27th, 2008 12:58 pm)
Thanks for the awesome breakdown Todd!
[Reply]
replied: (on June 28th, 2008 1:01 am)
Superior!
[Reply]
replied: (on June 29th, 2008 4:06 am)
Look forward to the update. Could you post here when updated perhaps and internetjoggin will alert us?
Thanks so much.
[Reply]
replied: (on June 29th, 2008 8:16 pm)
I will try to make a post whenever the new update goes live, however you can have fluid automatically check fro updates in the preferences of your SSB.
replied: (on June 30th, 2008 1:38 am)
Update: I’ve just released Fluid 0.9.2.2 which includes a fix for the Muxtape issue. Seems to be working ok… thanks all.
Thumbnails not working for me. I’m on Fluid version Version 0.9.6 (0.9.6) and running 10.5.6. Any ideas? Thanks.
[Reply]
replied: (on March 30th, 2009 9:22 am)
Are you taking about thumbnails in general or specifically on the muxtape website? The muxtape website has since changed and shut down it’s old functionality so you won’t find the thumbnails working.
[Reply]
[Reply]