2008年02月07日

Flashing Your Chat Application Part 1

Hi everyone. Today we will be learning about Adobe Flash! A while ago Adobe released their Flex SDK to the public. The Flex SDK allows programmers to use the new ActionScript 3 (AS3) scripting language to build Flash version 9 applications. Since flash is cross platform and has a high rate of penetration the apps you program will run on the majority of computers. What is even better is that the OOO server library supports flash clients. So in the next two articles I’m going to take you through porting the java helloworldchat program to flash.

In the above image the top two windows will be the new flash chat application your will implement and the bottom window is the original java chat application. The flash clients will connect to the original Java server so there is no need to change the server code.

In part 1 of this article I will help you setup the tools needed to build your flash application. In part 2 we will start coding the flash client. It’s a big plus if you are familiar with javascript since AS3 is very similar to it.

So let’s begin!

The first thing you need is the original java chat application hello world chat part 2 source Unzip this to a folder named helloworld.

Next we need to download the Flex sdk at Adobe’s site http://www.adobe.com/products/flex/downloads/. Unzip this folder in the same level as helloworld and rename the folder flexsdk.

Also remember to copy the java lib files from the gardens folder. I explained this in Test Server and Client.

So your folder structure should look like this…

your projectfolder
    helloworld
        helloworld files
        lib
            java libs files
    flexsdk
        flexsdk files

Setting up all the config files and ant scripts is a bit of work so we are gonna “borrow” some build stuff from OOO’s new project called Whirled. You can access the repository at svn://code.threerings.net/whirled/trunk. This library is quite large so grab a cup of joe while you’re waiting.

The files that we are going to use are

• whirled/build.properties –> copy it to the helloworld folder
• whirled/etc/whirled-config.xml –> copy it to the helloworld/etc folder
• whirled/etc/flex-include.xml –> copy it to the helloworld/etc folder

Now we are gonna add some ant targets to compile the flash OOO library and your client. Open the original build.xml and add these lines

  <property name="projects.dir" value="c:/prj/gardens/projects" />

	<!-- actionscript stuff -->
		<property name="asrc.dir" value="src/as"/>

		<import file="etc/flex-include.xml"/>

		<target name="aslib" depends="prepare">
			<!-- build the version for clients to build against -->
			<java jar="${flex.path}/lib/compc.jar" fork="true" failonerror="true">
				<arg value="-load-config" />
				<arg value="etc/whirled-config.xml" />
				<arg value="-external-library-path" />
				<arg value="${flex.path}/frameworks/libs" />
				<arg value="-compiler.optimize" />
				<arg value="-compiler.source-path=${projects.dir}/narya/src/as/" />
				<arg value="-include-sources=${projects.dir}/narya/src/as/" />
				<arg value="-output" />
				<arg value="${deploy.dir}/flash-ooo-library.swc" />
			</java>
		</target>

		<target name="asclient">
			<java jar="${flex.path}/lib/mxmlc.jar" fork="true" failonerror="true">
				<arg value="-load-config" />
				<arg value="etc/whirled-config.xml" />
				<arg value="-compiler.optimize" />
				<arg value="-compiler.source-path=${asrc.dir}/" />
				<arg value="-incremental=true" />
				<arg value="-output" />
				<arg value="${deploy.dir}/${app.name}.swf" />
				<arg value="-file-specs" />
				<arg value="${asrc.dir}/${app.name}.mxml" />
			</java>
		</target>
	<!-- end actionscript stuff-->

This sets up two targets aslib and asclient. aslib builds the library that your client will use and asclient builds the flash client application. If you want to know more about these arguments check out the mxml compiler documentation provided by Adobe.

Next we have to change some config parameters in the whirled-config.xml. Open helloworld/etc/whirled-config.xml and go to line 45. You will see a tag named path-element along side with a flex sdk directory. Change that to

         <path-element>../flexsdk/frameworks/libs</path-element>
         <path-element>../flexsdk/frameworks/locale/{locale}</path-element>

Then run aslib to build your library. This should create helloworld/dist/flash-ooo-library.swc. Finally we will create a basic empty flash client application. Inside of helloworld/src/ add a new folder /helloworld/src/as/ this folder will store all your AS3 code. Create a file helloworld/src/as/helloworld.mxml and paste the below code into it.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
applicationComplete="init()" width="400" height="350" horizontalAlign="left" verticalAlign="top" layout="absolute">
</mx:Application>

Call asclient and this should build your client application. Inside of helloworld/dist/ there should be helloworld.swf if you drag and drop that into a browser with flash it should show you a bluish screen. Congratulations you have made your first flash application. Not much to look at but that will soon change. In the next part we will port the java chat code to flash and connect to the server.

Until next time!

• Posted by brian on 19:14 filed in ActionScript, Threerings, English
• パーマリンク