Sorry your browser is not supported!

I have to images (64x64) and I want to make an animation between them.
I want to flip from one to the other.

How do I do that?
Anyone know an online site that can do that or some smart tool (for Mac if possible)?

Have you tryed ?

Player.ID = CreateSprite ( Player.IMG )

SetSpriteAnimation ( Player.ID, 32, 32, 12 )

PlaySprite ( Player.ID, 6, 1, 1, 4 )

Some more explanations......
---------------------------------------------------------
Description
Initialises the sprite animation with frames from its assigned image, based on a frame width and frame height. The sprite will use the frame width and frame height to extract images of that size from its assigned image beginning in the top left corner and moving from left to right. When it reaches the right hand side of the image it will begin again one row down, moving from left to right again until the frame count is reached or it runs out of space on the image to look for frames. Storing an animation image on an atlas texture is supported.

This function is the preferred method of assigning an animation to a sprite as it avoids expensive image changes during rendering. However if all your animation frames are separate images you can use the AddSpriteAnimationFrame to add frames from images individually.

Definition
SetSpriteAnimation( iSpriteIndex, iFrameWidth, iFrameHeight, iFrameCount )

void agk::SetSpriteAnimation( UINT iSpriteIndex, int iFrameWidth, int iFrameHeight, int iFrameCount )

Parameters
•iSpriteIndex - The ID of the sprite to set for animation.
•iFrameWidth - The width of the frames in pixels on the image.
•iFrameHeight - The height of the frames in pixels on the image.
•iFrameCount - The number of frames the sprite should attempt to retrive from the image.
---------------------------------------------------------------------
Description
Begins the animation of a sprite based on the given values. Animation speed is based on animation frames per second and is not affected by the drawing frame rate.

Definition
PlaySprite( iSpriteIndex )

void agk - PlaySprite( UINT iSpriteIndex )

PlaySprite( iSpriteIndex, fFps )

void agk - PlaySprite( UINT iSpriteIndex, float fFps )

PlaySprite( iSpriteIndex, fFps, iLoop )

void agk - PlaySprite( UINT iSpriteIndex, float fFps, int iLoop )

PlaySprite( iSpriteIndex, fFps, iLoop, iFromFrame, iToFrame )

void agk - PlaySprite( UINT iSpriteIndex, float fFps, int iLoop, int iFromFrame, int iToFrame )

Parameters
•iSpriteIndex - The ID of the sprite to animate.
•fFps - Frames per second. The number of frames the sprite should attempt to cycle through every second (optional, default 10).
•iLoop - the looping mode of the sprite, 0 equals do not loop, 1 equals loop forever (optional, default 1).
•iFromFrame - The frame to begin at, frames start at 1 (optional, default
•iToFrame - The Frame to end at, frames end at SpriteFrameCount() (optional, default
-----------------------------------------------------
or simply use the set frame function?

I think you misunderstood me!

I have two images and I need a tool to make an animation between those two images.
And I want it to look like it flips from one image to another.

I'm not asking how to animate in code..

You mean like book pages

You will save alot more resources if you try to do it by code.

Some sprite magic.

Yes!

I have a sprite and when I click it, it should flip to another sprite.

I not sure how to do this in code (Tier1)

If there was a way of skewing sprites in AppGameKit, it wouldn't be too tricky to code it up.

Best you could do would be to put one sprite on top of another, and then shrink the top sprite in the X axis so that it reveals the sprite underneath.

Otherwise you're looking for doing some fancy editing in whichever graphics package takes your fancy.

You could just use the SetSpriteImage command and flip between the two images but still use the one sprite. Basically you would have a variable which flips between the two image numbers and then set the sprite image to that variable.

Or you could make them into 1 image using the image joiner provided by TGC and then create an animation from it.

This example uses the BLUE and PURPLE blocks from the collisions example, so make sure to put them in the media folder before trying it...




As you can see this is pretty straight forward.

First we detect the mouse click...
if GetPointerPressed() = 1

Then we detect the X position of the pointer, and limit it to the size and location of the sprite...
if GetPointerX() > 130 and GetPointerX() < 194

Then we do the same for the Y coordinate...
if GetPointerY() > 200 and GetPointerY() < 264

If all of those are true, then we know they are clicking on the sprite, so we then detect the sprite's current frame...
if GetSpriteCurrentFrame(1) = 1

And set the frame accordingly...
SetSpriteFrame(1,2)
else
SetSpriteFrame(1,1)


Here is another example that uses 2 sprites that are sharing the same location.
This starts out with one visible and the other invisible.
It checks for the click in the proper locaton like before, but this time instead of changing frames it sets the visibility on both sprites...



Hope this helps.
Have fun

#Conjured Entertainment

Nice piece of code but as I said I was really look for a tool to do it with.

I'm not very good at graphics so I'm looking for a tool to do it for me.

You might be better off in the 2D forum where you can ask about graphics tools in particur.

Sorry, I missed the tool part of the request, but you could use the code for your tool.
Just make sure the images are in the Media Folder
The example uses images the same size as the ones you are using, so the click detection should work fine.

Trisect - if you have any movie making program, you can use transition effects to change from one image to another, like a page peel, or 3D rotations, etc.

When you've done that, you can export the movie as individual frames.

But, you know, this would be a good project to do for DBPro, since you can manipulate images a lot easier, and use 3D as well.

So, yeah, a DBPro program that takes two same-size images, and outputs a sprite sheet of image 1 morphing/wiping/dissolving/whatever into image 2 would be very handy! I'm going to add that to my list of things to do!

EDIT: Oh! I just thought of this... instead of image 1 transitioning into image 2, image 1 could transition into a totally clear image, so that image 2, which is already positioned underneath image 1, is now shown. That way, you wouldn't need a transition for every possible combination of images, just one that transitions away for each image.