Tutorial: Use TweenMax libs create a realistic tween with a simple example

Requierements

See the previous tutorial about how to install the TweenMax libraries in Flash IDE.

Usage

Tweens

We will try to test some tweens and easing  only with TweenMax to make this animation:

Click on Insert > New symbol

  1. Type: MovieClip
  2. Enter the name: Apple
  3. Check: Export for ActionScript
  4. Enter the classname: Apple
  5. Then click OK

new_symbol

Enter in the Apple symbol from your library:

library

Then draw an beautiful apple :).

Let’s the origin in the center of this image

apple

Click on the “Stage” from the navigator on the top.

stage

Now you are in an empty main stage.

Hit the right click from the frame on the timeline and select : Actions to open the Actions pannel.

timeline

Then just add this line in the Actions pannel.

If the library is correctly added in your Flash animation. Flash will autocomplete the package like this:

import

The TweenMax.to method can interpolate a tween with any properties.

For example this line can move an object to x and y coordinates.

Now add this lines of code:

Tutorial: install TweenMax libs ActionScript 3 with Flash IDE for beginners

About Tweenmax

In this tutorial I will show you how to include the TweenMax ActionScript 3.0 libs in Flash.
The TweenMax libs are available in ActionScript 3.0 and 2.0 developed by the GreenSock team.

This libs can help you a lot in game development.

You can easily use this libs to :

  • Move objects
  • Call functions with delay
  • Morph colors or alpha
  • Use easing : (Bounce, elastic, slow down, …)
  • Handle: timers, tweens and animations with one class.

In few words: This libs kicks ass !

Here some examples. I picked up this swf from greensock.com :

Let’s start

Installation

Download the TweenMax libraries form the website : http://www.greensock.com/tweenmax/

greensock

Then unzip the file.

Open Flash and create a new ActionScript 3.0 file

flash

Then add the libraries to your file by clicking on the wrench.

as3

  1. Click on the Library path tab
  2. Click on the “+”
  3. Click on the swc icon
  4. Select the greensock.swc from the folder you just unzip.
  5. And click OK

add_tweenmax_libs

Annnnnnnnd…. It’s done!

Tutorial: Export your Flash animations on iPhone and iPad with cocos2d and TexturePacker

Hello,

In this tutorial I will show you how to build and use a flexible animation .swf  for universal use (iPhone, iPad and retina display) with cocos2D-iphone 2.0.

I always use Adobe Flash to make games, whatever the support.

Flash is an amazing tool for game developer: WYSIWYG layout, animation tool, vector graphics editor.
Do you want to scale up you entire animation? No problem if you work with vector graphics.

You can download the final AnimatedSpriteWithFlash.zip file.

1. Tools and files

You need some tools and one Class made for Cocos2D in Objective-C.

  • Download and install the last Cocos2D-iphone 2.0 libraries with templates in XCode.
  • Download and install Adobe Flash.
  • Download and install TexturePacker.
  • Download the AnimationSprite class from github.
  • Download the Flash animations example : Pig.zip


2. Flash

In Flash

  • Open pig_walk.fla and pig_dead.fla with Adobe Flash.
  • Then export you animation with CMD+Enter or CTRL+Enter for windows users.
  • Flash will export a swf file in the same folder: pig_walk.swf and pig_dead.swf.

Flash Tips

  • Create a dummy cross in the middle of the sprite. Only for position reference purpose. Remove it before exporting your animation or set the layer as a Guide to hide it.
  • Use the same stage dimensions for the same object.
  • Use graphic symbols instead MovieClip. Because graphic animations can be exported with TexturePacker.

Capture d’écran 2013-03-01 à 17.45.44

  • Create one .fla file per animation.
  • Always work for the iPad retina scale (2048×2048). May be you will export your project for iPad in the future :).

3. TexturePacker

In TexurePacker

Let’s use a default export for universal application with a compressed spritesheet altlas.

  1. Drag and drop pig_walk.swf and pig_dead.swf in TexturePacker
  2. Click on the […] on the data file textfield, chose your export folder and enter the name pig-ipadhd.plist (For universal application)
  3. Texture format set zlib compr, PVR (.pvr.ccz, Ver.2)
  4. Check Premultiply alpha
  5. AutoSD: set cocos2D ipad/hd/sd and hit apply.
  6. Save the file and hit Publish: TexturePacker will export 6 files, the pvr texture file with the plist database file for each scale (ipad/hd/sd).

pig

TexturePacker tips

  • Set the Image format to RGBA4444 if you want to optimise your media. And Set the Dithering to FloydSteinbergAlpha (Better gradient effect with RGBA4444).
  • Always work with the same framerate in  your animations: Flash XCode.
  • The max size is 4096×4096 for retina device and 2048×2048 for iPhone 3GS. But TexturePacker will adapt the max size.
  • Check Allow rotation
  • Set size contraints to Any size
  • If you sprites are cropped in you game set Trim mode to None
  • Check Enable auto alias
  • Be curious and test any settings… :)

4. XCode

in Xcode

  • Create a new Cocos2D project template with XCode.
  • Set iOS deployment Target to 5.1 at least.
  • Add the AnimatedSprite.m and the AnimatedSprite.h files into your XCode project. Don’t forget to check the target.

Capture d’écran 2013-03-02 à 11.56.56

  • If you don’t use ARC in your current project set a flag in the Target > Build Phases > And set the compiler flag to the filename AnimatedSprite.m > –fojbc-arc. NB: By default the ARC is disabled.

Capture d’écran 2013-03-01 à 16.58.30

  • Add all this files into the XCode projet:
    • pig.plist
    • pig.pvr.ccz
    • pig-hd.plist
    • pig-hd.pvr.ccz
    • pig-ipadhd.plist
    • pig-ipadhd.pvr.ccz

Capture d’écran 2013-03-02 à 11.57.02

  • Open the HelloWorldLayer.h and use this header:

  • Then use this code for the HelloWorldLayer.m

Run and see the result.

If you tap on the screen the dead animation will run and the pig will be removed.

That’s all !

Capture d’écran 2013-03-04 à 00.09.40

See the AnimatedSprite.h you will see all the public methods and public properties.

Have fun !