Tutorials | Taterboy.com: Graphics, Multimedia and Such

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.

Building Visual Flex Components using Flash swc Shared Libraries.

I love building skins or visual components in Flash and doing all my coding in Flex. I also try to make all the code as component-ized as possible, so that it can be reused in future projects. So I have visual component classes from Flash and functionality classes built in Flex. How do we marry the two without hardcoding the flash asset names into your Flex code?

The Approach:
Build as little functionality in Flash as possible and establish templates for how each component should be structured. Here are a couple processes for getting those Flash visual components hooked up to your Flex code.

Method1 - The Direct Approach:
In your code that is specific to your application, create all your visual instances first then pass them in as properties to your class.

There is a Flash visual component called “NewButton”

^?View Code ACTIONSCRITP

//create the visual instance
var btn:NewButton = new NewButton();
 
//create the functionality class instance
var btnCode:NewButtonClass = new NewButtonClass(btn);
addChild(btnCode);

Inside the NewButtonClass class the “btn” instance is used as an Object, the functionality is attached to the visual object and everything is added to the stage.

^?View Code ACTIONSCRIPT

private var baseBtn:Object;
public function NewButtonClass(obj:Object):void{
	baseBtn = obj;
 
	// attach listeners
 
	addChild(baseBtn);
 
}

Depending on the class and needs, sometimes it is best to pass in an Array of visual object instances.
Read More »

Technorati Tags: Adobe, class, custom components, Flash, Flex, swc

| 1 Comment »

Flash Player 10 3D settings with AS3/Flex – taterboy
March 9th, 2010 | Filed under: ActionScript 3, Flash, Flex, Tutorials

Flash Player 10’s 3D capabilities are pretty light, but they have opened up many possibilities in UI design. Getting the perspective just right will take some tweaks, so here’s a demo to show some of the inner workings, like focal length and field of view.

Using the PerspectiveProjection class is the key to getting 3D in Flash looking just right, it is also very easy to use.

^?View Code ACTIONSCRIPT

//new PerspectiveProjection
var pers:PerspectiveProjection = new PerspectiveProjection();
 
//set the field of view - doesn't really do much
pers.fieldOfView = 55;//Default: 55, Range: 1 - 180
 
//set the focal length
pers.focalLength = 663;//Default: 663
 
//get stage center for a straight view, if you want a straight view.				
var centerX:Number = stage.stageWidth * 0.5;
var centerY:Number = stage.stageHeight * 0.5;
 
//set the projection center
pers.projectionCenter = new Point(centerX, centerY);
 
//assign to root/stage
//root.transform.perspectiveProjection = pers;
 
//assign to target/DisplayObject
triImage.transform.perspectiveProjection = pers;

See demo below.
Read More »

Technorati Tags: 3D, ActionSript 3, field of view, Flash, Flex, focal length, perspectiveProjection, projection center

| No Comments »

Illustrating In Illustrator 101 part 3 of 5 – taterboy
December 24th, 2009 | Filed under: Design, General Info, Illustrator, Tutorials

Defining Shapes

Lines:
Some may think that illustration is all about the lines, comics and other art styles may give this impression. I use line-work in most of my illustration styles, though not always black lines. If you do not use lines in your work, you use color or some other means of creating contrast between forms and objects. It is this contrast between colors or light and dark values that produce the lines we think we see everyday in the world around us. We will discuss the use of line-work and contrast to properly define shapes using light and shadow.

Comic artists may use line-work, but on closer inspection we find that those lines do a lot more then just define the shapes of the drawing. The line weight varies as it contours each element. This line variation builds the foundation of the form which gives the illusion of dimension. As you can see with the simple line drawing below. The drawing on the right has more depth while the left circle looks more like a cave drawing.

| No Comments »

Building Tiled Backgrounds Using Photoshop and Illustrator – taterboy
November 3rd, 2009 | Filed under: Design, Illustrator, Photoshop, Tutorials

I can’t wait to get back to publishing Flash tips and code, but we’ve been so wrapped up in ChessJam lately leaving so little time to clean up code and make things more component-ized. I am enjoying the break from programming though, doing illustration again has been very rewarding.

Fixing Blotchy Textures:
In producing tiled textures for some of the background paintings and 3D renderings, I found that even though the tiles did not really show any seams, they were creating some weird patterns over the whole tiled area. They needed tweaking without a long and laborious process of exporting and rendering. The key for me was to have a realtime preview of what I was working on, seeing how the tile would look tiled over a larger surface while I was painting in Photoshop. There may be better ways, we always appreciate feedback, but this worked really well and now my textures are much less blotchy.
Read More »

Technorati Tags: 3D, Illustrator, patterns, photoshop, texture, tiles

| 2 Comments »

AS3-101: Intro to Functions Part 2 and Class Overview – taterboy
September 26th, 2009 | Filed under: ActionScript 101, ActionScript 3, Flash, Flex, Tutorials

The Class:
Classes are a collection of variables and/or functions that provide unique functionality. Within a class, functions and variables define the functionality and how that functionality can be expanded or used by other classes or components. In AS3 a class is wrapped inside a package, a class must be public and have a public constructor(function) by the same name.

^?View Code ACTIONSCRIPT

package{
	public class FunctionTester{
		public function FunctionTester(){
			//constructor, runs after class is loaded, but before visual elements are loaded.
			//classes and their constructors must be public
			trace("load");
		}
	}
}

Inside the package brackets is where the class is declared and all other classes are imported, also meta information can be placed at this level. Everything else is part of the class and must be contained within the class brackets.
Read More »

Technorati Tags: Actionscript, class, Flash, Flex, function, getter, Howto, method, properties, setter, Tutorial

| 3 Comments »

AS3-101: Intro to Functions Part 1 – taterboy
September 13th, 2009 | Filed under: ActionScript 101, ActionScript 3, Flash, Flex, Tutorials

For Flash Developers:
(If you are looking for Flex related stuff, without a timeline, skip down to “The Foundation”.)
Functions really are the building blocks of programming. They take your code off the timeline and open doors to more complex applications. For instance, place the following code on the timeline of a new Flash file (AS3), publish a preview and see what happens.

^?View Code ACTIONSCRIPT

function tester():void{
 trace("something");
}

Notice that nothing happened, meaning the word “somthing” or anything else did not trace out in the console palette. This is because the function was recorded in the Flash Players memory, but not executed. Now add a few frames, say five or more, and add this line on the last frame.

^?View Code ACTIONSCRIPT

tester();

Something happens now, the word “something” appears in the console window every time the playhead reaches the last frame. Flash Player will keep looping until it gets a stop() method call. So let’s do that now. Update the function tester with the stop command.

^?View Code ACTIONSCRIPT

function tester():void{
	trace("something");
	stop();
}

Now notice the the play head starts on frame 1, loads the function into memory, then progresses on to frame, 2,3,4 until the last frame. Once on the last frame, the function tester from the first frame is executed from the last frame, which also tells the Flash player to stop. We can verify that the Flash Player is indeed on the last frame when tester is called by getting a trace of the current frame. I am sure you will just trust me so we can move on, but just incase you don’t, see below.

^?View Code ACTIONSCRIPT

function tester():void{
	trace(currentFrame);
	stop();
}

The Foundation:
(Welcome Flex people)
Like I mentioned earlier, functions are the building blocks to applications, and like blocks different types of functions have different results. First we are going to learn about the most common function and some scenarios for it’s usage.
Read More »

Technorati Tags: Actionscript, argument, Flash, Flex, function, Howto, method, return, Tutorial, void

| No Comments »

AS3-101: Introduction to Variables – taterboy
August 5th, 2009 | Filed under: ActionScript 101, ActionScript 3, Flash, Flex, Tutorials

Actionscript 3 101: Introduction to Variables.

ActionScript 3 (AS3) 101 is a series that will cover the fundamental use of actionscript in the process of building interactive projects. We will start with an elementary overview of terminology and the basic elements that make things happen in actionscript. The first few posts in this series will be an extended version of AS3 101, The First ActionScript I Ever Learned. If you feel you are able to jump in at that post and move forward than you will be able skip a lot of extra reading. These first few posts should enable someone with a very little to no knowledge of Flash itself to start building projects in AS3.

The most basic script element is the variable. It is best to describe it with an example.

x + 2 = y
Read More »

Technorati Tags: Actionscript, compile error, Flash, Flex, Howto, Intro, Tutorial, variables

| No Comments »