Taterboy, Multimedia and Such

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.

Technorati Tags: Action Script 3, animation, AS3, Flash, Flash Action script, game development, games, Howto, Tutorial

| 1 Comment »

Illustrating In Illustrator 101 part 4 of 5 – taterboy
July 25th, 2011 | Filed under: Design, Digital Art, Illustrator, Tutorials

Artists through the ages have pushed the limits and innovated new mediums to communicate to the world. Color has always played a huge roll of how art was received. In this chapter in the Illustrating with Illustrator series, we will discuss color and the different ways to apply color to our work.

Color Schemes:
Color schemes are two or more colors that are used to identify a message or reinforce a brand. A color scheme normally consists of at least a primary and secondary color. Not to be confused with a painter’s primary colors red, yellow and blue, a primary color is the dominant color in the color scheme and can be any color.

There are many methods to developing strong color schemes, from collecting paint chips at the local hardware store to using applications such as Adobe Kuler. Most of the time we are given a brand identity that contains a complete color scheme or becomes a starting point for developing a new one. Illustrator’s Color Panel is a great tool to create limitless combinations of hue and saturation providing the perfect mood and tone of our message.

Colors From Our Past:

more color ideas @ http://dynamicgraphics.com/.

Technorati Tags: Color, color panel, Color Theory, Design, drawing, Howto, Illustration, Illustrator, sketches, Tutorial

| 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;

Technorati Tags: ActionSript 3, animation, AS3, Flash, Flash Action script, flash games, game development, games, Howto, Intro, Tutorial

| 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);

Technorati Tags: ActionSript 3, animation, AS3, Flash, Flash Action script, flash games, game development, games, Howto, Intro, Tutorial

| 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: ActionSript 3, animation, animation engine, AS3, class, Flash, Flex, games, tween, tween class, tween egine, tweener

| 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);

Technorati Tags: ActionSript 3, audio player, fade, Flash, Flex, Loops, panning, sound, volume

| 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.

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: ActionSript 3, AS3, Flash, Flex, Howto, Loader, Loading, Tutorial

| No Comments »

Hidden Marvels in Flash: Jpegs with Transparency – taterboy
September 11th, 2010 | Filed under: Design, Flash, Flex, Games, Tutorials

Ever need a compressed bitmap file with 24 bit transparency, but with the application being delivered over the web, you also need that file to be small? Gif files only have 8bit – aliased transparency and a 256 color limit. 24bit png files have transparency, but are lossless and are often produce large file sizes. Jpegs are perfect compression-wise but do not include transparency, or do they….

Technorati Tags: Actionscript, animation, bitmap, Design, Flash, Flex, swf, transparency, Tutorial

| 1 Comment »

Hidden Marvels in Flash: Gapless MP3s – taterboy
September 11th, 2010 | Filed under: Audio, Flash, Flex, Games, Tutorials

Gapless MP3s

Ever try to loop an mp3 file in Flash or Flex? It can be done, but there’s normally an annoying gap every time the audio loops. This gap is just a part of mp3 compression and there’s nothing that can be done about it.

Example:
Take an aiff or wave file, open it in your favorite sound editor and make a loop (remove all gaps at the beginning and end of the file). Now save the file, first as an aif or wave, then as an mp3. Now close the files and reopen them. Notice the mp3 file has a gap at the beginning and end of the waveform, the wave and aiff files do not.

Technorati Tags: Actionscript, Audio, compression, Design, Flash, Flex, gap, mp3, swf

| 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.