Antti Kupila

Personal Blog, Portfolio and Online playground

View over the green room at Sid Lee, Montreal

Flame – 3D music in Actionscript 3

A couple days ago i happened to stumble upon a really cool 3d engine called papervision3d. It’s been out quite some time already, and i’ve heard of it before, but i’ve never really gotten to it to actually play around with it. Well, no i have – and boy, i love it. It’s amazing! Huuuge props to Carlos Ulloa + everybody else who have contributed to this magnificent open source project.

This also gave me a reason to get back and play with as3 a bit again. Due to loadsa other stuff it’s been a while and i had already forgotten how great it is compared to as2 ;) Actually it’s not so nice working with projects in as2 anymore, but you’ve gotta do what you’ve gotta do ;)

Anyway, flame. Or well, yeah, that’s what i wanted to call this experiment. Codename: flame maybe? Either way the first time i iTunes‘ CoverFlow i really liked it. In general i love pretty much everything Apple does visually, and CoverFlow was no exception. So i got my dose of inspiration pretty easily. Also papervision3d is so amazingly easy to work with (compared with the results) that i just had to sit up way too late a night or two, doing some nifty demos. At the same time we also had this technology specialization module at school, where we were supposed to do some technological individual project, so this fit in pretty nicely. I heard of the deadline pretty close to 24h before :)

Well, you probably wanna see what i did? Sure.
As it’s written in actionscript 3 the Flash 9 player required. A fast computer is recommended.

Click to see flame live!

So, what is it? When you start it, it asks for an artist. Type in something you like and flame will find similar artists, that you probably also will like. You can then browse the artists in a cool 3d interface using the arrow keys. The amount of artists is limited due to performance issues. Also the images look like crap because of the original low resolution (about 160px), sorry for that.
All the data comes from last.fm, thanks! :)

When you find a cover image that seems interesting, why not listen to a song or two? Alrighty, just press the up arrow (or enter) and you’ll enter listening mode, where flame will play short samples from a couple songs. If it’s all quiet, a sample for the artist you’ve chosen doesn’t exist (yeah i know, could maybe have some indication .. but hey, the version number is 0.1.1, can’t expect miracles). There are also a couple known bugs and probably several more that i don’t know of, but i’m guessing you understand this is just an experiment.

As probably everybody who has worked with flash and external data knows crossdomain.xml is a bitch. I created a simple php script that acts as a proxy for the data, allowing flash to load the files (this means that every single image goes through my server, even if it comes from last.fm). Another pretty cool thing was the music. Last.fm doesn’t provide links to the mp3 files, so what i do is send the link to the artist’s page on last.fm to another script, which will screen scrape the page, find some stuff i need and out of it figure out what the url to the mp3 is. Works like a charm, as long as the artist has streamable music :) Big thanks to Joel Larsson for helping out with this one!

That’s about it for an introduction, go play with flame and feel free to leave a comment or two.

Oh, before you ask:
Yes, the sourcecode will be released as soon as i’ve cleaned it up a bit and tweaked a couple small things ;)

Update: the source is available here

I hope you get inspired enough to do your own cool demos with papervision3d

Comments

30 Comments
  1. 2007-03-11, 10:12 by C4RL05

    Very nice implementation. Really smooth and it all works great. Good luck in San Francisco. :)

  2. 2007-03-13, 13:15 by u.yang

    cool,God job.

  3. 2007-03-14, 1:39 by Code Odyssey » Lyssna på musik i 3D

    […] Jag har precis gått med i maillistan för Papervision3D – en fri 3Dmotor till flash. Genom denna får jag reda på att Antti Kupila har lekt lite med motorn och fått till något riktigt lovande. […]

  4. 2007-03-14, 18:17 by Flame actionscript 3 source released | Blog / Antti Kupila

    [...] Flame – 3D music in Actionscript 3 [...]

  5. 2007-03-18, 19:21 by Yrving

    ok now it’s working! FF and Safari. I think it was the connection to the fm
    This is amazing! I can listen to song previews. Once again nice job!

  6. 2007-03-31, 8:24 by Afiq

    dude!i’ve been searching too Long to a tutoriaL on how to make a cover flow to my gallery website..mayB you can..please……………….;)

  7. 2007-04-04, 9:15 by Antti Author comment

    Well a tutorial for something like this doesn’t seem too relevant to me. I mean, it’s basically just putting small pieces together. Read some tutorials on papervision & play around with it and you’ll be able to create something like this in notime. Also, as you may have noticed i released the source, so take a look at it, try to understand how it works and create something cool yourself. Don’t be afraid o playing around, doing it wrong once and then doing it right ;)

  8. 2007-04-04, 10:09 by Afiq

    thanx!

  9. 2007-06-15, 6:11 by Papervision and Screenscraping. « Amul’s Digital Life?

    [...] clipped from http://www.anttikupila.com [...]

  10. 2007-06-22, 15:12 by Afiq!

    HeLLo!a coupLe month ago I asked to you about the tutoriaL..but then Ive found another way Like this effect(?) thanx to you,thanx!
    papai!

  11. 2007-07-09, 10:06 by Papervision3D goes public beta – Antti Kupila

    [...] I even got my 3 seconds of fame by having flame in the [...]

  12. 2007-07-10, 21:24 by avi

    how come its slow?

  13. 2007-07-30, 23:41 by Pixel Acres » Blog Archive » Papervision 3D

    [...] by Antii Kupila’s stunning Flame, which creates a 3D interface for last.fm, I created a simple 3D gallery of album covers using [...]

  14. 2007-07-31, 11:30 by Wim

    Antti, you have done a wonderful job with Flame dude.

    As for the audio (scraping) it seems the url has been changed to kingpin2 instead of kingpin.
    So something like this should work now:
    http://kingpin2.last.fm/preview/1299230.mp3

    Cheers and good luck at AKQA!

  15. 2007-07-31, 20:17 by Antti Author comment

    Oh, thanks for noticing that Wim. Fixed it and it works like a charm (considering it’s .. well, not even alpha) :)

    Thanks for all the feedback, i truly appreciate it

  16. 2007-08-07, 5:40 by Sebastian

    Flame is not working in my MacBooc, I am using the latest firefox and the latest flash player (9.0.47). The form is showing up and I can send date through it, but later the screen remains black, although the browser says “transfering data from cdn.last.fm” in the bottom status bar.

    Has anyone an idea what is wrong?
    Thanks!

  17. 2007-08-07, 6:12 by Sebastian

    Erm, sorrry, MacBoo*k* of course :-)

  18. 2007-08-25, 18:49 by Platfuse

    Great Implementation. thanks for the source

  19. 2007-08-28, 19:38 by Chris D

    Hi

    I am getting flash errors after searching for an artist in flame
    Maybe because of a new player version?

    The first one is:

    TypeError: Error #1009: Der Zugriff auf eine Eigenschaft oder eine Methode eines null-Objektverweises ist nicht möglich.
    at Main/Main::draw3D()
    at [enterFrameEvent]

  20. 2007-10-02, 15:34 by Meindert

    Same error here (only in English). After I ‘upgraded’ from flash player 9 debugger to the normal flash player 9, nothing happens at all. And I would love to see it in action! :)

  21. 2007-10-09, 19:23 by Coverflow Gone Wild! AS3, Last.FM and CoverFlow | Weber Design Labs

    [...] http://www.anttikupila.com/flash/flame-3d-music-in-actionscript-3/  [...]

  22. 2007-10-10, 19:56 by Gorran

    not working for me either

    tested with latest beta flash in firefox, opera ans safari. And with latest stable flash activeX in IE7.

  23. 2007-10-10, 23:11 by Antti Author comment

    If it suddenly doesn’t work, it is almost certainly because Last.fm has changed something somewhere. This has happened multiple times already and unless I fix the app to come around those changes, it stops working (and since it’s just a quick experiment, you of course won’t be notified in any way :) ).

    However, since I still have huge demand for this one, I decided to fix it. So now, Oct 10th, it works again!

    If you notice it stopping working, please let me know. Or even better; download the source, fix the problem and share what you learned with me :)

    http://www.anttikupila.com/files/flame/Main.html

  24. 2007-10-11, 17:16 by Pat Buchanan

    Doesn’t work for me :( Looks like they changed something on you again!

    Error #2044: Unhandled securityError:. text=Error #2048: Security sandbox violation: http://www.anttikupila.com/files/flame/flame.swf cannot load data from http://ws.audioscrobbler.com/1.0/artist/Brooks/similar.xml.
    at Main/initLoaders()
    at Main/init3DScene()
    at Main()

  25. 2007-10-11, 17:31 by Antti Author comment

    That’s weird. I changed a small thing that makes it check the policy file in advance (which is *, meaning it should be allowed to load without extra fuzz). Maybe it’s better now?

  26. 2008-02-12, 18:52 by nachtgedanken » Blog Archive » datenvisualisierung mit flash und papervision3d

    [...] antti kupila visualisiert auf eine eindrucksvolle weise daten, die sie von last.fm bezieht. dabei nutzt die applikation papervision3d zur darstellung. gesteuert wird das ganze mit den [...]

  27. 2008-03-20, 19:08 by Philip

    Nice use of PV3D.

    I’m viewing using the Flash 9r115 Debug player and I get the following runtime errors when using arrow keys zooming in and rotating.

    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at gfx.scene3d::Album3D/stopPreview()
    at gfx.scene3d::Arc/stopPreview()
    at Main/keyHandler()

  28. 2008-04-07, 8:13 by Devertex

    Nice job.
    It made me try my own papervision experiments. Thanks a lot.

    Maybe you could try to load the images directly from last.fm. The current line you use to load photos is:
    imageLoader.load( new URLRequest( “http://www.anttikupila.com/crossdomain-proxy.php?url=” + _image ) );

    and something like this would do the job ; )
    var loaderContext:LoaderContext = new LoaderContext ();
    loaderContext.checkPolicyFile = true;
    imageLoader.load( new URLRequest( _image ) , loaderContext );

    I doesn’t have tested it since I’can’t compile it right now but this is something I had to do to load photos from flickr for my experiments.
    I hope it helps.

  29. 2008-04-07, 17:42 by Antti Author comment

    Devertex: At the time when i wrote flame last.fm’s crossdomain policy file (http://www.last.fm/crossdomain.xml) didn’t allow this and i had to hack around it. Now however it does so yes, as you’re saying, it would work with getting it directly.

  30. 2009-10-29, 23:22 by Stephie

    Interesting points on screen scrapers, For screen scrapers i use python for simple things, but for larger projects i used screen scraper which worked great, they build quick custom screen scraper and web scraper programs

Post a comment