How to make animation from many images(Actionscript) - actionscript-3

How much images I need to make a good animated person or someone like stickman?
I have created a class Person for example and added an event listener onEnterFrame there, so every stickman have its own animation
private function onEnterFrame(e:Event):void{
addChild(image[i])
i++;
//thus every times increasing the i++, and add a new image
}
for example if I have a speed of 24 fps, the images are changing to fast and the animation isn't good enough, can you give me an advice on how to do that right?
ps: how to add and remove the child to delete the unnecesary previous image? in the onEnterFrame event?

Use graphics of the container Sprite/MovieClip. Ref: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Graphics.html
Assuming image[i] is Bitmap
graphics.clear();
var bitmapData:BitmapData = image[i].bitmapData;
graphics.beginBitmapFill(bitmapData, new Matrix());
graphics.endFill();

Related

How to hide mouse over multiple frames?

I'm an actionscript n00b, please excuse my ignorance.
currently trying to make my first person shooter game and have picked up great tips from Lynda(.com) but im having difficulty changing my mouse into a crosshair cursor and having that crosshair not show up permanently in subsequent frames as I create this game.
so i have this code on an action layer but on other layers when I create another key frame to change what I shoot at on other layers, my cursor stamps a permanent image of itself onto the screen. I definitely need to understand this language more if Im going to become good at it but for now i'f like to be able to make a few games to entertain myself, any suggestions? are appreciated
var cursor:MovieClip;
function initializeGame():void
{
cursor = new Cursor();
addChild(cursor);
cursor.enabled = false;
Mouse.hide();
stage.addEventListener(MouseEvent.MOUSE_MOVE, dragCursor);
}
function dragCursor(event:MouseEvent):void
{
cursor.x = this.mouseX;
cursor.y = this.mouseY;
}
initializeGame();
In AS3, items will remain on the display list (on screen) until explicitly removed (or their parent is removed).
So to keep your cursor from staying on screen, you need to remove it:
removeChild(cursor);
Doing Mouse.show() doesn't affect any display objects on the screen.
If you assign a new value to the var cursor, it doesn't automatically remove the previous object - as variables are just references to objects. So if in your subsequent frames you are making a new cursor, you want to remove the existing one prior to assigning a new one to the variable:
if(cursor.parent) removeChild(cursor); //if there is an object assigned to cursor, and it has a parent (which means it's on screen), then remove it before doing the below code
cursor = new Cursor();
addChild(cursor);

Bitmap inside a Sprite - But still not clickable? AS3

Basically I've got a bitmap which is an image that the user captures from a webcam which was previously stored as bitmapdata which I converted into a bitmap and added it onto the stage..
From here I want the bitmap to be selectable so I can do other things to it, so I realised I would need to add this into sprite in order to add event listeners onto it.
Having done so, for some reason my application ain't wanting to recognise the events added?
Here is the code I've got..
Bitmap..
//Create a new bitmap from the video capture
image = new Bitmap(bitmap,"auto",true);
//Set the width and height properties
image.width=150;
image.height=125;
//Set the stage position
image.x = 430;
image.y = 280;
stage.addChild(image);
Sprite..
var imageSprite:Sprite;
imageSprite = new Sprite();
imageSprite.x = 200;
imageSprite.y = 50;
imageSprite.addChild(image);
stage.addChild(imageSprite);
Event listener:
imageSprite.addEventListener(MouseEvent.MOUSE_DOWN, SelectWebImage1);
Function:
function SelectWebImage1(e:MouseEvent): void {
trace("Clicked");
}
I receive no errors from this but I noticed that when I have that code written in my application, all of the code underneath it doesn't seem to function?
I really don't know what i'm doing wrong, any help appreciated thanks!
When you set Sprite's dimensions, you implicitly set its scale, and also if you place some graphics by using width and height, the width and height includes any sprite's children, accounting for their position. You should place that bitmap into imageSprite and not set x,y proerties for the bitmap, this way you won't have to account for its position inside the sprite to position the bitmap.

Change scene after few seconds in Cocos2d-x

I'm a newbie. At this time, I want to change scene after a few seconds (about 3-5 seconds). But I don't know how to do. I know schedule but I don't want it loops. I mean it just works only once.
Thanks!
For example, running a main menu scene after a 2.0s delay from the splash screen.
// In the init()
this->schedule(schedule_selector(CSplashLayer::RunMainMenu), 2.0f);
// function in the splash layer class
void CSplashLayer::RunMainMenu(float dt) {
// tell CCDirector to run main menu
}
You can do like this
CCScene *pScene = GameLayer::scene();
CCTransitionPageTurn *crosssfade = CCTransitionPageTurn::create(3,pScene, true);
CCDirector::sharedDirector()->replaceScene(crosssfade);
You can use any Transition effect to change the scene with any time to take this transition to complete
You can use this this->scheduleOnce(<#SEL_SCHEDULE selector#>, <#float delay#>). This way you can acheive what you want.

Same mouseover/-out effect for many buttons

Last time I touched flash was 10 years ago, or so... In other words, I'm quite rusty. I am going to make a interactive map of Europe. I want the strongly green circles to have a mouseover/-out effect (First I was thinking some size-change, but I think maybe I'll go for opacityfading). I have a couple problems. The code under is working, but Is there a good way to either force the fadingout(...) to finish, before fadingin(...) is called? If not, is there a smart way to get the current opacityvalue when fadingin(...) and make that the start value. If the user moves the mouse outside quickly, the effect is not looking very nice. Also, what is the best way to get these functions to work with every circle in the map? If the user drags the mouse around, I want this to create a tracing effect.
import fl.transitions.Tween;
import fl.transitions.easing.*;
var outTween:Tween;
myButton.addEventListener(MouseEvent.MOUSE_OVER, fadingout);
myButton.addEventListener(MouseEvent.MOUSE_OUT, fadingin);
function fadingout(event:MouseEvent): void {
outTween = new Tween(myButton, "alpha", None.easeNone, 1, 0, 1, true);
}
function fadingin(event:MouseEvent): void {
outTween = new Tween(myButton, "alpha", None.easeNone, 0, 1, 1, true);
}
What I would probably do is create a class for the circle. In there I would create the eventlisteners for mouseover and mouseout to change the opacity and/or size.
On a second note, I recommend that you use TweenLite or TweenMax from greensock http://www.greensock.com/tweenlite/
TweenLite should probably suffice for you. Look into it's properties especially the "overwrite"-property which controls the tween overriding you mentioned
overwrite : int Controls how (and if)
other tweens of the same target are
overwritten by this tween. There are
several modes to choose from, but only
the first two are available in
TweenLite unless
OverwriteManager.init() has been
called
You could very well create a class for the green circles, and contain all listeners and tweened reaction features within it. A very solid method.
You may also leverage event propagation on a movie clip / sprite containing all mouseable elements to achieve the same thing with a single listener set:
var myContainer:Sprite = new Sprite();
//add all elements
myContainer.addEventListener(MouseEvent.MOUSE_OVER, over, true, 0, false);
myContainer.addEventListener(MouseEvent.MOUSE_OUT, out, true, 0, false);
private function over(e:MouseEvent):void
{
TweenLite.to(e.target, .5, { alpha:1.0 });
}
private function out(e:MouseEvent):void
{
TweenLite.to(e.target, .5, { alpha:0.5});
}
Basically, you add the listener to the containing object, and events are passed down to the children, who then receive the event instructions. The ".target" of the propagating object, received in the MouseEvent argument is the key here.
I'm using the fantastic TweenLite framework here, as mentioned by others, and you should too.
cheers and good luck!

Deleting a shape via code

Pretty basic question here, but its still got me a little confused..
I have an object(navigation menu bar) that I want to change the colors on with code, so in an updateColor function, I get the bounds of the object (which is a drawing shape contained in a movieclip) and redraw a new shape on top of it with the new color, but I've noticed that the last shape still exists behind this redraw.
I tried using obj.graphics.clear(); before the redraw but that didn't get rid of the original shape. Is there another command that I'm overlooking?
Unless you drew the object you wish to remove within the same graphics object, clearing won't work. You need to remove the DisplayObject.
Depending on the number of children you can do:
obj.removeChildAt(0);
This also removes movieclips / buttons you placed on the stage manually.
If you have a reference to the DisplayObject you wish to remove you can simply do
obj.removeChild(backgroundClip);
Note that you can also change the color of a DisplayObject directly:
import flash.geom.ColorTransform;
...
public var test:MovieClip; //instance on stage
...
var cf:ColorTransform = test.transform.colorTransform;
cf.color = 0xff0000;
test.transform.colorTransform = cf;
while(this.numChildren)
{
this.removeChildAt(0);
}
Will clear child object on this MovieClip,
if it's clearing too much, then put the shape drawing in a subclip, and clear the subclip.