Swish-Designs.co.uk where imagination is the creation

Welcome, Have a Nice Friday

Fruit Machine Reel Emulation Tutorial - Swishmax 2

In this tutorial you are going to learn how to create a fruit machine reel emulation, using your own graphics or photos, if you havent any, do not worry as i have prepares some graphics previously using swishmax 2 ans exported them as *.png files. Blured Reel and Normal Reel, click on the links to save the two images into your project folder.

Preview:

Step.1

Open swishmax and for the sake of this tutorial i have set the movie properties as width 200, height 300 and frame rate 25. see fig.1 below.

fig.1

Step.2

Now insert the blured reel image into your movie you can do this by clicking the following on the toolbar Insert | Import Image. select the reel_blur.png from your project folder and click ok.
you should have something looking like fig.2 below.

fig.2

Step.3

now we need to make thr graphic look like its on a reel, so using the regtangle with black outline and linear gradient set using colours from left to right, #999999, #FFFFFF, #FFFFFF, #999999 tool draw out a rectangle to cover 3 fruits make 1 main in the middle and the top and bittom fruit make it look like it is outside the rectangle see when in place use the fill transform tool to rotae the gradient to run from top to bottom and not from left to right.fig.3 below.

fig.3


name the shape reel_mask copy and paste the shape in place and rename the duplicated shape to reel now place them in the ascending order reel_blur.png, reel, reel_mask then group all the 3 shapes together as a movie clip and name the it reel_1 do not forget to put a check in the box that says use bottom object as mask see fig 4 below.

fig.4

Step.4

Add the following code to the reel_blur.png.


Press Ctrl+T you should have something looking like fig.4a below.

fig.4a

now add the following code to Scene_1

Step.5

now import the reel_normal.png into the reel_1 movie clip this should import into the same position as the reel_blured.png now on the reel_1 movie clip add the following code.



now we have set the labels for our fruits we need to add the animation i will explain and demonstrate on one then follow the same suit for all the other fruits, fisrt of all on frame 1 of reel_1 add a remove action for the reel_blured.png and place action for the reel_normal.png then on frame 5 of reel_1 add a place action for reel_blured.png and a remove action for reel_normal.png see fig.5 below.

fig.5

now on the seven label we need to add a place action for reel_normal.png and a remove action for reel_blured.png now add amove action over the next 6 frames for reel_normal.png with this highlighted move the seven down just over middle view line aka "win line" now add a move action over 4 frames, and with the frames highlighted move you seven back up into the win line view, this will give the reel the bounce action as it stops on the seven, repeat this for every other symbol, move it down untill the representing symbol is just past the middle view then back up to the view, see fig 6 below.

fig.6

Step.6

whenn you have completed the animation for all the symbols you need to add a new movie clip, name it random and add the following code to it.



now add a new movie clip and name it spin_timer now add the following code to the movie clip.


thats prety much it for animating and stopping the reel, all you need to do now is design a spin button and add the following code to your spin button.



press Ctrl+t to test in flash player and you should have something working like fig.7 below.

fig.7

it doesnt look much at the moment, but you can add som graphic surrounds for your reel, it is also easy to add more reels, see below for another exanple what can be done by using this script.



You can buy the above example source file for swishmax 2 for £5.00

Thanks,
Craig.