We present a custom InterpolateColorTransform class and
interesting color and image effects accomplished using the methods of the class.
The methods provide several ways to smoothly transition between two
instances of ColorTransform. The methods of the custom class are more versatile
than Color.interpolateTransform method of the built-in Color class
in the fl.motion package.

Color Effects with a Custom InterpolateColorTransform AS3 Class

AS3 Tip: How to Easily Create Outlined Text in ActionScript 3

gotoAndSki();

Multi-Mania 2010 (2M10)

Final Result Preview

Let’s take a look at the final result we will be working towards:

Step 1: Graphics Intro

Well, let’s get started.. For this tutorial we’ll need tank and turret graphics. I used Google SketchUp 7 to make mine.

First I created a tank as a whole. Then I turned the program’s view mode to “parallel projection”, positioning my camera at a 45° angle to the tank to make an illusion of isometrics in the game.

Please, don’t judge me for horrible graphics, I really can do much better but this is just for the sake of explanation

Then I hid the turret leaving only the tank body visible and rotated the body by 45° eight times, rendering each position separately. So I achieved 8 different views of the body. I did the same thing to the turret while the tank was hidden. I saved all 16 pics as PNG 24 with alpha channel. You can see the final result below. (This is not actually enough for this kind of movement, it would be better to have twice as many views of the tank but it’s enough for the purposes of this tutorial.)

.

You don’t necessarily need to use Google SketchUp of course, you may wanna use 3ds max or Maya or whatever you like, you may also use my graphics to practice if you don’t want to or cannot create your own graphics.

Step 2: New Flash Project

Now open up Flash (I use Adobe Flash CS4) and choose Create New Flash File (Actionscript 3.0). We will only need it to make a tank MovieClip and to connect the Game class to it later.

.

Step 3: Set the Document Properties

Right-click the stage and go to the Document Properties item. Make it 600 x 400 (or whatever you like) and 21 frames per second (this frame rate seems to be optimal to me so I almost always use it. It doesn’t really matter, though).

Click OK. Go to File > Save as and save this file as tank.fla in some folder on your computer (I recommend you create a Tank folder and put the file inside).

Step 4: Import Your Tank Images to Library

Now go to File > Import > Import to library. Find the folder where you saved your eight tank images, select them all and import to library.

.

Step 5: New Symbol

Create a new empty symbol by clicking this little icon in the library:

Choose MovieClip type and call the symbol “tank”. Put the registration point in the center (the registration point is that tiny black square in that grid of white squares, for those who don’t know).

Step 6: Edit the Symbol

After the symbol is created it appears in the library (its name “tank” is just a cosmetic name which is used solely in the library so it doesn’t matter what you call it). Open it by double-clicking its icon. Then take 1.png from the library and drag it onto the symbol’s stage. Align the image to the symbol’s registration point like in this screenshot:

You want the registration point to be in the center of the tank’s turning circle.

Step 7: Create Seven Blank Key Frames

Go to the symbol’s timeline. Rename the “Layer 1″ to “Tank”. Your tank’s body image (1.png) should be on the first frame of this layer. Click the second frame and without releasing your mouse button drag the cursor to the 8th frame selecting frames 2 through 8. Then right-click this selected area and choose “Convert to blank keyframes”.

Step 8: Drag All Images Onto the Stage

When 7 blank key frames are created, select the second frame and drag 2.png to it aligning the image with the registration point (just like you did with 1.png); imagining that the registration point is an axis that the tank will use to spin around when it’s turning. Do the same to the rest of the frames. You don’t have to align it very precisely, but the more precisely you align it the better the movement will look when the tank tries to follow the cursor as the game runs.

Step 9: Prevent the Timeline from Playing

After you dragged every image to the symbol’s stage and aligned them select the first frame and push F9 to open the actions panel. Type a single method “stop();” in it and close the panel. This is an important step because we don’t want our tank to automatically start spinning around as soon as it’s added to the stage.

Step 10: Create a Turret MovieClip

Go to the library and create a new MovieClip symbol. Call it turret. Double-click the symbol’s icon and do the same you did with the tank MovieClip (Steps 4. through 8.) to the turret but using turret images. Align it to the registration point this way, at the point around which the turret would naturally turn:

Notice that I’ve named the turret images like this: 1-.png, 2-.png and so on, so that they wouldn’t replace the tank images when imported to library. You may want to use folders to put your images into. In this case your turret and tank images may have the same names.

Step 11: Assembling the Tank

After we’ve finished with turret symbol, open up the tank symbol again, create a new layer above the “Tank” layer and drag the turret movie clip from the library onto this layer. Align the turret with the tank body. The result should look like this:

Step 12: Give the Turret an Instance Name

Click once on the turret to select it (blue rectangle around it will indicate that it’s selected):

…then go to properties and give it and instance name mTurret (for MovieClip turret):

Click “Scene 1″ link to exit symbol editing mode.

Step 13: Export Your Tank for ActionScript

Right-click the tank symbol in the library, choose Properties (or Linkage if you’re using Flash CS3) from the dropdown menu (make sure you’re in an Advanced mode), check “Export for Actionscript”, and for the class’ name type in “Tank” (with capital T). This step will allow us to connect our Tank MovieClip to the instances created using our Tank class in future.

The graphics part is over for now; you may delete the tank from the stage. We’ll add it programmatically later.

Step 14: Create a New ActionScript File

In your Flash Authoring tool go to File > New and create a new ActionScript file.

Step 15: Save Your File

Go to the folder where you saved your tank.fla file and create a new folder called “main” inside. Save your ActionScript file in this folder as TankMaker.as. The location of this file should therefore be: tank/main/TankMaker.as

Step 16: Let’s Write Some Code

First of all, create a package and import the necessary classes into it:

package main {	

	import flash.display.*;
	import flash.events.*;

}

The word “main” here means the location of this file relative to our tank.fla

We will need “display” classes to show our assets on the screen and “events” to keep track of the mouse events.

Step 17: Public Class and Variables

Now we have to declare a public class TankMaker (according to the Actionscript file’s name) and the necessary variables:

package main {

	import flash.display.*;
	import flash.events.*;

	public class TankMaker extends Sprite {

		// the instance of our Tank class (which we exported for actionscript before)
		private var tank:Tank;

		// the vars to keep the coordinates of the point where we want our tank to move
		private var moveTankToX:Number;
		private var moveTankToY:Number;

		// coordinates of the point at which the tank aims its turret
		private var turnTurretToX:Number;
		private var turnTurretToY:Number;

		// current position of the tank
		private var currentTankPositionX:Number;
		private var currentTankPositionY:Number;

		private var tankSpeed:Number = 2;

		// the point at which the tank moves after a mouse click
		private var clickPoint:Object;

		// the angle of tank and turret rotation in radians
		private var Atan2:Number;
		private var turretAtan2:Number;
	}
}

I declared all of the variables as “private” because I don’t want them to be accessible from anywhere outside this class.

Step 18: Create a Constructor Method

Directly below the last variable create a public function and call it TankMaker. It’s going to be the constructor of the class. Then add an event listener for Event.ADDED_TO_STAGE to it so that we can create our tank object only after the stage is. Then pass this event to the method called addStage.

public function TankMaker() {

	addEventListener(Event.ADDED_TO_STAGE, addStage);

}

Step 19: Create a Tank Instance

After the stage is created and the ADDED_TO_STAGE event has triggered the addStage() method it’s about time to create a tank instance.

Declare a private function and call it addStage. The data type of the function will be: Event. And the return type will be “void” because we’re not going to return anything from it.

private function addStage (e:Event):void {

	//create a new tank instance of the movie clip
	// which you had exported for actionscript
	tank = new Tank();

	// now a little trick, I scaled my tank down
	// to the size of about one fourth of its original size
	// so that is wasn't so huge
	tank.scaleX = 0.25;
	tank.scaleY = 0.25;

	// set the initial position of the tank right
	// in the center of the stage
	tank.x = stage.stageWidth / 2;
	tank.y = stage.stageHeight / 2;
	// and add it to the display list
	addChild(tank);

	// now add event listeners for mouse down and mouse move
	// events to the stage
	stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownListener);
	stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener);

}

Step 20: Handling Mouse Movements

Create a private function mouseMoveListener() with a data type of mouse event to handle mouse movements across the stage. The event listener to trigger this function was created in the last Step.

private function mouseMoveListener(e:MouseEvent):void {

	// create a variable to keep the relative angle
	// between mouse's current position in degrees
	// and the tank's current position
	var angle:Number;

	// the next 2 variables are gonna be
	// equal to the the mouse's current position
	turnTurretToX = e.stageX;
	turnTurretToY = e.stageY;

	// calculate the relative angle in radians
	// between the mouse's curent position
	// and the tank's current position

	turretAtan2 = Math.atan2(turnTurretToY - currentTankPositionY, turnTurretToX - currentTankPositionX);

	// calculate the same angle in degrees.
	// to get degrees out of radians we have to
	// multiply radians by 180 and divide the result by PI
	// But here are some specifics of Flash
	// it calculates the angle not from 0 thru 360
	// but from 0 thru 180 and from - 180 thru 0

	// so let's add some conditional to get rid of this problem
	if (Math.round(turretAtan2 * 180 / Math.PI) < 0) {
		// if angle is between 0 and -180 add 360 to it
		angle = Math.round(turretAtan2 * 180 / Math.PI) + 360;
	} else {
		// if not, calculate it as usual
		angle = Math.round(turretAtan2 * 180 / Math.PI);
	}

	// having our angle value stored in a variable
	// let's rotate our turret towards the mouse pointer

	// I've done a lot of calculations trying to
	// figure it all out, so you may try to undestand my logic

	// I'm just picking the right frame of the turret MC depending
	// on the angle of the mouse from the turret

	if (angle > 240 && angle < 300) {
		// go inside the tank MovieClip then inside mTurret
		// go to the frame 1 and stop
		tank.mTurret.gotoAndStop(1);
	}
	if (angle > 300 && angle < 340) {
		tank.mTurret.gotoAndStop(2);
	}
	if ((angle >= 0 && angle < 20) || (angle > 340 && angle <= 360)) {
		tank.mTurret.gotoAndStop(3);
	}
	if (angle > 20 && angle < 60) {
		tank.mTurret.gotoAndStop(4);
	}
	if (angle > 60 && angle < 120) {
		tank.mTurret.gotoAndStop(5);
	}
	if (angle > 120 && angle < 160) {
		tank.mTurret.gotoAndStop(6);
	}
	if (angle > 160 && angle < 200) {
		tank.mTurret.gotoAndStop(7);;
	}
	if (angle > 200 && angle < 240) {
		tank.mTurret.gotoAndStop(8);
	} // end

}

Step 21: Mouse Click Handler

Below the end of our mouseMoveListener() function create a private function called mouseDownListener() with data type of MouseEvent and pass it to the moveTankOnEnterFrame method:

private function mouseDownListener(e:MouseEvent):void {

	// when click occurs assign the next variable
	// the coordinates of the mouse pointer's current position
	moveTankToX = e.stageX;
	moveTankToY = e.stageY;
	// and add event listener to move the tank frame by frame
	addEventListener(Event.ENTER_FRAME, moveTankOnEnterFrame);

}

Step 22: Move Tank Frame By Frame

Create a new private function called moveTankOnEnterFrame() and inside it call a method moveToCoordinates() with 3 parameters:

private function moveTankOnEnterFrame(e:Event) {
	moveToCoordinates(tank, moveTankToX, moveTankToY);
}

This will, eventually, cause the tank to drive towards the clicked point, every frame.

Step 23: Teach the Tank To Move

Now we have called moveToCoordinates() method but we haven’t created it yet. Let’s do that now.

The tX and tY won’t be used but we must create as many parameters as we called. This is how it looks:

private function moveToCoordinates(tank_mc:Tank, tX:Number, tY:Number) {

	// create a variable to keep the relative angle
	// between mouse's current position in degrees
	// and the tank's current position
	// this variable exists only inside this function so
	// you we can use the same name as we used before
	var angle:Number; 

	// calculate the angle (remember moveMouseListener?
	// we do the same here but with the tank itself)
	if (Math.round(Atan2 * 180 / Math.PI) < 0) {
		angle = Math.round(Atan2 * 180 / Math.PI) + 360;
	} else {
		angle = Math.round(Atan2 * 180 / Math.PI);
	}

	if (angle > 240 && angle < 300) {
		tank.gotoAndStop(1);
	}
	if (angle > 300 && angle < 340) {
		tank.gotoAndStop(2);
	}
	if ((angle >= 0 && angle < 20) || (angle > 340 && angle <= 360)) {
		tank.gotoAndStop(3);
	}
	if (angle > 20 && angle < 60) {
		tank.gotoAndStop(4);
	}
	if (angle > 60 && angle < 120) {
		tank.gotoAndStop(5);
	}
	if (angle > 120 && angle < 160) {
		tank.gotoAndStop(6);
	}
	if (angle > 160 && angle < 200) {
		tank.gotoAndStop(7);
	}
	if (angle > 200 && angle < 240) {
		tank.gotoAndStop(8);
	}

	// give the clickPoint a value of a current mouse position
	// when a click occurs
	clickPoint = {x:moveTankToX, y:moveTankToY};

	// calculate the angle in radians between the pointer's
	// current position and tank
	Atan2 = Math.atan2(clickPoint.y - tank_mc.y, clickPoint.x - tank_mc.x);

	// now add a value of Atan2 cosine to the tank's X position
	// and sine to its Y position every frame
	tank_mc.x += Math.cos(Atan2) * tankSpeed;
	tank_mc.y += Math.sin(Atan2) * tankSpeed;

	// now give the values to currentTankPositionX and
	// currentTankPositionY which we used in our mouseMoveListener
	currentTankPositionX = tank_mc.x;
	currentTankPositionY = tank_mc.y;

	// and finally a little trick. Since we don't want our tank to
	// start chaotically vibrating when it reaches its destination
	// we must calculate the distance between the tank's position and
	// the click point, and if it's less than 15, remove the ENTER_FRAME listener
	if (Math.abs(tank_mc.x - clickPoint.x) < 15 && Math.abs(tank_mc.y - clickPoint.y) < 15) {
		removeEventListener(Event.ENTER_FRAME,moveTankOnEnterFrame);
	}
}

Why use a distance of 15? Well, I found out that it never goes beyond 15 by simply tracing it like this:

trace(Math.abs(tank_mc.x - clickPoint.x));

…you can do the same if you want

Step 24: Overviewing The Whole Class

As our class is ready, let’s take a look at it as a whole:

package main {

	import flash.display.*;
	import flash.events.*;

	public class TankMaker extends Sprite {

		private var tank:Tank;

		private var moveTankToX:Number;
		private var moveTankToY:Number;

		private var turnTurretToX:Number;
		private var turnTurretToY:Number;
		private var currentTankPositionX:Number;
		private var currentTankPositionY:Number;

		private var tankSpeed:Number = 2;

		private var clickPoint:Object;

		private var Atan2:Number;
		private var turretAtan2:Number;

		public function TankMaker() {

			addEventListener(Event.ADDED_TO_STAGE, addStage);

		}

		private function addStage (e:Event):void {

			tank = new Tank();
			tank.scaleX = 0.25;
			tank.scaleY = 0.25;
			tank.x = stage.stageWidth / 2;
			tank.y = stage.stageHeight / 2;
			addChild(tank);

			stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownListener);
			stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener);

		}

		private function mouseMoveListener(e:MouseEvent):void {

			var angle:Number;

			turnTurretToX = e.stageX;
			turnTurretToY = e.stageY;

			turretAtan2 = Math.atan2(turnTurretToY - currentTankPositionY, turnTurretToX - currentTankPositionX);

			if (Math.round(turretAtan2 * 180 / Math.PI) < 0) {
				angle = Math.round(turretAtan2 * 180 / Math.PI) + 360;
			} else {
				angle = Math.round(turretAtan2 * 180 / Math.PI);
			}

			if (angle > 240 && angle < 300) {
				tank.mTurret.gotoAndStop(1);
			}
			if (angle > 300 && angle < 340) {
				tank.mTurret.gotoAndStop(2);
			}
			if ((angle >= 0 && angle < 20) || (angle > 340 && angle <= 360)) {
				tank.mTurret.gotoAndStop(3);
			}
			if (angle > 20 && angle < 60) {
				tank.mTurret.gotoAndStop(4);
			}
			if (angle > 60 && angle < 120) {
				tank.mTurret.gotoAndStop(5);
			}
			if (angle > 120 && angle < 160) {
				tank.mTurret.gotoAndStop(6);
			}
			if (angle > 160 && angle < 200) {
				tank.mTurret.gotoAndStop(7);;
			}
			if (angle > 200 && angle < 240) {
				tank.mTurret.gotoAndStop(8);
			} 

		}

		private function mouseDownListener(e:MouseEvent):void {

			moveTankToX = e.stageX;
			moveTankToY = e.stageY;
			addEventListener(Event.ENTER_FRAME,moveTankOnEnterFrame);

		}

		private function moveTankOnEnterFrame(e:Event) {

			moveToCoordinates(tank, moveTankToX, moveTankToY);
		}

		private function moveToCoordinates(tank_mc:Tank, tX:Number, tY:Number) {

			var angle:Number; 

			if (Math.round(Atan2 * 180 / Math.PI) < 0) {
				angle = Math.round(Atan2 * 180 / Math.PI) + 360;
			} else {
				angle = Math.round(Atan2 * 180 / Math.PI);
			}

			if (angle > 240 && angle < 300) {
				tank.gotoAndStop(1);
			}
			if (angle > 300 && angle < 340) {
				tank.gotoAndStop(2);
			}
			if ((angle >= 0 && angle < 20) || (angle > 340 && angle <= 360)) {
				tank.gotoAndStop(3);
			}
			if (angle > 20 && angle < 60) {
				tank.gotoAndStop(4);
			}
			if (angle > 60 && angle < 120) {
				tank.gotoAndStop(5);
			}
			if (angle > 120 && angle < 160) {
				tank.gotoAndStop(6);
			}
			if (angle > 160 && angle < 200) {
				tank.gotoAndStop(7);
			}
			if (angle > 200 && angle < 240) {
				tank.gotoAndStop(8);
			}

			clickPoint = {x:moveTankToX, y:moveTankToY};
			Atan2 = Math.atan2(clickPoint.y - tank_mc.y, clickPoint.x - tank_mc.x);

			tank_mc.x += Math.cos(Atan2) * tankSpeed;
			tank_mc.y += Math.sin(Atan2) * tankSpeed;

			currentTankPositionX = tank_mc.x;
			currentTankPositionY = tank_mc.y;

			if (Math.abs(tank_mc.x - clickPoint.x) < 15 && Math.abs(tank_mc.y - clickPoint.y) < 15) {

				removeEventListener(Event.ENTER_FRAME,moveTankOnEnterFrame);
			}
		}
	}
}

Step 25: Final Strokes

Go to File > New, and create a new ActionScript file. Save it as “Game.as” in the same folder as your tank.fla file. This will be our document class.

Here’s the code for Game.as class:

package {

	import flash.display.*;
    // import the contents of our main folder
	import main.*;

	public class Game extends MovieClip {

		private var newTank:TankMaker;

		public function Game () {

            // create a new instance of our tank maker class
			newTank = new TankMaker();
            // and add it to the stage of course
			addChild(newTank);
		}
	}
}

Save the file. All it does is create a tank and add it to the main stage, ready to control.

Step 26: Attach Game Class to the FLA

Open up tank.fla and go to the Properties panel. For Class type in “Game” and save the file.

Aha! There we go. You can now press CTRL + ENTER on PC (CMD + RETURN on Mac) and test the Game.

I hope you enjoyed this tutorial, thanks for reading

Deploy a Tank on a Mission in an Isometric War Zone

Final Result Preview

Let’s take a look at the final result we will be working towards:

The PHP script and SWF you create in this tutorial can certainly be used together to display the user’s actual IP address.

Step 1: Brief Overview

You’ll learn how to write and use php code to retrieve data generated from the server using ActionScript 3 and then use that data in your application.

Step 2: Set Up Your Flash File

Launch Flash and create a new document. Set the stage size to 540×300px and the frame rate to 24fps.

Step 3: Interface

This is the interface we’ll use: a simple background, a button to call the function that will get the data and some TextFields to display the data obtained from the web server.

Continue to the next steps to see how it’s made.

Step 4: Background

Select the Rectangle Tool (R), create a 540px wide, 300px high rectangle and fill it with this radial gradient #424A57, #232730. Center the rectangle to fit the stage.

Step 5: Action Button

A button will be used to call the function that will read the PHP file from the web server.

Use the Oval Tool (O) to create a 64×64px #EEEEEE circle, and center it on the stage.

To create the arrow in the middle we’ll make use of the PolyStar Tool (click and hold the Rectangle Tool button and a context menu will appear where you can select the tool), with the tool selected, go to the Properties Panel and click the Options button.

Set the Number of Sides to 3 and click OK.

Create a 35×19px Triangle and using the Rectangle Tool (R) draw a 19×18px rectangle. Align them to form an arrow.

Fill the arrow with a different color, place it in the center of the circle and Break them Apart (Cmd+B) this will cut the arrow shape in the circle.

Convert the shape to a Button and name it getButton.

Step 6: TextFields

Select the Text Tool (T) and create a dynamic textfield, this is the format used in the example: DIN Bold, 70pt, #EEEEEE. Using the same tool create another field, this time it’s a static field that will display "Your IP Address:" used as feedback to the user.

Center the textfields as shown in the image:

Name the dynamic textfield ipField.

Step 7: Embed Font

You’ll probably like to use a good looking font that not every user will have, so to make sure the user sees what we want him to see, we need to embed our font.

Select your dynamic TextFields and go to the Properties panel, Character section and press the Embed… button.

A new window will come up, select the characters you want to embed (in this case numerals) and click OK.

Step 8: A Little Detail

You will notice in the Demo that the TextFields and the Button appear to have some bevel, this is a simple letterpress effect.

To give the textfields and button this look, duplicate the shapes already on stage and using the keyboard arrows move it 1px up. Change the color to #1B1E25 to complete the effect.

Step 9: PHP

PHP is a powerful scripting language that enables your application to run code on the server side, in this case we will obtain the user IP address using a script in a web server.

Open your preferred PHP editor (any text editor will do the job) and write the following lines:

< ?php //Opening Tag, tell PHP server to interpret the following lines as php code

$ip = $_SERVER['REMOTE_ADDR']; //Sets the ip variable, its value is a method that will get the user ip
echo $ip; //The echo keyword outputs the assigned string, in this case the ip variable

? > //Close tag

This code tells the server to get the visitor’s remote address (IP) and then returns the address obtained, which is stored in the $ip variable.

Step 10: Server

A PHP compatible web server is required to run the application successfully; nowadays, almost any web server supports and has installed PHP so it would be rare if yours doesn’t (except for free web hosts).

Save the PHP file as script.php and upload it to your web server, remember that we’ll call this file later using ActionScript so don’t forget the path where you uploaded it.

Step 11: ActionScript

Now it’s time for our favorite language..

Create a new ActionScript 3.0 Class and save it as Main.as in your class folder.

Step 12: Package

package
{

The package keyword allows you to organize your code into groups that can be imported by other scripts, its recommended to name them starting with a lowercase letter and use intercaps for subsequent words (for example: myClasses). It’s also common to name them using your company’s website url, so http://mycompany.com would use: com.mycompany.classesType.myClass.

In this example, we’re using a single class, so there isn’t really a need to create a classes folder, or to set a package.

Step 13: Import Directive

These are the classes we’ll need to import for our class to work, the import directive makes externally defined classes and packages available to your code.

import flash.display.Sprite;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.easing.Strong;

Step 14: Declare and Extend the Class

The extends keyword defines a class that is a subclass of another class. The subclass inherits all the methods, properties and functions, that way we can use them in our class.

public class Main extends Sprite
{

In this example, the Main class inherits all the methods and properties of the Sprite Class.

Step 15: Variables

We’ll make use of two variables. Add this below the class declaration:

var urlLoader:URLLoader = new URLLoader();
var tween:Tween;

urlLoader creates an instance of the URLLoader class, that will handle the load of the external PHP file, while tween declares an object that will use the Tween class for animation.

Step 16: Constructor

The constructor is a function that runs when an object is created from a class, this code is the first to execute when you make an instance of an object or runs using the Document Class.

public function Main():void
{

Step 17: Listen for Mouse Event

The following line adds a listener to the button in stage to react on a MOUSE_UP MouseEvent.

getButton.addEventListener(MouseEvent.MOUSE_UP, getIP);

Step 18: Get IP

This code executes when the button is pressed, it loads the php page we wrote earlier on the server and calls a function when the load is complete. It also handles the button animation.

private function getIP(e:MouseEvent):void
{
	urlLoader.load(new URLRequest("http://www.mywebsite.com/script.php"));
	urlLoader.addEventListener(Event.COMPLETE, showIP);

	tween = new Tween(getButton, "y", Strong.easeOut, getButton.y, 340, 1, true);
}

Step 19: Receive and Display the Data

The next function is executed when the PHP file is fully loaded. It displays the received data (the IP address that we ‘echo’-ed) using the TextFields in stage.

private function showIP(e:Event):void
{
	ipField.text = e.target.data;
	ipFieldPressed.text = e.target.data;
}

Step 20: Document Class

Go back to the FLA and in the Properties Panel > Publish section > Class field, add Main as value. This will link this class as the Document Class.

Conclusion

Now you know how to get and use the user’s IP address in your Flash movie, experiment and implement this example in your own projects!

I hope you liked this tutorial, thank you for reading!

Get User IP Address Using PHP and ActionScript 3

As part of the Open Source Media Framework, Adobe has released a new video player called the Strobe Media Playback component. This is a full-featured video player that is ready for easy deployment. It has all of the advanced features of OSMF built right in including things like HTTP streaming, content protection, and progressive, streaming, and live video delivery. Obviously many of you will want to create a custom video player, but for quick video deployment, this player will be the way to go. I have recently switched to using this player on gotoAndLearn().

Deploying the player is very easy and all the instructions are included in the download files. Here’s a tip though. Take the height of your source video and add 35 to get the height of the SWF when you embed.

Lee

Introducing Strobe Media Playback

The image below was circulated on Twitter and it shows that on Apple’s demo page you are unable to view the examples using Google Chrome, Opera, Firefox or any other browser and are instead asked to download and install Safari in order to see the demos. That is quite odd seeing as though Chrome has much better support for the future HTML5 standard according to the site html5test.com.

In an ironic and funny side note, the browser sniffing was apparently blocking people from viewing the demos on their iPhone, although I can’t confirm that. The performance of the demos on the iPhone may have something to do with that, as most of the demos crawled on my 3GS.

If you go to the developer section of Apple’s website you can view the demos using Chrome and are not directed to download Safari. So on to the demos themselves. I made a joke on Twitter about how these were equivalent to things created in Flash 8, but to be honest that is being kind. A photo slideshow and 360° PNG sequence are more like Flash 5. The reality is that HTML5 is capable of much more than that so it is odd that they considered these to be a good showcase of what is possible. Apple should really consider hiring some Flash developers to create some badass HTML5 demos. Many in the community have been dabbling in it and have created much more impressive demos than these.

Other browser manufacturers have rightfully jumped up to dispute Apple’s questionable browser-sniffing policy. Opera’s Haavard Moen blogged that

“when the page doesn’t work in Opera or other browsers it isn’t because these browsers don’t support HTML5. It’s because Apple uses browser sniffing and vendor prefixes, and in addition to that they aren’t really testing a lot of HTML5 at all. Most of their demos seem to have got nothing to do with HTML5, as a matter of fact.”

Christopher Blizzard from Firefox was more direct saying

“Apple’s messaging is clearly meant to say ‘hey, we love the web’ but the actual demos they have and the fact that actively block other browsers from those demos don’t match their messaging. It’s not intellectually honest at all.”

A quick review of the source code shows that it is littered with WebKit-specific prefixes and extensions. The messaging surrounding the demos is also iffy at best. In the Light Table demo, which is actually pretty nice, the messaging states that

“Using CSS3 transforms and transitions, photos can be easily sorted, shuffled, or displayed in a slideshow with just a few lines of CSS and JavaScript.”

Of course I was curious as to the contents of those 3 lines as they must be the most powerful 3 lines of code ever written. In actual fact, the JavaScript file that drives the demo is 700 lines long.

Personally I look forward to the day when simple things like video playback and photo galleries can be handed off to browsers to handle. Flash has always been about pushing the envelope. So long as there are standards, there will always be technologies and developers who want to go beyond that.

Lee

Thoughts On Apple’s HTML5 Demos

Despite the lack of CG on this one, the narrative techniques share major similarities in their refined simplicity and symbolism to Pleix’s Death Penalty piece. Its audio also turns a table-top into a landscape for drama.

Although this spot is coming via La Chose rather than TBWA, in the case of Pleix’s piece, Amnesty has always found ways to address large issues in visually universal terms while still delivering the same impact as being completely literal.

Agency : La Chose, Paris
Creative Director : Pascal Grégoire
Creative Team : Axel Didon, Kevin Colinet, Benjamin Parent

Production Company : Rods Films
Director: BIF
Executive Producer : Alexandre Richardot
Line Producer : Julie Piganiol
Production Manager : Emeline Courtecuisse
1rst AD : Severine Bouvier
Production Assistant : Thibaud Noyer
DOP : Nicolas Loir
Camera Assistant : Vincent Toubel
Electrics : Olivier Benoist, Romain Droy
Grips : Stephane Germain, Gael Leroux
Painter : Virginie Louis
SFX : JC Spadaccini

Post Production : BIF

Sound : Kouz Production

Posted on Motionographer

BIF: Russian Dolls

Posted on Motionographer

BNS: 2010 AICP Sponsor Reel