Showing posts with label AS3. Show all posts
Showing posts with label AS3. Show all posts

Monday, August 16, 2010

Mute Button, soundChannel and soundTransform


Every sound that plays in the flash player plays through a unique sound channel. In order to control a sound that we have loaded and are able to play in Koolmoves we need to use this soundChannel Class. We play the sound through the sound Channel and if we want to stop the sound, we stop the sound Channel and not the sound itself. When it comes to controlling a sounds volume we use the soundTransform Class. In this post we are going to make a Mute Button, which is in reality a volume toggle. If we were to stop the sound using the soundChannel we would then have to come up with a way to re-load it. But we want the ability to turn the sound on and off while the sound continues playing. This is done with a conditional statement as we will see.


If you haven't done so, load up the previous file on loading a sound. This is what we will be working from. If you haven't got that project yet, go ahead and review the post on here: EYE-gor's Place: Koolmoves and Sound.
Add a button object from the koolmoves library or make one and name it "muteBtn". Leave this on the stage and open the ActionScript Editor. You should have a sound object in the Symbol Library with a class name of Ambient and your ActionScript on the timeline should look like this:


var ambientSound:Ambient = new Ambient();
ambientSound.play();


add two new variables after the first line of code:


var scChannel:SoundChannel = new SoundChannel();
var stTransform:SoundTransform = new SoundTransform();


and edit the last line of code to look like this:


scChannel = ambientSound.play();


from this point we are setting up our sound to play through a soundChannel defined as "scChannel" and set up a SoundTransform object called "stTransform". We should be able to play this again except this time the sound is playing through the soundChannel we have defined. The SoundTransform object is doing nothing yet. Our code should now look like this:


var ambientSound:Ambient = new Ambient();
var scChannel:SoundChannel = new SoundChannel();
var stTransform:SoundTransform = new SoundTransform();
scChannel = ambientSound.play();


The SoundTransform class contains properties for volume and panning, so this is the means by which we will develop the mute Button. We begin by starting to write an eventListener and a function for the button we have previously placed on the stage and add the code after our list of variables.


var ambientSound:Ambient = new Ambient();
var scChannel:SoundChannel = new SoundChannel();
var stTransform:SoundTransform = new SoundTransform();


muteBtn.addEventListener
    (MouseEvent.CLICK,muteButtonHandler);


scChannel = ambientSound.play();


This event listener tells the player to listen for a mouse button click on our muteBtn. When the button is clicked it will call the function "muteButtonHandler" which we will write next. Add the following code after the event Listener so your code looks like this:


var ambientSound:Ambient = new Ambient();
var scChannel:SoundChannel = new SoundChannel();
var stTransform:SoundTransform = new SoundTransform();


muteBtn.addEventListener
    (MouseEvent.CLICK,muteButtonHandler);


function muteButtonHandler(evt:MouseEvent):void{
    if (stTransform.volume > 0){
        stTransform.volume = 0
    }else{
        stTransform.volume = 1;
    }
    scChannel.soundTransform = stTransform;
}


scChannel = ambientSound.play();


What we have written is a conditional statement that says if the volume is greater than zero, or if the volume is on, turn the volume off. Otherwise turn the volume on. A "0" indicates 0% system volume and a "1" indicates 100% system volume. A".5" would indicate 50% system volume so you can see how this SoundTransform class is used for volume control. Within the function the soundTransform object itself has been passed into the sound Channel. The function for the mute Button will now turn our soundChannel on and off.


These last two Blog posts have explored adding a sound through the Symbol Library, playing it, passing that sound object through a soundChannel, and applying the SoundTransform volume properties to a mute Button function in order to mute the sound.

Friday, September 25, 2009

Koolmoves and the trace() statement

Getting Started
Unlike Flash, Koolmoves does not ship with an output panel to debug code. This can be corrected by installing the FlashLog Viewer from the KoolExchange. Once you have downloaded it you can pin it to your start menu for easy access. It works as a standalone viewer. You also need the debugger version of the Flash Player.

I have the latest debug Flash Player version installed for Mozilla Firefox and Koolmoves set to use the default browser rather than the native Internet Explorer. This can be set in Preferences/Player. You also need to set Firefox as the default browser on your computer.


The trace() statement
Once you are set up you can open your viewer as well as the Actionscript editor in Koolmoves. From author Derrick Ypenburg:


“The trace() statement will become your best friend in ActionScript development. Much of the ActionScript functionality you will create does not have a visual result on the stage, so it can be difficult to tell if your ActionScript is doing its job properly in the background. The trace() statement displays the results of your ActionScript as messages in the Output panel at runtime. The Output panel is also used to display loading errors and other non-ActionScript errors at runtime. You can also use the trace() statement to alert you when a task has begun and when it has completed.”

If one is to have a reasonable level of success with learning ActionScript in Koolmoves they will need this functionality. To see how this works, enter this code into the Action Script Editor:



In the Flash Log Viewer you should get a result that looks like this:





The first trace() statement is a String indicated by quotation marks. The statement will output anything in the quotation marks directly as written. In the second statement we have Numbers performing a math operation, and the trace() statement outputs the result of that operation.

You can also trace a variable as in:



We are are defining these two variables as Numbers and therefore we expect a Number in the result.
Place a zero after "num1"  to make it "num10" inside the trace() statement and it returns an error in the Flash Log Viewer:





When you get this result you know you need to go back and find the error and the Viewer tells you there is something wrong with var num10.  This shows how the trace() statement can be utilized in Koolmoves. As you continue to learn you will use this statement a lot. It also helps you see how the code you write works. Happy tracing.

Thursday, September 24, 2009

Koolmove Component Class Documentation and Manipulation

I finally came to understand something in Koolmoves with the help of one of the developers of the Koolmoves Components.  You see, Koolmoves ships with a great set of custom made components that you can drag onto the stage and assign certain properties via the properties panel. These components are all built with ActionScript and saved as Koolmove classes. I know this will sound confusing to anyone not familiar with the product.  Hang in there.

Now in Flash 9 or 10 mode you have to use ActionScript to assign different properties. You can go to the Documention of the Components to find out what properties, methods and functions can be used with each component. However, the Documentation only goes so far.

"The KoolMoves docs stop whenever an intrinsic flash player class is reached."
So there are other properties that can be used that may not be listed in the Koolmoves Documentation by virtue of the fact that these components inherit properties and methods from their parent classes. An example might be in order. This came form a question on the Koolmoves forum at Flashkit.

If you drag a Contentpane onto the stage and access it properties via the propeties dialog you will notice that you can "hide scrollbars" in Flash 8 which uses ActionScript 1 but you cannot in Flash 9 or 10 which uses ActionScript 3. So how does one accomplish this? By writing ActionScript 3 code in the ActionScript panel.

Now if you look in the Documentation for the Contenetpane you will scratch your head (or your hump) like me and wonder what to do. Assuming your Contentpane is named "contentpane1" you might get this far:

contentpane1.hScrollBar. ???
Here we are trying to get to the horizontal ScrollBar in the contentpane and do someting with it.  But when we consult the Koolmoves documentation we can't find anything like "Hide" or "getRidOf".  But we will find that the hScrollBar is an instance of ScrollBar. Still nothing. But we have a clue!  Now if we look at the add syntax menu indicated by the "+" symbol in the ActionScript panel and look at the properties of ScrollBar we will see visible. Now we are getting somewhere and can write:

contentpane1.hScrollBar.visible ???
Now we don't have any information on how to use this visible property in the Koolmoves program because the documentation stops at the intrinsic flash player class which in this case is Sprite, which has as one of it's properties visible.  Sprite got visible from the class DisplayObject which is the source of the visible property.  Think of visible as a genetic trait that is passed down through children. The geneology(so to speak) of this visible property is this:


ScrollBar > UIComponent > Sprite > DisplayObjectContainer > InteractiveObject > DisplayObject
Now to find out how to use visible we need to consult the ActionScript 3 Language Reference found at Adobe and we see that visible calls for a Boolean which is true or false. We could then write it like this:

contentpane1.hScrollBar.visible = false;

When we go to test our movie we will have a contentpane with the Horizontal Scroll Bar hidden.





This begins to show how the components shipped with Koolmoves can be manipulated for individual use, how to track down code applicable to the component in question, and demonstartes at least in part the inheritance aspect of AS3.