Flash Audio - Sound Visualisation & New Audio API

Date: 27th January 2009 at 11:37 pm | Filed under: development, flash | Author: Sam Burdge | Tags: , , ,

INSPIRATION

A long time ago I remember being inspired by the Dub Selector project at Infinite Wheel, a series of Flash movies that play heavy dub reggae loops, and incorporate various ways of triggering a selection of dub sound effects, drum rolls and keyboard notes. The project gave me the idea to create a more in-depth Flash music production tool, with many preset sounds and loops, and potentially audio sequencing tools too.

Dub SelectorDub SelectorDub Selector

MY PREVIOUS EXPERIMENTS WITH FLASH AND SOUND

This was back in the days of Flash 5 and I was a novice with Flash, I had only a basic grasp of actionscript. My first experiment was called ATG Beatbox. Here it is in all it's lo-fi glory!

Pretty basic,  but quite fun to play with too! The main problem I had was getting the samples to loop properly, and to get 2 or more samples to play in sync with each other. These restrictions made the possibility of sequencing very limited, so I ended up creating it so that the user could trigger the samples manually and had to time it right to get the 2 beats in sync.

The only way I could get the samples to loop cleanly was by importing them into the fla and attaching them to keyframes in the timeline.

I later made a few other experiments, such as a piano arpeggiator which used actionscript to play different arpeggio patterns. The timing was always an issue, and I concluded that Flash makes a lousy metronome! Unfortunately I seem to have lost the source files for this project :( so I can't provide an example.

Other more recent Flash projects I have done which include an element of sound are the SoundFX Player and Artanoid Game for 76 Creative. Artanoid uses the as2 attachSound method to load the mp3 files dynamically from the server.

SOUND VISUALISATION

New to actionscript 3 is the SoundMixer.computeSpectrum method, which takes a snapshot of the current sound wave and places it into the specified ByteArray object. The values are formatted as normalized floating-point values, in the range -1.0 to 1.0. The ByteArray object passed to the outputArray parameter is overwritten with the new values. The size of the ByteArray object created is fixed to 512 floating-point values, where the first 256 values represent the left audio channel, and the second 256 values represent the right audio channel.

It is explained in more depth in the article Sound Visualization in Flash CS3 by Tom Green, which is where I found out about it in the first place.

This is something I'm still experimenting with, but here's a basic example of what it can do:

Notice that because the audio sample is being loaded from the server using the Sound.load() method, the looping of the sample is still not satisfactory. The only way to make a sample loop properly still seems to be to import it and attach it to a keyframe. Here's another more abstract example:

There are a lot more cool examples of this type of Sound Visualisation at the AS3 Sound Spectrum Contest Results Be sure to check out the winning entry, which really demonstrates the scope of what can be done using computeSpectrum.

NEW SOUND API FOR FLASH 10

I recently discovered the Hobnox AudioTool, which is exactly the type of Flash based audio tool I imagined. It's actually amazing! As it features effects, like distortion, delay & reverb, phaser, etc. I could tell that, although the interface was flash, something else was being used to process the audio. The other thing I noticed was that the timing of it's drum machines was perfect! Something I've never been able to achieve with Flash.

Further investigation of the new sound API led me to these three articles by Adobe Engineer Tinic Uro, which seem to be a direct response to the Adobe, Make Some Noise campaign:

In Part 3 of the article he provides some code for a 'seamless loop' using the new extract() method with the samplesCallback event handler. I will put this code to the test as I am sure it will lead to new projects and experiments for me, the results of which will surely appear on my site in the near future!

Other Flash projects that utilise the new sound API are Tenoran, a sampling and basic sequencing instrument, and Noteflight, a a full-featured application that displays, edits, prints and plays back music notation.

Leave a Comment

Time delay loading for swf files and images

Date: 26th March 2008 at 11:54 pm | Filed under: actionscript, development, flash, scripts | Author: Sam Burdge

Q. How can I make an image or swf file load after a specified number of seconds?

A. Use the simple but effective flash_timer.swf file by Sam Burdge. Whoopeee!

Ever wanted a particular Flash movie or image to load up / start playing after the rest of your page has loaded, or after a set amount of time? This tutorial, and the support files provided with it will make it very easy indeed. The flash_timer.swf file will load a swf or image into your page after a number of seconds that you specify.

Example:

Check out this basic example to see a swf (called test.swf) load after a 10 second delay: Example 1
You can view the source code of the example to see how it works.

Usage:

  1. Download the source files using the link below, and unzip the archive.
  2. Embed the swf file 'flash_timer.swf' into your webpage. In my example I have used the swfObject method to embed the file, but you can use whichever method you prefer. For more information about this you can check this useful tutorial by Jeroen Wijering.
  3. Set the height, width & background colour of the swf according to those of the file you want to load in.
  4. Pass the two variables that the file requires to work: myswf – the file that will be loaded & mysecs – the number of seconds delay before the file is loaded. You can pass the variables in the url string, for example:

flash_timer.swf?myswf=my_movie.swf&mysecs=5

(This will load the movie 'my_movie.swf' after a 5 second delay.)

You can also pass the variables as flashvars, for example:

flashvars="myswf=example.jpg&mysecs=10"

(This will load the image 'example.jpg' after a 10 second delay.)

I hope you find this useful, if you do or if you have any questions, please feel free to leave a comment on this page (no emails please, I won't reply unless you are offering me hard cash!!). The flash_timer.swf file is only 1kb, so it will not effect the overall loading time of your page, it can be embedded at any height/width dimensions and works from flash player 7 upwards.

Download Source:

The download contains the all important flash_timer.swf plus a working example (index.html). The size of the zip is 6kb. Enjoy!!


14 Responses to “Time delay loading for swf files and images”

  • Comment by Bob Stone
    Date: May 12th, 2008 at 1:32 pm

    Excellent, excellent, excellent! spectacular! stupendous!

    Was exactly what I was looking for.
    And does exactly what you said it would do!
    Can’t say that about many other things I’ve downloaded - including stuff I’ve paid for!

    Good show!

  • Comment by Wayne Moran
    Date: June 21st, 2008 at 1:40 am

    Great tool - well done. One issue however: how can I prevent my video from repeating / looping continuiously. I have tried setting &loop=false as part of passing the swf filename and I have set it in the calling code as well but it ignores them. See the code below:

  • Comment by Nathan
    Date: September 10th, 2008 at 10:14 pm

    I have the same problem as Wayne Moran. I would like the flash to run only once, as the constant repeating would detract from the sight and prevent the point of the flash from being made.

  • Comment by dave.com
    Date: September 19th, 2008 at 5:57 pm

    Works perfectly… Amazingly simple…see http://www.hotmix.org

  • Comment by Bhaskar
    Date: November 28th, 2008 at 4:39 am

    Excellent work !.
    Its working fine. But I have placed my own swf insted of yours (test.swf). That is not working. Can you suggest a solution.

  • Comment by delicious
    Date: April 27th, 2009 at 12:03 am

    So, if I understood this:
    I have a webpage, I want it to download the page files that are not flash files first, so clients be able of start reading stuff and see some light weight images, so once the files be downloaded say 5 secs, as it is rather light stuff, then I would like the flash file to start being downloaded, because clients will be busy reading and watching other stuff while the flash file downloads, is that correct????????

  • Comment by George
    Date: August 20th, 2009 at 8:29 am

    Great tool.
    @ Wayne Moran and Nathan: This is not a problem of the swf file from Sam, it must be a problem of your swf, which loops.
    Bye
    George

  • Comment by Kyle
    Date: September 4th, 2009 at 1:53 pm

    I cannot get this to work on a LAMP server. Any ideas?

  • Comment by istochath
    Date: September 29th, 2009 at 8:28 pm

    I am a total noob at times, more an artist than a webmaster. I’m trying to plug this in with no success. Could I get a hand with this, I’m plunking it in to a div cause I have a heavily layerd page. Thanks.

  • Comment by lushmind
    Date: December 23rd, 2009 at 2:26 am

    what is the function of the “8″ in the string? it seems to be a variable, but for what?

    thanks.

  • Comment by clarp
    Date: October 5th, 2010 at 12:07 pm

    Hi Sam, Sorry but I’m being very dumb… I follow the logic but can’t seem to apply it to my situation!
    I’m using a javascript call on a swf music player.

    Happy to send a donation to a fellow Brit to get it working ;-)

    Thanks,

    Peter

    var options = {};
    options.mediaPath = “images/stories/audio/lifestyle_mono.mp3″;
    options.firstColor = “b7b7b7″;
    options.backColor = “3E2D23″;
    options.strokeColor = “3E2D23″;
    options.autoPlay = “true”;
    var params = {};
    params.allowScriptAccess = “always”;
    swfobject.embedSWF(”images/stories/audio/LWMusicPlayer.swf”, “player-holder”, “45″, “21″, “9.0.0″,false, options, {}, {});

  • Comment by Diana
    Date: October 27th, 2010 at 8:36 pm

    Fabulous! You rock man, quick question, is there a way i can have a background image displayed until it starts showing the movie?

  • Comment by Jennifer
    Date: December 22nd, 2010 at 5:16 pm

    I am trying to implement this on my site and everything works great except there is a giant black box in the space where my movie will be once it loads. Is there a way to have an image there instead, that will then be replaced once the movie loads? How would I do this…

    Thanks! <3

  • Comment by dionys
    Date: March 11th, 2011 at 7:13 pm

    I have links on my flash file (set with .xml file). They don’t work with flash_timer.swf. Do you have any ideas why?

Leave a Comment

random timing and color actionscripts

Date: 19th October 2007 at 1:45 am | Filed under: actionscript, development | Author: Sam Burdge

Here are the actionscripts used in the {{post id="flash-mousetrails-with-random-flashes" text="example" target="_self"}} swf. First the random timing script:

Read on…

Leave a Comment