“Double Down” with an Awesome Flash BlackJack Game – Active Premium

During this week’s Active Premium tutorial we’ll be building an amazing BlackJack game, from scratch, using Flash and AS3.

We’ll begin by covering the striking UI design, after which we’ll pull the whole game together with ActionScript. For non Premium members we’ve even posted a sample so you can see what you’re missing! Come and check it out..

Active Premium Membership

We run a Premium membership system which costs $19 a month which periodically gives members access to extra tutorials, like this one! You’ll also get access to Psd Premium, Vector Premium, Audio Premium, Net Premium, Ae Premium, Cg Premium and Photo Premium too. If you’re a Premium member, you can log in and download the tutorial. If you’re not a member, you can of course join today!

Sample our Wares..

The best way to demonstrate the value of a tut is to give you a taste, so why not dive into these 6 sample steps right now? The following short chunk will cover some of the UI design; going Premium will give you access to the whole lot!

Sample Step 5: Main Screen

This is the Main Screen or view, it will be the first graphic to appear in our game, continue to the next step to begin its creation.

Sample Step 6: Background

Create a 320x480px rectangle and fill it with the following radial gradient: #2c753d, #3b9d52.

Using the rectangle tool and the poker shapes we created before, we’ll form a pattern to make our background look better.

Duplicate the pattern and arrange it in order to cover the full background gradient.

You can either convert your background to a single Graphic and center it or use the Flash export menu to get a sliced png image. I used the png option and came up with something like this:

Convert the final graphic to MovieClip and name it bg.

For the Main View we’ll use a black gradient on top of this background, duplicate the green gradient, change the color to black and the alpha values to (0, 70).

Sample Step 7: Title

Select the Text Tool (T), select a good looking font to write your game title and apply this radial gradient: #a08c66, #f6e7be.

Convert the text to MovieClip and apply the next filter:

You can also add a poker shape as a detail:

Sample Step 8: Tooltip

The tooltip will show the user an instruction in the Main View.

Create a 84x23px rounded rectangle and fill it with a #000000 to #333333 gradient, change its corner radius to 6.

Duplicate the shape and flip it vertically, change its size to 80x18px and center it in the last shape.

Use the Polystar Tool to create a triangle and place it on the bottom center of the actual shape.

Lastly, add a TextField (T) and center it.

Sample Step 9: Chips

Time for the Chips.

Start with a simple black circle and use the Line Tool (N) to create a dashed white circle inside:

Use the Rectangle Tool to create a plus symbol and use it to decorate the chip. You can also add a logo or any other graphic to the center of the chip.

A white chip will be used as well, just change the black shapes to white and vice versa.

Sample Step 10: Info Button

The info button will call the About View when clicked.

Create a 16x16px white circle and change its alpha to 15%. Use the Text Tool (T) to write an italic i.

Convert the shapes to Button and name it infoButton.

Sample Step 11: Cards

Use the Rectangle Primitive Tool to create a 66x86px, #858D8F shape and change the corner radius to 16.

…Hungry for More?

That’s it for now, I’m afraid. Check out Active Premium to complete the rest of this AS3 Gaming tutorial! Also, let us know in the comments what you think of seeing Premium Samples – is it an effective way of promoting the Premium program? Or would you rather not know what you’re missing?!