</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">var urlRequest:URLRequest = scClient.getSignedURLRequest(myTrack.stream_url);</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">var sound:Sound = new Sound(urlRequest);</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">sound.play();</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">

var urlRequest:URLRequest = scClient.getSignedURLRequest(somePrivateTrack.stream_url);

var sound:Sound = new Sound(urlRequest);

sound.play();

I also fixed an issue with GET parameters not being added. Thanks to Jesse for pointing this out  - check out his SoundCloud App for Android built with the AS3-API!

I’m trying to add support for SoundCloud’s new OAuth 2.0 API  in the next release. I’m not sure if this will bring any benefits but the guys at SoundCloud are asking every week for it ;) However, they will continue to support the “old” API.

Note that the project now has a new URL because I changed my github username to “dorianroy”: http://github.com/dorianroy/Soundcloud-AS3-API.

Before you can play around with the code, you’ll need to install the SoundCloud-AS3-API, the Swiz framework and get an application key from SoundCloud first. See the readme file for details.

I decided to release the code under GNU license to make sure that any improvements and modifications will have to be open-source,  too. Let me know if you’d like to contribute to the next release and want your modifications to be included in the next “official” release.

The new version 1.1 adds the new set type “Sample Collection”, enables bulk editing of the track type parameter and fixes a few issues (thanks for your bug reports!). Most important is a workaround for an annoying AIR bug under Linux that prevented Scup from opening the authentication page in the browser with the right parameters. I could only test it with AIR 2.0 on Ubuntu 10.04, but I’m confident that Scup now runs on other Linux distributions as well.

I know that there are some feature requests that didn’t make it into this release as I’m quite busy with another project and could only spend a few hours on Scup this time.  I hope to have more time for the next update.

The feedback forum for Scup has got an update as well, I’ve switched from Getsatisfaction to Uservoice because they offer different categories for issue reports. So now you can report a problem as a problem, and a question as a question. Makes sense, huh?

As a publisher, you might not want to annoy the visitors of your site with that. So I hacked together an alternative like button, that only connects to Facebook if you click it. Once you have clicked it, it looks and behaves the same as the original button (actually, it’s replaced by the original button when you click it). This way users can decide if they want to let Facebook know that they have visited your site. Try it here:

Here is how you can put this button on your website:

1. Copy the code snippet from here and put it in the HTML code of your page where you want the button to appear.
2. Go to this code-generator on Facebook and configure the button (usually you only need to enter your URL).
3. When you’re done, click “Get Code” on the Facebook-page.
4. From the iframe-field, copy only the characters from the first to the second quotation mark. Make sure you don’t miss the quotation marks, as shown here:
5. Paste this text into the code you’ve inserted in your page in step 1: just replace the string “PASTE_FACEBOOK_URL_HERE”. Keep the trailing semicolon after the end of the string.

That’s it! You should see the button expand when you click it and load the real like button.

If you want to change the text of the button: it’s located in the next to last line of the code. Just change it to whatever you like. The button will resize to the length of the text.

This code basically just displays a button and applies a stylesheet from Facebook to it, so it looks exactly like the real like button. Of course you can replace it with your own customized button. Just make sure that the ids of the button and its container stay the same (“flb” and “flbCont”) and that it calls insertLikeButton() when clicked. This function replaces your button with an iframe that sends your parameters and the user’s cookie to facebook and loads the actual like button and friends info.

If you have problems with the width and height of the expanded button, you should give the container div named “flbCont” a size that fits your needs. The loaded iframe will be resized to these dimensions.

This button actually allows Facebook to track all visitors of the external site, no matter if they click it or not (as long as they are Facebook users – but who isn’t?). Facebook can do that because they use an iframe to display the button. An iframe is something like an embedded browser window within a page. The difference between using an iframe and a simple image for the button is that the iframe contains a complete web page – from Facebook. There is not much going on on this page, except for the button and the information about how many people have liked the current page. Click here to open a like button page in a new window.

So when you see a like button on cnn.com, you are actually visiting a Facebook page at the same time. That allows Facebook to read a cookie on your computer, which it has created the last time you’ve logged in to Facebook. The cookie remains on your computer for months, even when you didn’t check the “keep me logged in”-option in the login form. It contains your Facebook user-id. A fundamental security rule in every browser is that only the website that has created a cookie can read it later on. And that is the advantage of the iframe: it allows Facebook to read your Facebook-cookie even when you are visiting a different website. That’s how they recognize you on cnn.com and display your friends there.

What I don’t like about this is that it is not opt-in. You’re not asked to be tracked on external sites by Facebook, and there is also no opt-out in the Facebook privacy settings. Honestly, you can’t blame Facebook for that, because there is no way they could check your privacy settings before they know who you are. The only way you can avoid being tracked by Facebook on other sites is to logout of Facebook before visiting any other site. That will delete the cookie.

(If you have a website or blog and want to include the like button, but do not want it to track the users without their consent, have a look at this post where you can see how to make a like button with opt-in)

And if you haven’t heard of Scup before, here’s what it’s all about.

The new version allows you to enter extended track settings like BPM, video-URL, label name, song type, tags and more. I’ve also included a button to copy all fields from the set to all if its tracks, so you don’t have to fill-in common fields like label name and license for each track of the set. Besides the new features, I’ve also added many little improvements (e.g. a signout-button) and bugfixes(removed tracks are now deleted on the server). The interface got some polish, too (smoother fonts, iPhone-like buttons).

Let me know what you think of it in the comments!

For example, this could be a good solution for a music player that lets users listen to their favourite SoundCloud playlists. It works without any backend services by using some Javascript and the Local Shared Object aka “Flash Cookie”. The tutorial requires some basic knowledge of how to pass variables to Flash, a little bit of JavaScript and intermediate AS3 skills.

The basic concept of the solution applies to every other API using OAuth 1.0a as well, so you also might find this tutorial interesting if you use Flash clients to access the API’s of Google Apps, Twitter or MySpace.

You can find the tutorial on the GitHub wiki pages of the SoundCloud AS3 API. It includes the full code of an example application made with Flash CS4. If you have questions or comments regarding this tutorial, please leave a comment here on this post.

Recently I have also corrected an error in the documentation of the AS3 API: You can’t compile the sources without the Flex framework, because the OAuth library that I use needs some Flex utility classes. I wasn’t aware of this dependency before (thanks to Marc for giving me the hint!). So if you want to include the SoundCloud API in a Flash CS4 project you have to use the pre-compiled SWC file instead of the .as sources. I have updated the docs and Flash example files accordingly.

The AS3 API repository on GitHub was apparently corrupted after the last update, which seems to have been caused by a known bug of the egit plugin for Eclipse (thanks to Matas for pointing this out ;) I have just fixed the repo and use SmartGit now to push updates to GitHub. I hope this will prevent such issues in the future.

Flash has two critical shortcomings that make it hard to use for many projects, not only on mobile devices:

1. Flash Player is an alien in the browser. You just need to look at the strange code that is necessary to embed it to know that. You can’t use your browser’s “Find” function to search its text. The browser can’t save passwords you’ve entered in a Flash form or even fill out a form with the data you’ve entered on other sites. Flash wouldn’t trigger special input tools of a device like mobile Safari’s Picker UI or work with the tap-to-zoom feature. You can’t use the browser’s controls to increase the font size used inside Flash Player. And there are many other examples. I wouldn’t create a complex UI for the browser with Flash anymore because of this.
2. Flash needs too many system resources. Thats’s something I always thought would get better over time with faster CPUs, but it never did. I don’t know if it is because of Adobe’s laziness or because content keeps getting heavier as well (more pixels per videoframe, more complex video codecs, more 3D objects, bigger screen sizes etc). All I know is that a site that makes heavy use of Flash burns my 2.4 GHz Core 2 Duo today just as it did with Flash Player 4 and my 500MHz Pentium III ten years ago. And that’s why I think Flash Player will never really work on a mobile device.

But today, using HTML5/Canvas for rich clients instead of Flash is no option either as it is not widely adopted by the browsers yet. You would end up in browser hell again. So what can you do as a Flash Developer to solve this situation in the next years? I think it depends on the type of project you are creating:

• If you create one of these FWA CPU burners: Don’t care at all, make it full Flash as always. Nobody could enjoy it on a mobile device anyway because of the smaller screen size. Wear your blue lego shirt with pride! ;)
• If you build a video/audio player, a slideshow or interactive charts: Use the Progressive Enhancement technique. Build a Canvas/JavaScript/CSS-based solution and implement a switch to replace it at runtime with a Flash version, if the browser doesn’t support the tags you’re using. Yes, that means extra work, but you can tell your client that he gets an “iPad version” for free! He will love it.
• If you develop games: Most Flash games can’t be simply ported to mobile devices, even if they run Flash Player. That’s because you have different input controls. You don’t have a keyboard on the iPhone for example (btw: HTML5 games like this one suffer from the same problem). So you have to decide which platform you want to build for anyway. Or try to design your game to work without a keyboard and mouse over gestures etc. In that case you can hopefully run it on Android with the upcoming 10.1. player and probably port it to the iPhone as a standalone app with the upcoming Flash CS5 exporter.
• If you develop a regular website: Try not to use Flash at all. Especially don’t use Flash only because you can. I did that a lot in the past and instantly regretted it when the Eee PC and the iPhone came out. If you have to integrate media content that can only be displayed on IE with Flash, use Progressive Enhancement. It’s the only way to ensure a good experience across all devices and browsers without creating a special version for each platform.

So chances are you have to learn some JS/CSS/HTML5. But probably you’d have to learn that anyway in the next years. And it can be fun, because nowadays JavaScript-Frameworks like jQuery will do the dirty DOM-work for you. The only problem is that you won’t be able to continue working with the tools you’ve got used to. There’s no IDE for building HTML/CSS/JS-based interfaces that is as easy to use as FlashBuilder/Catalyst or the Flash IDE. Today, I’d say the best thing about Flash (besides AIR, which is a totally different story) is AS3 and the IDE. And the biggest problem most Flash developers will face when they start to create HTML5 is probably JavaScript and the lack of a truly integrated IDE.

If Adobe wants to keep their customers happy they should stop whining about the iPad and start creating a great IDE for developing HTML5 apps. And by that I don’t mean copy/pasting SVG snippets from Illustrator to Dreamweaver. What about coding with AS3 and converting it to JavaScript in a cross-compiler manner, like the Google Web Toolkit does? What about introducing concepts like Skin States or the Timeline to HTML5 development? What about drawing your SVG graphics and cropping images within your coding environment? Automatically creating CSS sprites from your designs?

I definitely want that more than a Flash Player for the iPad.

I’ve built Scup as a demo application for the SoundCloud AS3 API and also as a learning project for myself, because it’s the first project I’ve done with the Swiz framework and the first using Spark components. When I find time to clean up the code a little I’m going to put it on github.

Thanks to the wonderful people at SoundCloud for having the idea (Eric), making the screen design (Katharina) and most of all helping me master the API and OAuth stuff (Hannes)! This is for you ;)

• Full ASDoc documentation is now available online
• Uploaded an example file for Flash CS4
• API is now prepared for scenarios where you want to automatically get an access token after authentication (I’ll do an extra post on this in the next days)
• Added support for requests to public resources without having to authenticate first

I should say a few words about the last point: If you want to build a simple audio player app like Citysounds (check it out, great stuff!) that only accesses public resources, chances are you don’t have to deal with OAuth authentication at all.

For example, the code to access the public tracks of  a specific SoundCloud user looks like this:

var scClient:SoundcloudClient = new SoundcloudClient("yourConsumerKey", "yourConsumerSecret");

var delegate:SoundcloudDelegate = scClient.sendRequest("users/anyUserName/tracks", "GET");

delegate.addEventListener(SoundcloudEvent.REQUEST_COMPLETE, requestCompleteHandler);

protected function requestCompleteHandler(event:SoundcloudEvent):void
{
  var trackList:XML = event.data as XML;

  trace(trackList);
}

This will give you a list of tracks in XML format with all properties like track title, URL and so on. You can then pick a track from the list and start playing the MP3 with the Sound class. Yes, it’s that simple! ;)

But as soon as you want to access private tracks or want to do write operations like  updating a user profile or uploading a track, you’ll need to go through the OAuth authentication process. Check the Quickstart Tutorial to see how this works.

UPDATE (05/17/2010)

SoundCloud is about to change the policy for accessing public resources via their API. They will soon require a consumer key and secret for all calls, no matter whether you use OAuth or not. They had already implemented that on the sandbox server on friday, pulled it back today, but plan to roll it out again on sandbox later this week. Anyway, it looks like you should prepare your app for this change as soon as possible. I just changed the example above to include “yourConsumerKey” and “yourConsumerSecret” in the constructor of the SoundcloudClient.

The bottom line is that you need to register your app with SoundCloud in any case now. But you don’t need to get an update of the Soundcloud-AS3-API files. And if you’re using OAuth, nothing changes at all for you.

You can find a detailed guide on how to register your app and use the app key and secret codes in the Github-Wiki (you can skip the authentication steps 4 – 6 if you don’t use OAuth).

Read more about this update in the SoundCloud API Google Group