AS3-101: Game Development Part 3 – taterboy
October 2nd, 2011 | Filed under: ActionScript 3, Flash, Flash AS2 to AS3, Flex, Games, Tutorials

This tutorial is the third part in a series on game development with AS3. We will pick up where we left of in the last tutorial which can be found here: ActionScript 3 101 : Game Development part 2

In the previous tutorial we made a MovieClip of a ball move back and forth by pressing the left and right arrow keys on the keyboard. We accomplished this through the use of a variables, functions and events. In this tutorial we will continue to modify our existing code by adding a couple new functions and create something that will begin to resemble an actual game.

The Swap:
The first thing we need to do and swap out the ball artwork with a spaceship graphic. The graphic included with the source is the same dimensions as the ball, which was 72 x 72 pixels. You can use the one in the source code below ( just copy it into your project and delete the ball) or build your own.




Read More »

Technorati Tags: , , , , , , , ,

| 1 Comment »

Master Code Hinting in Flash Builder and Flash CS5 – taterboy
September 28th, 2011 | Filed under: ActionScript 3, Flash, Flex, Tips, Video

Ever need a class, but can’t remember if it is in the flash, mx or spark package, even drilling down further, was it in data, net or utils? There are so many classes in so many locations there is no way to remember them all or the properties and methods associated with them.

A quick tip I use often is typing “new”, then tapping the space bar. If code hints are working, the code hint window will appear listing all the possible classes. Typing the first and even second letter of the class name will filter the list, once you select the class you are looking for, that class will automatically be imported at the top of the file, if it’s needed.

This works almost anywhere and on any class, even static. I use it when I don’t feel like typing out long class names like StageDisplayState or TextFieldAutoSize. Type “new [space] stag” then click on the correct class. Boom!, it’s imported and completely typed out for you.

For a quick reference to which properties and methods are available in the class, remove the word “new” from before the class name that was just selected, then type a “.” right after the class name. This produces another code hint menu listing the public properties and methods.

Code hinting will also import classes automatically when a colon is added after a variable name, but just typing “new” and a space, is indeed the fastest.

Just remember to remove the new [Class] you just used to trigger the code hint window, if you forget, the compiler will let you know.



Technorati Tags: , , , , , , ,

| No Comments »

AS3-101: Game Development part 2 – taterboy
June 1st, 2011 | Filed under: ActionScript 101, ActionScript 3, Flash, Flash AS2 to AS3, Flex, Games, Tutorials

This tutorial is part 2 of the ActionScript 3 101 : Game Development series. For part 1, go to ActionScript 3 101 : Game Development part 1

In part 2, we will continue animating a ball on stage, but this time we will setup keyboard controls so that a user can control the animation of the ball’s x property.

Before we move into the keyboard event listener, we should structure our code to be more organized and flexible. The top of the actionScript is where I like to put all my variables and things that configure how the game runs. As a general rule, any values that are used more than once or could change should be stored as a variable. Notice the left and right bounds for the ball ( 20 and 455) are used more than once, we should change them to a variable to make our code more flexible. Later in this series, we will move some of these variables from the top of the code to an external xml file, this will make your game very tweak-able without republishing from Flash. The secret to flexible code is lots and lots of variables.

New Variables:

?View Code ACTIONSCRIPT
var boundsLeft:Number = 20;
var boundsRight:Number = 455;
var maxSpeed:Number = 10;

Read More »

Technorati Tags: , , , , , , , , , ,

| No Comments »

AS3-101: Game Development part 1 – taterboy
April 21st, 2011 | Filed under: ActionScript 101, ActionScript 3, Flash, Flash AS2 to AS3, Games, Tutorials

This series has been taught to a few students over the last couple years with the intention of making it into a video tutorial series, but due to the lack of time and fear that it will never happen otherwise, we are going to have to do this old-school.

The series was originally taught in Flex / Flash Builder, but with so many Flash AS2 developers still learning AS3, this is a great program for new and old developers who want to develop Flash games using actionScript 3. This tutorial series will be focused on the Flash IDE, if you want a Flash Builder version of this series, please request it in the comments below.

Getting Started:
The foundation of any game is providing a way for users to control elements on the screen. At our game’s core is these 4 lines of code.

?View Code ACTIONSCRIPT
// 1B
function frameHandler(ev:Event):void{
	ball.x += 10;
}
 
// 1A
addEventListener(Event.ENTER_FRAME, frameHandler);

Read More »

Technorati Tags: , , , , , , , , , ,

| No Comments »

MoveThis: Another AS3 Tweening / Animation Engine – taterboy
February 1st, 2011 | Filed under: ActionScript 3, Flash, Flex, Free Components/Classes, Games, Tutorials

UPDATE 1.20, 4/21/11 : new source files below

Animation is the primary reason our clients choose Flash based applications over HTML or any other language. Creating applications that dance is the “Rich” in RIA development.

Great animation or tween engines are plenty, GTween, TweenLite and Tweener are just a few. They provide a simpler way of animating with code. The Flash IDE team has also gone to great lengths to make working with animation in code easier for the designers. Even Flash Builder 4, which one could argue is a programmers tool, has new animation classes that are far more powerful than their predecessors.


Interactive Demos below…

Animation is what makes Flash, Flash:
MoveThis has been around in many different forms as my personal tween engine for the last 8 years. I think it’s finally in a condition that it can be shared. The idea has always been one line of code to make something move, it’s extremely simple to use, yet supports many great features.
Read More »

Technorati Tags: , , , , , , , , , , ,

| 2 Comments »

SoundTrack an AS3 Sound Helper Class – taterboy
January 4th, 2011 | Filed under: ActionScript 3, Audio, Flash, Flex, Free Components/Classes, Games, Tutorials

Working on games and other projects that include many audio streams and sound effects can require a fair amount of code to manage the numerous channels and soundTransforms. This helper class started as a way to provide simple pause, play, stop and resume controls without all the channel mess. Another requirement was to make adjusting the volume and panning easier, maybe even allowing the use of existing tween engines to fade volume which was achieved by using volume as a property, instead of a method or SoundTransform.

Volume and Panning:

?View Code ACTIONSCRIPT
soundTrack.volume = 0; //(Number 0 - 1)
 
soundTrack.pan = -1; //(Number -1 - 1)

Tween engine sample using GTween:

?View Code ACTIONSCRIPT
var tween:GTween = new GTween(soundTrack,2,{volume:0});

note: GTween by Grant Skinner can be found here: http://gskinner.com/libraries/gtween/

Once a sound object is created, it can be place into a SoundTrack.

How to use:

?View Code ACTIONSCRIPT
//create a new sound and soundTrack
var audioFile:Sound = new Sound(new URLRequest("audio.mp3"));
var soundTrack = new SoundTrack(audioFile);

Read More »

Technorati Tags: , , , , , , , ,

| 2 Comments »

AS3 Loader for Loading Multiple External Files – taterboy
November 3rd, 2010 | Filed under: ActionScript 3, Flash, Flex, Tutorials

LoaderCollection:
Loading multiple files with a single progress loader that displays the total loading percentage of all items being loaded.


Get Adobe Flash player


Demo Version, not actual component

Before we get into the LoaderCollection, let’s discuss how you load single external files. The LoaderCollection recognizes Flash’s Loader class as well as a custom class called SimpleLoader.
Read More »

Technorati Tags: , , , , , , ,

| No Comments »

Intro to MVC Part 1: The Controller Class – taterboy
July 13th, 2010 | Filed under: ActionScript 3, Flash, Flex, Games, Tutorials

About a year ago, @devgirl, introduced me to the MVC framework and provided me with a stubbed out demo of everything working together. There were many more class files than I was used to, one for data and variables (Model), one for all the graphic elements and UI controls (View), and one to control all the information between the two (Controller). My brain hurt for a couple weeks as I attempted to absorb what seemed like magic and how to apply it to a new job that was about to start. This process has changed the way I approach every project, even simple tasks with only a few lines of code. On smaller projects I may only leverage one part of the MVC framework and figured this was the best way to introduce it to others without it being so overwhelming. So today, I what to present the Controller class, which is part of the MVC framework.



Read More »

Technorati Tags: , , , , , , , , , , ,

| 2 Comments »

How to Build an Engaging Preloader in Flash – taterboy
June 30th, 2010 | Filed under: ActionScript 3, Design, Flash, Flex, Tutorials


Get Adobe Flash player


The Importance of a Good Preloader:
Everyone hates to wait, especially for websites to load. The only thing keeping a potential user sitting in their chair and staring at the screen, while your application loads, is the hope that eventually something great will happen. If that user is impatient, like most of us, the preloader may be the only opportunity you have to interact with a potential user/customer. The fact that something is moving on screen reassures users that your website has not locked up their computer. We may not think that a few seconds is a long time, but to the waiting user, it may seem like minutes. We should take advantage of this brief moment to make a good impression, give them a taste of what’s to come and develop trust.

Read More »

Technorati Tags: , , , ,

| 3 Comments »

Building Custom Loaders in Flex – taterboy
June 5th, 2010 | Filed under: ActionScript 3, Animation, Flash, Flex, Tutorials

In an earlier post I talked all about building Flex UI components with Flash. This example shows how to create a custom loader component, in Flash or Flex, and use it to replace the standard Flex progress bar.


Get Adobe Flash player


The Base Preloader:
I found a preloader class online that implemented the IPreloaderDisplay, this is required to build a custom preloader. You can find out more about building your own here. I took the class I found online and made it generic so I could use it as a base class for all my future preloaders.
Read More »

Technorati Tags: , , , , , , , ,

| 4 Comments »