Adding Sounds to your Flex Applications

Update: Duh. Juan reminded me of the mx:SoundEffect class which can be used just like all of the other effects. You can use the [Bindable] and [Embed] tags and you can use mx:SoundEffect inside the mx:Parallel and mx:Sequence tags as a way to incorporate it into other effects:

1
2
3
4
5
6
7
8
	[Bindable]
        [Embed(source="assets/click_sound.mp3")]
        public var sound : Class;
 
	<mx:Parallel id="seq">
		<mx:Fade alphaFrom="1" alphaTo="0" duration="500" />
		<mx:SoundEffect source="{sound}" />
	</mx:Parallel>

As a Flex developer I spend a lot of time thinking about my UIs and how the components are going to fit and look together. But after watching Lee’s demos on the tour, I realized there is an important element that I don’t use in my Flex applications. In fact a lot of the Flex applications I use on a regular basis don’t seem to incorporate the element either: sound.

The sounds Lee uses add a lot of polish to his applications and demos. He’s got little sounds for rollover buttons, a nice, small sound effect inside of his “Spit Em Out” application, and a couple of others. Sounds add to both the usability and immersion of an application. Combining visual and audio queues when a user does something can help usability and even appeal more broadly to your users (not everyone is a visual person). I think in the Flash world sounds are very appropriately used but in Flex applications, because sound isn’t really baked into the framework at all (unlike, say, rollover effects) we don’t have them. So I encourage you to check out the Sound classes. Adding sound is really, really easy:

1
2
3
4
5
6
7
8
9
10
	<mx:Script>
		<![CDATA[
			public function onClick(event:Event) : void
			{
				var sound : Sound = new Sound(new URLRequest('assets/click_sound.mp3'));
				sound.play();
			}
		]]>
	</mx:Script>
	<mx:Button id="btn" width="100" height="30" click="onClick(event);" />

Look! Code on my blog….sort of. I created a very stupid simple project and put it on SVN with the source code above. It’s not really worth looking at but I may expand it later as I get into the sound classes more.

As you explore the sound classes more you’ll see that you can attach events to your sounds for handling the ID3 tags, get progress events, and errors. In Flash Player 10 we’re doing a lot more to let you manipulate sounds directly inside of the Flash Player.

Finding Sounds
The hardest part for me was figuring out where I could get sounds to add to my applications. Luckily, Lee knew so he gave me a few resources that should get you started:

If you know of any more, let me know in the comments. If you’re interested in mixing, converting, or adjusting sounds, you can check out the CS4 beta of Soundbooth. I’m grabbing it as we speak because I think it would be cool to have a library of nature sound effects to use in my apps.

Top 10 Apps Worth Installing Adobe AIR For

I’ve been impressed by the number of “Top” lists that are starting to include AIR. It turns out a lot of people are finding some cool apps in different categories to write about. Lifehacker is probably one of the most prominent of the “tops” and one of the best blogs out there so it’s really cool to see they’ve compiled a list of the Top 10 Apps Worth Installing Adobe AIR For.

Pretty good list I’d say.

Digging Into the Guts of The Flex Compiler

Matt Chotin posted about a new document which covers a bunch of the inner workings of the Flex Compiler. We open sourced the compiler as part of the open source Flex project and it’s probably one of the more interesting parts of the project but it’s always been a little bit of a black box. Compilers are also on the geekier end of things when it comes to development.

The new document covers everything from subcompilers, how MXML actually gets compiled into bytecode and also how things like Bindings and the Embed metadata work. As Danny notes, there are already a couple of people that have been using the open source compiler for their own projects. He also gives some good idea on other things you can create. I think it’s a cool effect of open sourcing Flex that you can really dig in to the nuts and bolts of how the Flex you write ends up on the users machine.

Adobe Swag Auction to Help Earthquake Victims in China

This is not something that all of my readers will be able to take advantage of but I thought it was a really great example of Adobe and the community doing something to help out the people in China. We’ve donated some swag to the Hong Kong Flex and AIR User Group to be auctioned off. All of the proceeds will go to the earthquake victims and the winner of the auction can decide which specific charity the money goes to.

The auction is supposed to end on June 20th, but it doesn’t look like anyone has bid yet (I can’t tell if there’s a different website) so if you’re interested in something, bid away (1 U.S. dollar is around 8 HKD)!

Huge kudos to Vicker, the Hong Kong User Group, John Koch, and Ed Sullivan for helping out.

AIR Cookbook Now in Beta

The AIR cookbook is now in beta and ready for you to input all of your tidbits of AIR knowledge. If you’re not familiar with the cookbook format you can head over and check out the Flex cookbook. It’s basically in the problem/solution format. You think of a problem you’ve solved in Flex and AIR and then you can provide the solution. It makes it easy for people to find how to do things they’re having trouble with and I think it’s a great way for the community to contribute content.

AIR 1.1 Available for Download

Cool! I just saw on the AIR Download page that we’ve released version 1.1, the updated version of the AIR runtime. We’ve fixed a ton of bugs, localized the runtimes to a bunch of languages including French, Spanish, German, Russian, Korean, Japanese, Chinese and a few more. Plus we’ve added some new APIs for developers:

  • Support for building internationalized applications, including keyboard input for double-byte languages
  • Support for localizing the name and description attributes in the application descriptor file
  • Support for localizing error messages, such as SQLError.detailID and SQLError.detailArguments, in the SQLite database
  • Addition of Capabilities.languages property to obtain an array of preferred UI languages as set by the operating system
  • HTML button labels and default menus, such as context menus and the Mac menu bar, have been localized to all supported languages
  • Support for certificate migration from a self-signed application to one that chains to a certificate of authority (CA)
  • Support for Microsoft Windows XP Tablet PC Edition and support for 64-bit editions of Windows Vista® Home Premium, Business, Ultimate, or Enterprise.
  • Addition of File.spaceAvailable : API to obtain the amount of disk space available on a disk
  • Addition of NativeWindow.supportsTransparency property to determine whether a window can be drawn as transparent by the current operating system
  • Bug fixes and memory improvements

A couple of things if you’re planning to start building AIR 1.1 applications with Flex. First, you need to update the SDK which is pretty easy. You also probably want to change the “xmlns” attribute in your application descriptor file to http://ns.adobe.com/air/application/1.1 which will let you take advantage of the performance improvements and the new features. We’ll also be pushing out the latest 1.1 AIR build to users so those people who have downloaded your application should be getting the newest version soon (but your 1.0 applications won’t be affected).

RSS Feed Issues

Thanks to everyone who dropped me a note about my RSS feed. I’m working on the problem. It has something to do with the WordPress blank line problem but I’ve been through all my files and haven’t been able to track down exactly which file is causing the problem. With the on AIR tour I’ve been too busy to spend a lot of time on it and blog. But we’re on the last day so I’ll be back to normal next week.

Tumblweed – AIR Application for Tumblr

I’m not a huge user of Tumblr. I have an account and I really like the concept, but between Twitter and regular blogging I say everything I have to say. But Tumblr does a nice job of dividing things up into categories like video, audio, quotes, etc. I just saw that there is an AIR application called Tumblweed that lets you post directly to your Tumblr blog. It’s got a clean, simple UI, and it uses the camera features of Flash to let you take a snapshot and upload it to Tumblr directly.

The app hasn’t been updated in a couple of weeks, so I’m not sure what development looks like but it has a lot of potential that hasn’t been built in yet. For instance, I’d love to have drag and drop file support that would automatically detect the type of media and then post that to Tumblr. Kind of like the ShifD application does.

But overall it’s a solid application and it may make Tumblr easier to use for me.

VIA MakeUseOf.com.

A Bit of Spring Cleaning

As you may have noticed my blog was set to the old default theme for a bit. I’m still having spam/random links issues so I had HostMySite do a total reinstall of the latest version of WordPress, I changed my theme, and rechecked all the permissions. Thanks a ton to everyone who sent me a heads up about my various issues (Google redirects, Mortgage Rate Spam, etc). I really appreciate both keeping an eye on it and taking the time to tell me.

Back to regularly scheduled blogging.

Debug Flash Applications with FireBug and ThunderBolt

At the on AIR tour in Berlin I just saw a really cool project called Thunderbolt by Jens Krause that lets you debug Flash applications in the browser using the very popular Firebug plugin. The project is an open source project and it’s hosted on Google code. It makes it really, really simple to get debug output and errors right inside of the Firebug browser interface.

Thunderbolt

For those of you not using Firebug you can also get an AIR version of the console that lets you send the output from a Flash application to an AIR app. It’s also open source and works pretty much the same way. The source code for that is also available. The application uses a combination of Flex and HTML and makes use of the YUI Tree component to display the output.

It’s another one of the great OSFlash projects so if you haven’t checked out OSFlash, you definitely should. There’s a ton of stuff going on in the open source Flash world.