Archive for the ‘ActionScript 3’ Category

A little bit about Sound | Using the Sound, SoundChannel, SoundTransform classes

Monday, April 7th, 2008

I didn't really mess up with sounds in ActionScript 3 until recently. I can say that it changed a lot since ActionScript 2, it's a bit more complex, but I'm pretty sure it gives more possibilities also.

First, you can either load the sound from the library, or you can load it externally. If it is from the library, you first have to click export for ActionScript in the property panel from that sound, and use the class name you gave it. Let say you gave it "MySound" as class name here is how you would simply make it play:

Actionscript:
  1. var someSound:MySound =  new MySound();
  2. someSound.play();

If you want to load your sound from an external file it is a bit different but afterward it's all the same:

Actionscript:
  1. var someSound:Sound = new Sound(new URLRequest("MySound.mp3"));
  2. someSound.play();
  3.  
  4. //it could also be done like this
  5. var someSound:Sound = new Sound();
  6. someSound.load(new URLRequest("MySound.mp3"));
  7. someSound.play() ;

In the last example, the file MySound.mp3 has to be in the same folder as the HTML embedding the SWF because that what I indicate in the URLRequest.

If you use only the Sound class the only thing you can do is make the sound play, that's it, no stop, no pause, no adjustment to the volume. For that you will have to use two other classes SoundChannel and SoundTransform.

SoundChannel

The SoundChannel class possess only one method and it's the stop method. I guess you konw what it does. here is how you use it:

Actionscript:
  1. var someSound:Soundnew Sound(new URLRequest("MySound.mp3"));
  2. var someChannel:SoundChannel = new SoundChannel();
  3. someChannel = someSound.play();
  4. someChannel.stop();

The last bit of code is actually useless because it will stop the sound right after it started it but it is only to show how to use a SoundChannel. Fine but how do you pause a sound and than make it play again with only a stop() method? The SoundChannel class has a property called position which indicate where the play head is at. You have to save the value of the position property before calling the stop method. If you save to position property value after calling the stop method, it will be of value 0 which is of no interest. What you do with the value of the position property is you pass it as a parameter to the Sound.play() method. The first parameter, startTime, tell the Sound Object at which millisecond to start playing. It's a bit confusing but this example should make it clearer:

Actionscript:
  1. var someSound:Soundnew Sound(new URLRequest("MySound.mp3"));
  2. var someChannel:SoundChannel = new SoundChannel();
  3. var somePosition:Number;
  4.  
  5. someChannel = someSound.play();//this make the sound play
  6. somePosition = someChannel.position; //saves the value of the position property
  7. someChannel.stop(); //pause or stop the sound
  8. someChannel = someSound.play(somePosition);//this make the sound play but it now start from the position at which it was stopped

The Sound.play() method also takes two other optional parameters. The first of the two is the loops parameter, it indicate how many times you want the sound to play in loop. If you want your sound to loop forever you just pass a really big number as parameter. if you want it to play just once you pass it 0. The second of the two (the third parameter really) is the SoundTransform parameter.

SoundTransform

The SoundTransform class as some properties and no methods, but I will only speak about the volume property here. The volume property is a number ranging from 0 to 1, 0 being silent and 1 being at full volume. You can either set it in the constructor or after the SoundTransform has been created. here is how you would make a sound play at half the maximum volume:

Actionscript:
  1. var someSound:Soundnew Sound(new URLRequest("MySound.mp3"));
  2. var someChannel:SoundChannel = new SoundChannel();
  3. var someTransform:SoundTransfrom = new SoundTransform(0.5); // the 0.5 value here tells it to set volume to half the maximum value
  4.  
  5. someChannel = someSound.play(0, 0, someTransform);//the first 0 is startTime, the second is the number of loop, and finally we pass our SoundTransform

If we wanted to change the volume as the sound is playing we would do it in this way:

Actionscript:
  1. var someSound:Soundnew Sound(new URLRequest("MySound.mp3"));
  2. var someChannel:SoundChannel = new SoundChannel();
  3. var someTransform:SoundTransfrom = new SoundTransform(0.5); // the 0.5 value here tells it to set volume to half the maximum value
  4.  
  5. someChannel = someSound.play(0, 0, someTransform);
  6. someTransform.volume = 1;
  7. someChannel.soundTransform = someTransform;

This would start playing the the sound at half the volume to set it afterward at maximum volume. Well that is as far as I go with sound, with that you can do most of the common tasks. In a future post I will show how to use TweenLite to fade the volume to zero.

Converting a RGB color and Alpha to ARGB in ActionScript 3

Tuesday, March 25th, 2008

So I was using the color picker component that comes with the Flash IDE. When the user selects a color, the color picker fire a ColorPickerEvent.CHANGE event and from that event you can access the new color that was chosen. The format of this color is a uint; when working with colors I am more used to the hexadecimal format.  From the event you can also access to the hexdecimal value, but as a String which is not that useful if you want to do operation on the color.

The color you get from the color picker component is in the RGB format, so no transparency. If you want to add an alpha channel to that color (converting it to ARGB), let's say to use the setPixel32 method of the BitmapData class  and produce Bitmap with transparency, you're going to have to modify the uint you can do so using this simple function (AS3):

Actionscript:
  1. private function returnARGB(rgb:uint, newAlpha:uint):uint{
  2. //newAlpha has to be in the 0 to 255 range
  3. var argb:uint = 0;
  4. argb += (newAlpha<<24);
  5. argb += (rgb);
  6. return argb;
  7. }

What this function does is that it bit shift the value of the Alpha you input and adds it to the original RGB color making it ARGB. You see, RGB format uses 8 bits for each color for each pixel (so 24 bits for each pixel), when you add transparency, the alpha channel takes up another 8 bits for each pixels (making it 32 bits for each pixel thus the 32 in setPixel32). That also explains why newAlpha has to be from 0 to 255, because 255 is the highest number you can store in 8 bits. The Blue color takes the bits from 1 to 8, the Green color takes the bits from 9 to 16, Red from 17 to 24 and finally Alpha from 25 to 32. This is why we bit shift alpha from 24 bits (newAlpha<<24);

I don't use the color picker component often,

Mixing timeline and AS3; where are my global variables

Sunday, March 9th, 2008

Well using only ActionScript to do a website at my company is kind of a break in the workflow.  Before I came, only designers were doing the Flash websites so it was mostly timeline with ActionScript all over the place (meaning not so much ActionScript, but well spread over timeline, buttons and MovieClips). It's not what I believe the best way to work.

So we get this microsite to do; I can show it to you because it is online right now. It's Ski-Doo Spring Promotion. For this microsite we had a really tight deadline; 3 days to do design and production of the whole microsite. So I had to work very closely with the designer, which was good because he is really creative at doing animations. The trouble is that he does them timeline and I am used to doing only ActionScript websites... So I had to learn to mix both ways.

Every thing was going fine until I had to use global variables. I forgot to mention that we decided to do this project in ActionScript 3, in which there are no global variables anymore. My need for global variables was for data that was passed from the html to the flash, the country from which the user came and his language. So at first I was using the root.loaderInfo.parameters.country (as an example) as a global variable. I could, from any timeline anywhere in any movieclip, reference the parameters  had passed to the flash.

The trouble arose when I had to add an external preloader to the microsite. All of a sudden all my call to root.loaderInfo.parameters did not work anymore. I had to find another solution to my problem which I found in the GlobalVarContainer class from greenethumb. It is a really easy class to use and it did exactly what I wanted. You should go check it out.

I know using global variables is not a not a best practice; it's not modular and you can't safely reuse your code everywhere. But in this case, it really helped me mix the timeline animation workflow with the coding workflow.

The right way to do RollOver Event in AS3

Friday, February 8th, 2008

I have been asking myself this question for a long time now. I see two ways of doing a roll over using ActionScript 3. The first one is pretty straight foward and it is the one you've seen everywhere. Here is some sample AS3 showing how to do it:

Actionscript:
  1. button.addEventListener(MouseEvent.MOUSE_OVER, manageMouseOver);
  2. button.addEventListener(MouseEvent.MOUSE_OUT, manageMouseOut);
  3.  
  4. function manageMouseOver(e:MouseEvent):void{
  5.   //your over code here
  6. }
  7.  
  8. function manageMouseOut(e:MouseEvent):void{
  9.   //your out code here
  10. }

This is the classical way off doing thing. Doing it this way implies that for all your button you always have 2 listeners to do your rollovers. There is another way of doing this that will always use only one listener. Here it is

Actionscript:
  1. button.addEventListener(MouseEvent.MOUSE_OVER, manageMouseOver);
  2.  
  3. function manageMouseOver(e:MouseEvent):void{
  4.   button.removeEventListener(MouseEvent.MOUSE_OVER, manageMouseOver);
  5.   button.addEventListener(MouseEvent.MOUSE_OUT, manageMouseOut);
  6.   //your over code here
  7. }
  8.  
  9. function manageMouseOut(e:MouseEvent):void{
  10.   button.removeEventListener(MouseEvent.MOUSE_OUT, manageMouseOver);
  11.   button.addEventListener(MouseEvent.MOUSE_OVER, manageMouseOut);
  12.   //your out code here
  13. }

Doing it it this way, there will be less listener active at the same time, but each rollover will do 4 more actions. So is having less listeners worth doing more computations; is there situations where you should use one technique more than the other; or it has so little impact that we should not care about it?

I'd really like to know.

Mutant Farm, on your LCD Screens soon

Sunday, January 13th, 2008

Since it is complete enough that I can show it, here is a project I have been working on for a little while now: Mutant Farm; A game where all sheep are evil.

I have done it in ActionScript 3 and it gave me much content to write about like the post about ActionScript 3 and interfaces.

It's obviously not completed but it will soon be there. My objectives with that game was first to learn ActionScript 3,  second to try to make a bit of money and third to drive traffic to my blog. The first objective as already been achieved but for the two others we will soon see to which extent I will achieve them. I intend also to release the code when the game will be forgotten (or something like that).

Here is what is on my check list to improve the game:

  •  add a preloader with sponsors and a link to zedia.net
  • add the story before the first level
  • improve all graphics (menu, in game, UI)
  • add music (menu, in game)
  • add better sounds
  • implement the between level upgrades that you can buy
  • add highscore mechanics and maybe a survival mode
  • add more levels and critters
  • add more weapons like grenades and the Ancient Artifact

Right now there is 4 levels and the fourth one is way too hard but it's going to be easier when you will be able to buy upgrades.

So go  play it now: Mutant Farm and fell free to leave me any comments about the game.

How to use interface in ActionScript 3

Tuesday, January 1st, 2008

There are a lot of good ActionScript 3 books out there, but in most of them all the examples about inheritance, composition, interface, polymorphism and more complex object oriented principles are done using data classes. It's good to explain the principles, but when you are ready to code some actual classes in Flash, some problems start to arise. Most of my problems come from the fact that 90% of the time I am coding classes that are a visual representation of something. So these classes extends the Sprite or MovieClip class.

So I was coding this game class where I have multiple kind of monsters but I want to use the same functions without checking what kind of monster it is. This is a case where polymorphism comes in handy. The thing is I didn't do my classes of monster using inheritance (which maybe I should have done), so in order to use polymorphism, I have to create an interface with the public methods common to all my monster classes. So I open the Colin Moock book and start looking at how to code interfaces. Here is a list of quick facts that will help you while doing so.

  • You have to list all public methods that will be common for the classes that implements this interface;
  • You do so by writing the definition of the function, its name, its parameters and its return type;
  • You don't have to open and close curly braces after the method definition
  • You don't specify if the method is private, public or protected (that's kind of obvious but I did that mistake)
  • interface can only extend other interfaces
  • a class can implement more than one interface

So here is an example of an interface in As3:

Actionscript:
  1. package com.mutantfarm.monster{
  2.   public interface IMonster {
  3.     function getShot(damage:uint):void;
  4.     function getCanShoot():Boolean;
  5.   }
  6. }

Here is how my visual class implements this interface while also extending the MovieClip class:

Actionscript:
  1. public class spriteMouton extends MovieClip implements IMonster{

It is important that you put the extend keyword before the implement keyword.

So most of what I just wrote about was details about interfaces, but when you start coding, all these details are important to know.

MovieClip transparency to mouse click

Saturday, December 22nd, 2007

Before ActionScript 3 came, when you had a MovieClip over a button, if that MovieClip didn't have any mouse function (onRelease, onRollOver, etc) you could interact with the button underneath. Most of the time this was an unwanted behavior that you had to circumvent by putting an invisible button in your MovieClip and use the useHandCursor =  false line of code.

Well in Flash 9, it doesn't work that way anymore, if you have a displayObject in front of a button (or displayObject with mouseEvent listeners), it will block the mouse events from happening. That's really nice in most cases, you don't have to do the invisible button anymore. But in the project that I just released I had these PNGs with a lot of transparency, so you could see the button underneath. The thing is that you couldn't interact with the button because of what I just explained earlier. I looked the documentation a bit and I found this property of the DisplayObject: mouseEnabled which is useful in these situations. When you set mouseEnabled to false, your MovieClip, Sprite, DisplayObject will be transparent to mouse events like clicks, rollOvers etc. That way button that are under the DisplayObject with mouseEnabled=false can still work.

Another neat thing with that is that DisplayObject inside the DisplayObject with mouseEnabled=false can still have mouse events. So it's pretty customizable and useful.

The best snow effect in ActionScript 3

Saturday, December 15th, 2007

During the last days I've been doing christmas cards for different clients for the agency I work for. One of those cards needed some snow in the background so I searched for different scripts in as3 to make a snow storm. I found 3 of those scripts  and I will review them in this post.

The first script is snow effect with wind from neatFilm. It looked nice on the website, but when I tried to integrate it in my movie nothing seemed to work quite right. The code seems really strange, there are a lot of "this" keyword used for nothing and an internal SnowFlake class that you don't know why it's internal.... I wouldn't advise using this class.

The second script is a script I found today. It's a script made by Seb Lee-Delisle in 15 minutes. Well this guy must be really good if he made that in 15 minutes because it works pretty nicely. It doesn't use too much CPU and I only had to tweak it a bit to make it work as a class that I could import easily.

The last script is made by the dude at pixelfumes. This guy released this code a long time ago and its been used on a lot of sites and even TV advertisements. The trouble is that this snow storm class is really heavy on the CPU, if you have 2 windows running one of your movie each, it's going to run very slowly. Also even with some evident tweeking made to the code it stays heavy on the CPU.

So you can guess that I was pretty happy when I found the galaxy goo script today. It's really the best one and next week I'll show you what I have done with it.

Using TweenLite in Preloaders

Thursday, December 13th, 2007

In the current project that I am doing, I need to do some Tweens in the preloader, nothing really fancy, just the habitual fade in / fade out ou move in / move out. I didn’t want to use Tweener because my preloader was only weighting 7k and using Tweener would have more than doubled the size of my preloader.

I was thinking at first about using the default Tweens classes from Adobe, but I decided to check out TweenLite. I was pretty amazed of what it can do. First it weights only 2k, but doesn’t include any easing functions, so if you want those you have to import the same classes as the Tween classes. If you use easing it adds 1k to the weight so it’s not too bad. So in total it’s only 1k more than the Tween classes.

So why use TweenLite instead of the Tween classes? Well the major advantage is that it uses a syntax really similar to Tweener. Since I use Tweener in the main Flash movie, I think it’s better for people that are going to use my code after me, they won’t have two syntax to learn in order to understand my code. Also this syntax is easy to understand and I can write it without have to copy and paste previous code.

Here is an example of code using TweenLite:

Actionscript:
  1. import gs.TweenLite;
  2. TweenLite.to(mc, 1, {x:46, y:43});

Using embedded fonts in Flash CS3 using ActionScript 3

Sunday, December 9th, 2007

I just thought  I'd make a quick post about how to use embedded fonts in Flash CS3 using ActionScript 3 because I had to do that last week and I did really know how to do it. Well it starts just as you did in Flash 8, you right click in the library and you choose New Font... Then choose the font you want to embed and click Ok. Now you'll have to right click on the new font in the library and choose linkage. In the pop window, click export for ActionScript and give it a class name. Once that is done you can use that font in any textfields you create  with ActionScript.

Here is code showing you how to do it:

Actionscript:
  1. var helve:Font = new Helve();
  2. buttonLabel = new TextField();
  3. txtFormat = new TextFormat();
  4. txtFormat.font = helve.fontName;
  5. txtFormat.color = 0x000000;
  6. txtFormat.size = 14;
  7. buttonLabel.embedFonts = true;
  8. buttonLabel.text = "place label text here";
  9. buttonLabel.setTextFormat(txtFormat);

My font class name in the library was Helve. I use the TextFormat object to set the font for the textfield, it's that easy.


Close
E-mail It