sound animation toggle

[amistry]

Hi,

I've created a 'fake' sound equalizer which acts as a sound toggle button. When the music plays the animation plays with the sound and when you click the animation it stops as does the sound.

However, i want the animation to play on ENTER_FRAME, but cant figure out how to do it :confused:

here's the code i have

toggleButton.addEventListener(MouseEvent.MOUSE_OVER, rolloverToggle);
toggleButton.addEventListener(MouseEvent.MOUSE_OUT, rolloutToggle);
toggleButton.addEventListener(MouseEvent.CLICK,toggleClick);



var song:Sound = new Sound();
var songChannel:SoundChannel = new SoundChannel();
song.load(new URLRequest("nyc.mp3"));

function rolloverToggle(event:MouseEvent) {
	toggleButton.gotoAndStop(toggleButton.buttonState+" over");
}

function rolloutToggle(event:MouseEvent) {
	toggleButton.gotoAndStop(toggleButton.buttonState);
}
function toggleClick(event:MouseEvent) {
	if (toggleButton.buttonState == "on") {
		toggleButton.buttonState = "off";
		stopSong();
	} else {
		toggleButton.buttonState = "on";
		startSong();
	}
	toggleButton.gotoAndStop(toggleButton.buttonState+" over");
}
function startSong(){ 
	songChannel = song.play();
	songChannel.addEventListener(Event.SOUND_COMPLETE, songCompleteHandler);
}
function stopSong() {
	songChannel.stop();
}
function songCompleteHandler(event:Event) {
	toggleButton.buttonState = "off";
	toggleButton.gotoAndStop(toggleButton.buttonState+" off");
}

any help would be appreciated :)

[JasonHippy]

So toggleButton is also the equaliser animation?

If that is the case, then perhaps you could do something like this in your startSong function:

function startSong(){ 
	songChannel = song.play();
	songChannel.addEventListener(Event.SOUND_COMPLETE, songCompleteHandler);
	toggleButton.addEventListenter(Event.ENTER_FRAME, animateToggleButton);
}

You should also remove the ENTER_FRAME event handler in your stopSong function.

The animateToggleButton function, or whatever you decide to call it should then contain whatever code is necessary to animate the button.

This function will be then be called every frame while the song is playing.

Not sure if that's what you're after.

Alternatively, you could perhaps make the animation code a part of the toggleButton class. So if you want the animation to be done on a per frame basis using the ENTER_FRAME event, you could create a private event handler function in the toggleButton's class declaration to deal with the ENTER_FRAME event (I'll call it doAnimation, but you can call it whatever you like!) and then you just create two public functions in the class called something like startAnimation and stopAnimation. The functions should do something like this:

private function doAnimation(e:Event):void
{
 	// TODO: Your frame based animation code here
}

public function startAnimation():void
{
 	this.addEventListener(Event.ENTER_FRAME, doAnimation);
}

public function stopAnimation():void
{
	this.removeEventListener(Event.ENTER_FRAME, doAnimation);
}

That way from your startSong you can do this:

function startSong(){ 
	songChannel = song.play();
	songChannel.addEventListener(Event.SOUND_COMPLETE, songCompleteHandler);
	toggleButton.startAnimation();
}

Likewise in stopSong you can call toggleButton.stopAnimation(); to stop the animation.

Cheers for now,
Jas.

[rajarajan2017]

Jason, you explained clearly and one more thing I want to add to Mr. amistry:

If your animation want to play using onEnterFrame, you should keep a single frame for that to do. (ie) your equalizer animation should be done with the event handler of onEnterFrame with code in a single frame.