Client-side Development Environment
From EsWiki
Contents |
Overview
When developing the client, it is best to use Flash and Actionscript since the necessary API's are already built for it.
There are two main development choices when creating the Flash client:
- Work with the Flash IDE (likely coupled with an external editor)
- Work without the Flash IDE (code in an external editor, compile with Flex)
For the fastest development, working with the Flash IDE is likely best, but we will look at both options and how to set them up.
Running Files Locally
In order to run the flash files locally, when they are not in the editor, you need to give them "security clearance". (Using sockets to communicate with ElectroServer is deemed unsecure). To do this, go to Flash Global Security Settings Panel and select Edit Locations -> Add Location. Then select the folder or file to give "security clearance" to. (You may just want the entire C-drive or the folder you work in to have "security clearance"). If at any time later you have problems connecting to sockets, check to make sure you are still within the folders you specified. If not, add the needed folder/file.
Working with the Flash IDE
The main thing to set up when working with the IDE is the ElectroServer classpath. Open up Flash and then go to the Edit Menu and select Preferences. Select Actionscript as the Category.
To use Actionscript2 with Electroserver4, select ActionScript 2.0 Settings. Click the "+", and then put "Installation Folder\api\client\as2\src" for the text.
To use Actionscript3 with Electroserver4, select ActionScript 3.0 Settings. Click the "+", and then put "Installation Folder\api\client\as3\src" for the text.
Note: Replace Installation Folder with the ElectroServer installation folder. (Likely C:\Program Files\ElectroServer_4_0_4 ) So for the AS3 source it would be: "C:\Program Files\ElectroServer_4_0_4\api\client\as3\src" .
Now you should be ready to begin!
Working with an External Editor
The initial set up for an external editor is a bit more work than with the IDE.
FlashDevelop
FlashDevelop is an external editor that has auto-completion and many other features. More Information.
In this tutorial, we will show how to use FlashDevelop with the Flex compiler to bypass the need for the Flash IDE when creating Actionscript 3 content.
Download and Install FlashDevelop
First, download FlashDevelop. Then install it by following the presented instructions. This tutorial assumes that you are installing FlashDevelop 3.0.0 Beta 6.
Download Flex SDK 3.0
Next, download Flex 3.0 SDK. You will have to create an Adobe account, and all you need to download is the SDK not Flex Builder. Extract the file to where you will want to keep it permanently.
Adding the ElectroServer Classpaths
Open FlashDevelop then go to the Tools menu and select Global Classpaths (Ctrl-F9). Select AS3 from the drop down list and select Add classpath. Browse to find "Installation Folder\api\client\as3\src" where Installation Folder is likely C:\Program Files\ElectroServer_4_0_4 . Hit OK. (You should also set up any of your own custom global classpaths here.)
Integrating Flex into FlashDevelop
Go to the Tools menu in FlashDevelop and select Program Settings. Select AS3 Content from the menu on the left. Then put the folder you place flex in as the Flex SDK Location.
Creating a Sample Project
Finally, we are going to make an example project which will connect to ElectroServer. In FlashDevelop, go to Project -> New Project. Under Actionscript 3, select Flex 3 Project. Set the name as ElectroserverTest, the location as desired and it is suggested check the Create Directory for Project. Hit OK.
In the Projects window ( View -> Project Manager if it is not visible ), double-click the project if it is not already expanded. Right-click on src and select Add -> New Class. Set the name as Main.as . Expand the src folder and right-click on Main.as . Select Always Compile. What this will do is make the Main class always be compiled and its constructor will be called at the beginning. (So in this case the Main function in the Main class will be called).
Now to do an initial test, place this code as the Main class.
package {
import flash.system.fscommand;
import flash.display.Sprite;
public class Main extends Sprite
{
public function Main()
{
fscommand("trace","It worked!");
}
}
}
What this does is call a function to trace within FlashDevelop. Note: The class that is selected to Always Compile must extend Sprite or Movieclip.
Now right-click on the project in the project window and select Test Movie. You should see a tab come up with a blank screen and in the output window the text "It worked!" (along with other things).
Note: Some have reported problems with the trace not working in the above code. If you do not see the output It worked!, try the following code instead:
package {
import org.flashdevelop.utils.FlashConnect;
import flash.display.Sprite;
public class Main extends Sprite
{
public function Main()
{
FlashConnect.trace("It worked!");
}
}
}
Now we are going to make it connect to ElectroServer.
package {
import com.electrotank.electroserver4.ElectroServer;
import com.electrotank.electroserver4.message.event.*;
import com.electrotank.electroserver4.message.MessageType;
import org.flashdevelop.utils.FlashConnect;
import flash.display.Sprite;
public class Main extends Sprite
{
private var m_es:ElectroServer;
public function Main()
{
FlashConnect.trace("It worked!");
m_es = new ElectroServer();
m_es.addEventListener(MessageType.ConnectionEvent, "onConnectionEvent", this);
m_es.createConnection( "127.0.0.1", 9898 );
}
//Listen for and handle the ConnectionEvent
public function onConnectionEvent(ev:ConnectionEvent):void
{
if (ev.success) {
FlashConnect.trace("Connected!");
} else {
FlashConnect.trace("Not connected.");
}
}
}
}
You may see some warnings when clicking Test Movie. If you do, simply select Test Movie again and the move should run displaying appropriate output in the output window.
It worked! Connected!
or
It worked! Not connected.
If you wish to fix these warnings, you can click on them to bring up the appropriate EsObject.as file.
Change on line 174:
var obArr = dh.getRawValue() as Array;
To:
var obArr:Array = dh.getRawValue() as Array;
Change on line 204:
var value;
To:
var value:String;
We have imported ElectroServer and created an instance of it. Then we added a listener for ConnectionEvents and connected to the default IP and port (change the IP and port as needed).
Test the movie, and you should see "Connected!" appear in the output (assuming your Electroserver is properly set up).
And that's it, you are now ready to develop ElectroServer content with FlashDevelop.
Example FlashDevelop Project
You can download an entire example FlashDevelop project from Image:FlashDevelopExample.zip. This example uses only .as files (no .fla files). It reads the IP and port from an XML file, connects via Binary protocol, and logs in, sending a username, password, and an EsObject with data to be processed by a login event handler. It also includes a hook for handling plugin messages.
After installing FlashDevelop as described above, simply unzip FlashDevelopExample.zip, then double click ConnectAndLogin.as3proj to edit the classes. The example can be run by opening bin/Example.html or bin/ConnectAndLogin.swf.
