Crossfade audio in Flex – FadingSound prototype
I’ve been fielding questions about fading audio in Flex lately and decided to package up my FadingSound. I worked on this about a year ago and then threw it on the shelf, so I’ve begun cleaning it up and wanted to release a prototype as a proof of concept. This class creates the Sound and SoundChannel objects for you and fades in and out each song in a playlist. It’s so simple, all you have to do is create an instance say:
where “playlist” is an ArrayCollection of URLs. If you just want to have 1 song fade in or out, only put 1 URL in the array. Optional params specify the length of fades and the duration of the songs (if you want to scan through 10 second clips for example). See it in action here.
Fading 1 song in was the easy part – the hurlde was to have 2 channels playing at the same time and control their fades to give the illusion of concurrecny. There are still some bugs in it with buffering songs and fading out at the right time with dynamic tracks which is why the example only plays short clips rather than full songs. I’m in the process of cleaning that up and will update things when I get time. Also I’m going to have an mp3 player that utilizes this where you can create XML playlists to feed it. Feel free to drop me line with features you’d like or any comments on the FadingSound.
Application demoing the Prototype
4 commentsFirefox Popup Blocker – Don’t get caught!
Don’t get caught by Firefox’s popup blocker! Have you ever had some windows blocked and some not? Here’s a way to help ensure that your navigateToURL works in FF (even though having a popup is typically not a good idea in the first place and should be used sparingly).
Firefox tries to help you out and block malicious popups. This has to do with opening a new window without a direct user-interaction (e.g. opening a popup on page load rather than opening a window when a user specifically clicks a button).
I worked on a project where I had to open a new window from within a Flex app. When the user clicked a button, it did some processing behind the scenes based on their input fields, assembled a query string, then made the request to open a new window. Sometimes it worked, sometimes it didn’t! It was a really hard issue to nail down, but after a lot of testing I finally concluded that it had to do with the amount of time taken before the request was sent out.
After you initiate a click event, there’s a set amount of time the browser has to respond to it. If a new window is opened within that time limit, then you can get past the popup blocker because this is an accepted behaviour. Otherwise, it assumes that the request is not potentially not valid. Firefox (and most browsers) blocks this type of action because of malicous applications that could open several windows at will without permission.
Depending on your machine and what you has running at the time, the amount of code you can execute before you choke is variable. I created a quick demo here that illustrates this. If your popup blocker is enabled, one button will open a blank page, the other should get blocked. Right-click to view source. Here’s a snippet from it:
{
if (event.target.id == "success_btn")
{
popupSuccess();
}
else
{
popupFail();
}
}
private function popupSuccess():void
{
openNewWindow();
}
private function popupFail():void
{
// do some sort of heavy processing before making the request
for (var i:int=0; i < 1000; i++)
{
var o:Object = new Object();
var num:Number = Math.log(Math.PI);
o.num = num;
}
openNewWindow();
}
private function openNewWindow():void
{
navigateToURL( new URLRequest(URL), '_blank');
}
Flex 3 File Size – Export Release Build, Framework Cache
Reduce the size of your Flex application. In Flex 3, they’ve changed the way to use the debug swfs. Before, if you would Debug your app, it launched /myApp-debug.swf or if you just Ran it, it would launch /myApp.swf. It now seems to be all rolled into one swf for both Run or Debug. So if you’re going to push a release to production or anywhere online, make sure to use Projects->Export Release Build… for it. It takes out the debug information and copies the assets to a new folder.
This will take good chunk out of your application size. It took my latest project down from 840KB to 521KB.
If you want to take it down even more, then use the new Flex framework caching. This was something that we rallied to get from Adobe since Flex 2 and finally did! It can be found under Properties->Build Path->Library Path, and set Framework linkage to RSL.
I won’t go into the specifics of it, but it will put two files (framework_3.0.0.477.swz and .swf depending on your build number) in your release folder which you will need to include when you post a build. Also it requires use of Flash Player 9.0.115. For the same project it took the size from 521KB to 263KB! With these two options it cut the app down to almost 1/3 the originial size! Sweet!
Also as a sidenote, in Flex 2, I have run into some intermittent issues when using RSLs where the application would always look for the debug version. So I always had to compile with “-debug=false” in order for it not to throw up the debug message. I imagine that specifying the default option in flex-config.xml would also work, but it’s a pain to continually open another file.
3 commentsNew Blog – Finally
I finally got my new blog up and running. This is mainly here to serve as a placeholder, but in actuality, I’ll probably never delete it so I should try to at least put something useful here.I’ll be posting things that I have found to be helpful in my daily Flex development. Also I’ll be writing about issues I’ve come across that were painful to work around so hopefully someone else can reap the benefits of me banging my head against the wall. I’ve done a lot of work with using audio in Flex so I will be writing about Sound as well.
No comments