Flash CS3 - Connection Tutorial

This tutorial is built with Flash CS3 and ActionScript 3. Prior versions of Flash and ActionScript will not work with GFS Server.

Lets start.

Using Flash CS3 create a new "Flash File (ActionScript 3)" and call it "ConnectionTutorial" and save it somewhere. Set the sizing to 300 by 200. I also like to setup my timeline to seperate the layers of the background, components, and ActionScript. You don't need to do this if you have a different way of organizing.

Lets add the components. Make yours look like this:

Don't worry about the colors. Make sure the "Address" textbox is a TextInput control and give it the name "address_txt". The connect button is called "connect_btn". Finally at the very bottom put a dynamic text (using the "Text Tool") and call it "status_txt".

Now, lets add the GFS Client component. If you haven't added the Client Tools yet, go ahead and do that first. It is step 4 on the installation page.

Drag the GFSClient from the component panel onto the stage. Once its on the stage you can delete it since its now in the library.

Lets start adding the code. Go into the "Actions" panel and add this script:

import com.giantflyingsaucer.*;


var socketManager:GFSServerXMLSocketManager = null;


connect_btn.addEventListener(MouseEvent.CLICK, connect);


function connect(evt:MouseEvent):void
{
  socketManager = new GFSServerXMLSocketManager(address_txt.text,843);

  socketManager.addEventListener(GFSServerEvent.CONNECTED, onConnected, false);

  socketManager.connect();
}


function onConnected(evt:GFSServerEvent):void
{
  status_txt.text = "Status: Connected";
}

First we imported the GFS Server Events and the XMLSocketManager. After that we created a variable called socketManager which will be used for all our interaction with the GFS Server. Then we added the event listener for the button so we know when the user has used their mouse to click it and what it should call, in this case: connect(). Then you call the connect method of socketManager.

function connect(evt:MouseEvent):void
{
  socketManager = new GFSServerXMLSocketManager(address_txt.text,843);

  socketManager.addEventListener(GFSServerEvent.CONNECTED, onConnected, false);

  socketManager.connect();
}


function onConnected(evt:GFSServerEvent):void
{
  status_txt.text = "Status: Connected";
}

Here we create a new instance of the GFSServerXMLSocketManager class and hand it the value in the Address textbox. After that right away you need to configure your listeners. In this case we are only going to listen for one event - the "CONNECTED" event.

Go ahead and start the GFSServer and run this program. You should see this once you click the button.

 

Last Updated: Feb. 21, 2008

© 2008 Giant Flying Saucer. Site design by gorotron.