Help with Flash CS3 Particle Effect Tutorial Code

[kikibres]

I did the tutorial from http://www.schoolofflash.com/2008/03/flash-cs3-particle-effect/. I used a star to replace the circle. Here's my code:

var starsArray:Array = new Array();

var maxStarss:Number = 8;

function addStars(e:Event)

{

    var stars:Stars = new Stars();

    stars.x = stage.stageWidth/2;

    stars.y = stage.stageHeight/2;

    stars.alpha = Math.random() * .8 + .2;

    stars.scaleX = stars.scaleY = Math.random() * .8 + .2;

    stars.xMovement = Math.random() * 10 - 5;

    stars.yMovement = Math.random() * 10 - 5;

    starsArray.push(stars);

    addChild(stars);

    stars.cacheAsBitmap = true;

    if (starsArray.length >= maxStarss)

    {

        removeChild(starsArray.shift());

    }

    stars.addEventListener(Event.ENTER_FRAME,moveStars);

}

function moveStars(e:Event)

{

    e.currentTarget.x += e.currentTarget.xMovement;

    e.currentTarget.y += e.currentTarget.yMovement;

}

var myTimer:Timer = new Timer(50);

myTimer.addEventListener(TimerEvent.TIMER, addStars);

myTimer.start();

This time, I'm trying to make the stars shrink and transparent as they move away from the point. So I coded it like this:

import flash.events.Event;

var starsArray:Array = new Array();

var maxStarss:Number = 8;

function addStars(e:Event)

{

    var stars:Stars = new Stars();

    stars.x = stage.stageWidth/2;

    stars.y = stage.stageHeight/2;

    stars.alpha = Math.random() * .8 + .2;

    stars.scaleX = stars.scaleY = Math.random() * .8 + .2;

    stars.xMovement = Math.random() * 10 - 5;

    stars.yMovement = Math.random() * 10 - 5;

    starsArray.push(stars);

    addChild(stars);

    stars.cacheAsBitmap = true;

    if (starsArray.length >= maxStarss)

    {

        removeChild(starsArray.shift());

    }

    stars.addEventListener(Event.ENTER_FRAME,moveStars);

    stars.addEventListener(Event.ENTER_FRAME,animeStars);

}

function animeStars(e:Event)

{

    trace(this.starsArray);

    this.scaleX-=0.01;

    this.scaleY-=0.01;

    this.alpha-=0.01;

    if (this.alpha<=0) // remove this object from stage

}

function moveStars(e:Event)

{

    e.currentTarget.x += e.currentTarget.xMovement;

    e.currentTarget.y += e.currentTarget.yMovement;

}

var myTimer:Timer = new Timer(50);

myTimer.addEventListener(TimerEvent.TIMER, addStars, animeStars);

myTimer.start();

I couldn't make it work. All I got was an error message saying "

1084: Syntax error: expecting identifier before rightbrace.

Help?

[___x-_V_P_-x___]

Flash is complaining about the unfinished If statement

if (this.alpha<=0) // remove this object from stage

should be

if(this.alpha<=0){

     //remove this object from stage

}

[kikibres]

I did what you said but I got another error:

Warning: 3553: Function value used where type Boolean was expected.  Possibly the parentheses () are missing after this function reference.

Did you know that you can download the flash file at the end of the tutorial (http://www.schoolofflash.com/2008/03/flash-cs3-particle-effect/4/) in order to look at the code?

[___x-_V_P_-x___]

It is because of this line of code at the end

myTimer.addEventListener(TimerEvent.TIMER, addStars, animeStars);

if you read the documentation on addeventlistener it looks for these type of arguments to be passed

addEventListener(type:String, listener:Function, useCapture:Boolean);

animeStars is not a boolean it is a function. Since you already have animeStars in your addStars function you can exclude it in the last event listerer. try this:

myTimer.addEventListener(TimerEvent.TIMER, addStars);

[kikibres]

Something went wrong.

When I tried to test the movie, it didn't show the result but went to the "output" screen saying,"[object Stars],[object Stars],[object Stars],[object Stars],[object Stars],[object Stars]" and so on...

I think it has something to do with the placement of "stars.addEventListener(Event.ENTER_FRAME,animeStars);" or maybe it's because there are two alphas, two scaleX, and two scaleY. Not sure...

Thanks for your explanation about addeventlistener. I'm still learning Actionscript 3. It's really different from actionscript 2 and also I really didn't use flash that much....I'm planning to use it for a flash banner and after I resolve the problem, I'm going to try and put this on motion path or something like that.

[kikibres]

Hello? I don't want to brother you if you are busy. Still, I haven't solved my problem yet.

When I tried to test the movie, it didn't show the result but went to the "output" screen saying,"[object Stars],[object Stars],[object Stars],[object Stars],[object Stars],[object Stars]" and so on...

I think it has something to do with the placement of "stars.addEventListener(Event.ENTER_FRAME,animeStars);" or maybe it's because there are two alphas, two scaleX, and two scaleY. Not sure...

I appreciate any help that you offers.

[Andrei1-bKoviI]

To begin with you should not use this tutorial as is - it promotes extremely bad inefficiencies. The top two are:

1. It uses a lot of ENTER_FRAME listeners;
2. It does not remove listeners from unused objects.

Code below make it much more efficient.

import flash.display.MovieClip;
var starsArray:Array = new Array();
var maxStarss:Number = 8;
var myTimer:Timer = new Timer(50);
myTimer.addEventListener(TimerEvent.TIMER, addStars);
myTimer.start();
addEventListener(Event.ENTER_FRAME, moveStars);
function addStars(e:Event):void
{
          var stars:Stars = new Stars();
          stars.x = stage.stageWidth / 2;
          stars.y = stage.stageHeight / 2;
          stars.alpha = Math.random() * .8 + .2;
          stars.scaleX = stars.scaleY = Math.random() * .8 + .2;
          stars.xMovement = Math.random() * 10 - 5;
          stars.yMovement = Math.random() * 10 - 5;
          starsArray.push(stars);
          addChild(stars);
          stars.cacheAsBitmap = true;
          if (starsArray.length >= maxStarss)
          {
                    removeChild(starsArray.shift());
          }
}
function moveStars(e:Event):void
{
          for each (var star:MovieClip in starsArray)
          {
                    star.x += star.xMovement;
                    star.y += star.yMovement;
          }
}

[Andrei1-bKoviI]

And your second iteration that changes scale an alpha should be something like this:

import flash.display.MovieClip;
var starsArray:Array = new Array();
var maxStarss:Number = 8;
var myTimer:Timer = new Timer(50);
myTimer.addEventListener(TimerEvent.TIMER, addStars);
myTimer.start();
addEventListener(Event.ENTER_FRAME, moveStars);
function addStars(e:Event):void
{
          var stars:Stars = new Stars();
          stars.x = stage.stageWidth / 2;
          stars.y = stage.stageHeight / 2;
          stars.alpha = Math.random() * .8 + .2;
          stars.scaleX = stars.scaleY = Math.random() * .8 + .2;
          stars.xMovement = Math.random() * 10 - 5;
          stars.yMovement = Math.random() * 10 - 5;
          starsArray.push(stars);
          addChild(stars);
          stars.cacheAsBitmap = true;
          if (starsArray.length >= maxStarss)
          {
                    removeChild(starsArray.shift());
          }
}
function moveStars(e:Event):void
{
          for each (var star:MovieClip in starsArray)
          {
                    star.x += star.xMovement;
                    star.y += star.yMovement;
          }
          this.scaleX -= 0.01;
          this.scaleY -= 0.01;
          this.alpha -= 0.01;
          if (this.alpha <= 0)
          {
                    removeEventListener(Event.ENTER_FRAME, moveStars);
          }
}

[kikibres]

Well, this code is great except for one tiny thing.

the whole screen shrink and disappear, not just the stars itselves that are supposed to fade away and shrink as they move away from the point......

do I change "this." to "stars."? Except when I do this, I get this error, "1120: Access of undefined property stars.".

There are another way I'm kinda thinking of doing. Double-click on the star to go inside the stars' movie clip's timeline and then try to shrink and alpha the star inside the timeline, using either a classic tween or motion tween. What do you think?

Thanks for the code!

[Andrei1-bKoviI · Accepted solution]

Try this:

var starsArray:Array = new Array();
var myTimer:Timer = new Timer(50);
myTimer.addEventListener(TimerEvent.TIMER, addStars);
myTimer.start();
addEventListener(Event.ENTER_FRAME, moveStars);
function addStars(e:TimerEvent):void
{
          var star:Stars = new Stars();
          star.x = stage.stageWidth / 2;
          star.y = stage.stageHeight / 2;
          star.alpha = Math.random() * .8 + .2;
          star.scaleX = star.scaleY = Math.random() * .8 + .2;
          star.xMovement = Math.random() * 10 - 5;
          star.yMovement = Math.random() * 10 - 5;
          starsArray.push(star);
          addChild(star);
          star.cacheAsBitmap = true;
}
function moveStars(e:Event):void
{
          for each (var star:MovieClip in starsArray)
          {
                    star.x += star.xMovement;
                    star.y += star.yMovement;
                    star.alpha -= .01;
                    star.scaleX = star.scaleY -= .01;
                    if (star.scaleX <= 0)
                              kill(star);
          }
}
function kill(star:MovieClip):void
{
          starsArray.splice(starsArray.indexOf(star), 1);
          removeChild(star);
}

Message was edited by: Andrei1

[kikibres]

It's working now!!! Thanks sooo much!

I have one last question: How do I control the speed? is it the "var myTimer:Timer = new Timer(50);" or what?

[Andrei1-bKoviI]

Speed is controlled by setting xMovement and yMovement.

[kikibres]

Are you sure? No matter what I tried to adjust, the stars' speed seems to shoot off in many direction rapidly and a bit fast instead of slowing down.

[Andrei1-bKoviI]

Did you attempt to understand what code does?

[kikibres]

All I know is that xMovement and yMovement tells the star to go to certain point on a grid (graph), like if you wanted it to go to x=5 and y= 12, the star will go to 5 steps right and 12 steps down. I did a lot of experiments with xMovement and yMovement in order to understand what xMovement and yMovement are and yet I don't see any difference in the speed, just where the star would go to.....

[Andrei1-bKoviI]

Show examples of how you attempted to manipulate x and y Movements.

[kikibres]

Examples:

1.To understand what x and y Movements are in its basic component, I choose single numbers:

   star.xMovement = 5;

   star.yMovement = 5;

          -It goes right and down

2. star.xMovement = 10;

    star.yMovement = 10;

          -it goes further right and down

3. star.xMovement = 10;

    star.yMovement = -15;

          -it goes further right and up

4. star.xMovement = Math.random() * 10 - 5;

    star.yMovement = Math.random() * 10 - 5;

          -Math.random and 10 - 5 means that the star will get a random number between -5 and +5 of an distance to go to.

5. Additionally, 40 - 20 means longer range while 4 - 2 means the shortest range.

[Andrei1-bKoviI]

All examples definitely change speed. I am not sure what you refer to when you say that that you do not observe differences in speed.

[kikibres]

Then what numbers are the one that slow down the speed of the star as it moves from point A to point B?

[Andrei1-bKoviI]

If you assigned small values - speed will decrease. For example:

star.xMovement = 1;

star.yMovement = 0.5;

[kikibres]

Additionally, from what I understand from my experienments, I can kinda control the production rate of the stars with the Timer and how long the star disappear with the alpha.

[kikibres]

Additionally, I think I'm going to remove the

stars.alpha = Math.random() * .8 + .2;stars.scaleX = stars.scaleY = Math.random() * .8 + .2;

because, I only wanted it to scale down and fade away as it move away from the point.