Get User IP Address Using PHP and ActionScript 3

An Internet Protocol Address (IP Address), is a unique number assigned to every device connected to the Internet. For different reasons, it can be useful to get the user IP address, like blocking a spammer user in a chat application for example. In this tutorial, I will show you how to get and display the user's IP address using PHP and ActionScript.

Final Result Preview

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

Note: this SWF is just to show the interface, it won't show the actual IP because it isn't connected to a PHP server.

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 540x300px 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 64x64px #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 35x19px Triangle and using the Rectangle Tool (R) draw a 19x18px 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:


&lt; ?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

? &gt; //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

1	package
2	{

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.

1
2	public class Main extends Sprite
3	{

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:

1	var urlLoader:URLLoader = new URLLoader();
2	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.

1
2	public function Main():void
3	{

Step 17: Listen for Mouse Event

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

1	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!