[couzo]

Hi guys,

I have just finished creating our sites flash banner however the movement is still not as smooth as I want. I have the banner at 60fps and the movements still are not as smoother as I would like.

Any thing i can try to smooth the slightly jerky moments?

I would post the banner but don;t want to be thought of as advertising. Is it ok to post the graphic?

Many thanks

[php_penguin]

60fps is more than enough - human eyes 'see' at 30fps, and any jerkiness you see is due to :
- too large steps between one frame and the next (eg moving something too quickly)
- moving something once in every 5 or so frame (effective fps for that object being 12)
- the animation is too complex (and so the computer is unable to run it at full framerate)

[couzo]

the banner is at the top of our site www.propstore.com could it be i just have to much going on?

Oh and it the flash banner at the very top of the page i am talking about.

[Roberto]

Hello

If your using tweens to move the photo's, you will get a smoother movement when you increase the number of frames between keyframes. If you click on a key frame a rectangle appears next to the cursor, you can then click/drag that keyframe further along the timeline. Play around with distance moved for a given frame rate to see what works best.

A better solution is to move the picture with actionscript. If you have two pictures side by side, moving one with tweens and the other with actionscript - you will see that the contents of the picture moved with actionscript do not jerk about like the tweened picture. You also have better control of speed with actionscript, making it easier to get the movement you require.

Rob

[couzo]

I will try the action script route. Any good links to action script site?

[Roberto]

Hello

Which version of Flash are you using? Are you targeting earlier versions of Flash Player? If your using CS3 + targeting the latest Flash Player, you can use AS3. If not, you can use AS2. Let me know which one your using and I can post a quick how to.

Rob

[couzo]

Hi rob,

I use CS3 but the action script i normally use for creating links etc is AS2 if that helps

[Roberto]

Hello

The attachments contain CS3 files, that show a way of moving pics with as2/as3.

You need to have your pictures converted to MovieClips - right click picture and select Convert to Symbol - make sure Movie Clip and the top left registration point are selected - give it a name and select ok. The top left registration dot needs to be selected because it makes it easier to keep track of the movieClips position in the actionScript. When the movieClips y position is greater than the height of the stage, then the picture is off the stage. Give each of your pictures an instance name in the properties panel - if you use a name that ends in _mc, you will get code completion hints in the actions panel.

In the example, I started moving three pictures on frame 1 of the movie. This was achieved by inserting a new layer, naming it actions, and selecting the first frame of that layer + openning the actions panel. In the actions panel, you can control the pictures using the instance name you gave them in the properties panel. Each picture is given an speedX/speedY property, which will determine its movement. A positive x value moves the picture from left to right, a negative x value goes from right to left. A positive y value moves the picture down the screen, a negative y value moves the picture up the screen.

Each picture also has its onEnterFrame property linked to a function called movePic. On every frame, each picture will call the movePic function. The onEnterFrame calls the named function on every frame, until the onEnterFrame is deleted.

Within that function the pictures position is changed using:

this._y += this.speedY;
this._x += this.speedX;

This is just saying add my speedY to my current _y position + my speedX to my current _x position.
var ten:Number = 10;
ten += 2; //ten would now equal 12

angry_mc.speedX = 1;
angry_mc.speedY = 2;
angry_mc.onEnterFrame =  movePic;

flasher_mc.speedX = -1;
flasher_mc.speedY = 2;
flasher_mc.onEnterFrame = movePic;


elvis_mc.speedX = 0;
elvis_mc.speedY = -2;
elvis_mc.onEnterFrame = movePic;

In the movePic function, each picture has its speedX added to its _x position and has its speedY added to its _y position, which moves the picture.

On each frame a test is made to see if the picture is still on the stage, if the picture is off the stage, the onEnterFrame is deleted + the picture repositioned back to its original position.

function movePic():Void {

this._y += this.speedY;
this._x += this.speedX;

switch(this._name){

case "angry_mc" : if(this._y > Stage.height){
delete this.onEnterFrame;
this._x = 0;
this._y = -100;
}
break;

case "elvis_mc" : if(this._y < 0 - this._height){

delete this.onEnterFrame;
this._x = 225;
this._y = Stage.height;
}
break;

case "flasher_mc" : if(this._y > Stage.height){
delete this.onEnterFrame;
this._x = 450;
this._y = -100;
}
break;

case "goat_mc" : if(this._y > Stage.height){
delete this.onEnterFrame;
this._x = 225;
this._y = -100;
}
break;

case "gHead_mc" : if(this._y < 0 - this._height){
delete this.onEnterFrame;
this._x = 0;
this._y = Stage.height;
}
break;

case "gFace_mc" : if(this._y < 0 - this._height){
delete this.onEnterFrame;
this._x = 450;
this._y = Stage.height;
}
break;


default: trace("bugger");
break;
}


}

On Frame 229, after the text zooms off, on the actions layer a new Keyframe was added + in the actions panel the following code was added:

gHead_mc.speedX = 1;
gHead_mc.speedY = -2;
gHead_mc.onEnterFrame =  movePic;

gFace_mc.speedX = -1;
gFace_mc.speedY = -2;
gFace_mc.onEnterFrame = movePic;


goat_mc.speedX = 0;
goat_mc.speedY = 2;
goat_mc.onEnterFrame = movePic;

This takes care of moving the second set of pictures. They use the movePic function from the first frame.

If you need this explaining more clearly, let me know.

Rob

Attached File(s)

•  As2.zip (126.92K)
  Number of downloads: 2
•  As3.zip (203.36K)
  Number of downloads: 3

[couzo]

thanks for teh input I will start looking into this to get the flash sorted.

Many thanks for you help on this

[couzo]

Hi Rob,

I have finally got some time to sort out my banner. I am now using AS3 for this. I seem to be able to move 2 of 5 mc items but the other 3 never seem to move even though the actions are exactly the same for them. Any ideas on this or I can post up the .fla?

Many thanks

[couzo]

Nevermind this post i think i have sorted it

[headcoat]

My two bits worth on animation FPS.

TV is only 25 FPS BUT the general consensus amongst animators/designers these days is use more for animation e.g. well above 40 FPS.

It does make a difference.

[couzo]

well i have all the script working now. Thank to everyone for the help.

The file still stutters a bit but not as bad as before and i have been able to reduce the file size to which is great.

[Roberto]

Hello

Glad you got it working. With the flicker problem, the larger amount you move the pictures on each frame - the bigger the amount of flicker. Its just a case of messing around with the speed of picture movement for a given frame rate.

Cheers

Rob