Flash tutorial: creating a simple button with Flash ActionScript 3.0

Today : How to create a simple button in Flash with AS3.

Example

Sources

You can find the .fla and with the ActionScript source code inside.

Download the source code here: Simple_button_benoitfreslon.com.fla

Let’s start

  1. Open Flash > Create a new Flash ActionScript 3.0 document
  2. Insert > New Symbol
  3. Name : Btn
  4. Type > Button
  5. Click OK

Capture d’écran 2013-09-28 à 16.10.09

  1. Draw a button in the Up state (when the button is released)
  2. Draw a different button in the Over  state (when the mouse cursor is over the button)
  3. Daw a different button in the Down state (when the button is pressed)
  4. Draw a simple shape in the Hit state (The Hit area of the button)
  5. It’s done. Back to the stage now.

Capture d’écran 2013-09-28 à 16.18.25

  1. Then select the MovieClip on the stage
  2. Set an instance name “mc_btn” in the Properties pannel like this

simple_button_02

  1. Create a new Layer with this name: Actions
  2. Select this new layer
  3. Open the Actions Pannel: Windows > Actions or hit F9

simple_button_03

Copy and paste this code:

ActionScript: Move object with smooth acceleration and deceleration with inertia

Today a simple sample of code to create an inertia effect in ActionScript 3.0.

The character will start to move with smooth acceleration if you press an arrow key.

You can download the source code here : Flash_acceleration_benoifreslon.com.fla

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: How to create a game like Angry Birds with box2D, World Construction Kit and Flash – Part 1

Part1 – Box2D installation with WCK installation in Flash

I decided to write a tutorial every friday. :)

Introduction

Today I will show you how to make a game like Angry Birds with a physics engine with Flash.

The famous Physics engine is named Box2D. 95% of 2D games with physic use this engine. (Angry Birds, Limbo, Bad piggies, etc.).
The original engine is written in C++ language. Look at the Box2D C++ website. But this engine was ported in ActionScript 3.0 his codename is box2DFlash.

Box2DFlash

Box2DFlash is a powerful engine but it’s very difficult to use if you are not a good programmer or if you don’t have a level editor to create your levels with a WYSIWYG layout.
That’s why I suggest to use the World Construction Kit framework.

World Construction Kit

See the Wolrd Construction Kit Framework website: http://www.sideroller.com/wck/

Summary: World Construction Kit is is a toolset / framework for rapidly developing physics based games / websites within the Flash IDE. WCK allows you to layout your 2d worlds / game levels entirely within Flash and have them hook into the physics simulation without writing any code

Installation

  • Downloads and install: Adobe Flash Pro
  • Download the WCK from github: https://github.com/jesses/wck (Download the Zip if you don’t have a git client)

Capture d’écran 2013-03-15 à 00.09.05

  • Extract the WCK zip content in a folder.
  • Open the BlankProject/main.fla from the folder you just extract.
  • The Box2D engine and the WCK framework are ready to use!
  • Test the animation hit CTRL+Enter or CMD+Enter with OS X.
  • You should see this

In the next tutorial I will show you how to construct a basic level with box2D Flash and WCK.

Tutorial: How to replace and hide the cursor in Flash with ActionScript 3

I will show you how to hide the mouse cursor and how to replace it by another image.

It’s really simple but you need one at least one MovieClip.

You also can download the source file: Hide_mouse_cursor_and_custom_cursor.fla.

  • Create a new ActionScript 3 file.
  • Insert > New Symbol > MovieClip > name: CustomCursor > Ok.
  • Customize your cursor and set the origin on the top of the cursor.
  • Back to your main stage.
  • Add a CustomCursor MovieClip in the stage.
  • Set the instance name in the MovieClip property: Click on the CustomCursor instance > Properties pannel > Set instance name: cursor
  • Open the Actions pannel and start to code.

That’s all :).

ActionScript: Move an object with keyboard with camera relative control

In this tip I will show you how to move an object with keyboard with camera relative control.

What is a camera relative control?

The direction of your object will be calculated depending the camera position. (Mario 64, Uncharted, GTA 3, etc.).
Eg: If press the right button the character will go on the right.

How to make a camera relative control?

  • Get the arrow key status (key is up/key is down)
  • Set the direction vector
  • Move the object on enter frame with the direction vector


Donwload source: www.benoitfreslon.com-Move-an-objet-with-keyboard-with-camera-relative-control.zip

ActionScript: Move an object to coordinates with smoothing

There is a simple formula to move an object to coordinates with smoothing.
The speed will decrease with smooth during the time.

speed = distance_between_objects / smoothing

The distance will decrease because the distance will decrease too.

If I set values I got:

object.x = 50
targetX = 100

speedX = (targetX – object.x) / 5

On the first frame: speed = 10
object.x += (100 – 50) /5 > 50/5 > 10
>
object.x = 50+10 = 60

On the second frame: speed = 8
object.x += (100 – 60) /5 > 40/5 = 8
>
object.x = 60 + 8 = 68

On the third frame: speed = 6,4
object.x += (100 – 68) / 5 > 32/5 = 6,4
>
object.x = 68 + 6,4 = 74,4

etc.

On the 100th frame: speed = 0
object.x += (100 – 100) / 5 > 0 /5 = 0
> object.x = 100 + 0 = 100

Source:

Exemple:

Download source: www.benoitfreslon.com Move an object to coordinates with smoothing.zip

ActionScript: Launch a function after a delay with setTimeout

There are different ways to launch a function after a delay:

  • With the enter frame event;
  • With the Timer class;
  • With a motion tween;
  • With the enter frame event and the getTimer() method;
  • And with the setTimeout function (See setTimeout help on Adobe);

How to master the setTimeout ?

  • First of all you must create a variable assigned to the setTimeout identifier;

  • The setTimeout function returns an identifier (uint) when you call this function. Save this identifier into the assigned variable;

  • This identifier must be clear with the clearTimeout function in order to stop the setTimeout;

NB:

  • If you want to launch a setInterval already launched don’t forget to clear the previous setInterval. In witch case the previous setInterval won’t be stopped;
  • The setTimeout function can’t be paused or resumed;
  • Assign one variable by one setTimout;
  • The setTimeout function is based on clock time not on frames time;
  • When you clear the setTimeout the closure function is not launched;
  • You don’t have to clear the setTimeout when the setTimeout is already finished;

Add parameters

The setTimeout function can receive one or several arguments. Those arguments are passed to the closure function.
To add arguments just add your arguments after the second parameter into the setTimeout function:
Obviously your closure function must have the same number of arguments.

Exemple:

Download source: www.benoitfreslon.com Launch a function after a delay with setTimeout.zip

Flash CS5 builds iPhone applications

Flash Professional CS5 will enable you to build applications for iPhone and iPod touch using ActionScript 3. These applications can be delivered to iPhone and iPod touch users through the Apple App Store.*

A public beta of Flash Professional CS5 with prerelease support for building applications for iPhone is planned for later this year. Sign up to be notified when the beta starts.

At MAX 2009, Adobe showed a number of applications and games for iPhone that have been built using a prerelease version of Flash Professional CS5. These applications are available now for you to download from the Apple App Store.

Go to the official article on labs.adobe.com: http://labs.adobe.com/technologies/flashcs5/appsfor_iphone/#divider

New game, new gameplay, Roll and Jump

roll_and_jump_screenshot

roll_n_jump_logo_mini_120_120Roll and Jump is a skill game where the goal is to climb as high as possible by jumping from a rolling circle to another.

Clim and do the highest score as possible.
You can do a wall jump, a double jump or activate slow motion!

The game will be released in few days on the web i hope to bring it on iphone as soon as possible.