So What is it about?

The book does a few things.  First, about a third of the book introduces you to some open source tools for doing flash development.  Things like FlashDevelop, MTASC, SwfMill, ANT, and ASDT.  It’ll show you how to create an AS2 and an AS3 based flash application using completely free and open software.  This goes all the way from installing the tools, creating a sample app, writing up some unit tests for it, and then to publishing it to the web.  Along the way it’ll give you a brief introduction to each tool, explain what it does, and then give a quick example of how to use it.  (That’s the 5 chapters I wrote)

The remaining 2/3 of the book dedicates a chapter to various open source projects going into a little more detail about them.  There’s a chapter on Papervision 3D, SWX, FUSE/Go, HAXE, AMFPHP, two for Red5 and a couple more.

This was a lot of fun to work on, and my only regret is not getting to know the other authors better.

If you’re looking for a place to buy it, check out Bookpool.   I worked for them for a year and they’re really stellar guys.  They offer good prices, but more importantly;  as long as the book is in stock, they do their damndest to get it on a truck the day you order it. (Of course, you’re at the mercy of the publisher if it’s out of stock)

The XRayViewer has been broken for quite some time. I had originally done it with an AIR beta, and that has since stopped working. So there’s now a newly compiled version just waiting for you to grab.

What is the XRayViewer?

So you may be asking yourself What exactly is the XRayViewer?

All this little app does is host the XRay connector and let you load a local swf. Then it displays the swf with some simple controls to play/stop/advance/back. The big benefit is you can then use XRay (By John Grden + Others) to inspect the swf without changing any code around.

There’s three new (very minor) features in this version:

1. There’s a button to launch the XRay interface in your default browser.
2. The path to the loaded swf is displayed in the top toolbar. (You can copy & paste that into Xray so you don’t have to navigate as far into the hierarchy)
3. New logo / icons

Now Open Source!

The entire project is now licensed under the MIT license. If you install the application and then right click on it you can “View Source” to get the source code for it.

Explorer introduction – Part 1
Explorer introduction – Part 2

You can find the Pulse Particle project page here:
http://rogue-development.com/pulseParticles.html

There were several requests in my last blog post on how people could help out. Check out the new contribute page on my site. There things for all levels of technical knowhow there.

1) Various configuration options for the particles
2) The resulting config-object that those options make, you can pass that to SimpleParticles to create the effect in your application.
3) A live preview of the particle effect

The demo only has a handful of rules in it, but they show off a good chunk of the possible functionality you can get from the SimpleParticles interface. One of the biggest limitations of the explorer is there’s only a few images embedded for you to make particles out of.

To use one of these particles in your app, do something like this:

import com.roguedevelopment.pulse.simple.SimpleParticles;import com.roguedevelopment.pulse.PulseEngine;

...

PulseEngine.instance.root = this;SimpleParticles.createEmitter( {pps:10,x:153, y:286,image:spark,     movement:true, minSpeed:199,     maxSpeed:216, minAngle:211,     maxAngle:219, minScale:0.8,     maxScale:1, pointSwarm:[100,100], lifespan:5000} );

where the argument to createEmitter comes from #2 above.

You can play with it yourself at:
http://rogue-development.com/pulse/explorer/#

If you make any cool looking effects, copy & paste the config object to a comment to share with everyone.

Here’s a quick little mini-project I banged out last night.
http://www.agileagenda.com/logview/LogViewAs.html
It shows traffic to my websites as balls flying through space. It uses Red5 on the server to watch the log files, and Flash on the client to display and animate that data. It’s watching the websites:

www.agileagenda.com
www.flashyourspace.com
www.marc-hughes.com
www.rogue-development.com

Just open up the flash page, and if nothing is currently happening browse to those sites.

I’ll post server & client side post under an MIT license when I get it to a more polished state.

This past week I caught Chris’ “Building Red5 Applications” session at FlashForward. I finally got up the motivation to download and try it out.

Here’s my experience. It’s my first time playing with Red5 (but I have plenty of java & eclipse experience) so it’s almost guaranteed I’m not doing everything the “right way”. But this way worked for me, maybe it’ll help someone else. If it does help you, please leave a comment. Writing this up takes a while and I’m not going to bother in the future for other things if nobody gets value out of it.

Attempt #1
I wanted to try out the .tar.gz package so I would know how to deal with it on Linux as well as Windows. That way I’d be able to deploy anything I built on my webhost fairly easily.

I unpacked it, ran ant, and let it all build. So far so good.

Then I ran the red5.bat file. Lots of exceptions. Like millions, maybe billions, I lost track. Seems my sample applications weren’t found. I poked around a bit, but no good. Screw this.

Attempt #2
I went for the windows installation package. That unpacked everything and the server ran fine. I could open up a web browser to http://localhost:5080/ and view the demos, admin panel, etc.

Note: The default admin username/password is admin/admin. You can change that in conf/tomcat-users.xml I’d suggest changing it.

Eclipse

So now I want to get it rocking with eclipse. I launch eclipse (I’m lazy and like things easy so I use easy eclipse.)

I select File->Import->Existing project, then pick my Red5 project. Bamn, I got an eclipse project set up.

But there’s compile errors.

Severity and Description Path Resource Location Creation Time Id
Project red5_server is missing required source folder: ‘test’ red5_server Build path 1190574481375 173990
The project cannot be built until build path errors are resolved red5_server Unknown 1190574530687 173992

So I closed the red5 eclipse project, fired up a text editor, and looked in my .classpath file inside the red5 folder. It had the offending entry.

<classpathentry kind=”src” path=”test”/>

Note… I delete this line later on:
<classpathentry kind=”con” path=”org.jayasoft.ivyde.eclipse.cpcontainer.IVYDE_CONTAINER/ivy.xml/test,”/>
You might as well do it now since you’re in there.

So I removed it, and repopened eclipse.

A quick Project->Clean and…
3656 Errors

Ok, seems it doesn’t see some libraries. Right click on my project, select properties. Go into “Java Build Path”, select the “Libraries” tab, click the “Add Jars…” button, and add all of the .jar files in the lib directory.

A quick Project->Clean and…
0 Errors

WOOT

Running it from Eclipse

Now I go into src/org/red5/server, find the StandAlone.java, right click it, and select “Run as…”->”Java Application”.

I check my eclipse console panel and get a bunch of lines the last one being:

[INFO] 2007-09-23 15:14:20,875 main:( org.red5.server.Standalone.main ) Startup done in: 5875 ms

Nice.

I point a web browser at: http://localhost:5080/ and see that the red5 server is indeed running. I launch the ball demo and push the connect button. Then I make a new browser window and launch the demo again. When I move the red5 logo in one window, it moves in the other. That means it’s all working.

Eclipse also helpfully added an entry to my run button (the green circle with the play button) in my toolbar so I don’t have to find the StandAlone.java file again.

I want a quick launch button for debugging too, so I kill the server (click the red square on the console panel) and right click the StandAlone.java and select “Debug as java application”. The server starts in debug mode, and eclipse adds it to my debug button on the toolbar. (the green beetle button)

Making something

Now, I want to make something. But first, I want to get rid of the samples. So I kill the server, close the eclipse project, and edit the .classpath file again. I know there’s a way to do this through eclipse, but I find editing the file quicker.

I get rid of these entries:
<classpathentry excluding=”.svn/*” kind=”src” path=”webapps/echo/WEB-INF/src”/>
<classpathentry excluding=”.svn/*” kind=”src” path=”webapps/tutorial/WEB-INF/src”/>
<classpathentry excluding=”.svn/*” kind=”src” path=”webapps/fitcDemo/WEB-INF/src”/>
<classpathentry excluding=”.svn/*” kind=”src” path=”webapps/oflaDemo/WEB-INF/src”/>
<classpathentry excluding=”.svn/*” kind=”src” path=”conf”/>
<classpathentry excluding=”.svn/*” kind=”src” path=”webapps/test/WEB-INF/src”/>
<classpathentry excluding=”.svn/*” kind=”src” path=”webapps/midiDemo/WEB-INF/src”/>
<classpathentry excluding=”.svn/*” kind=”src” path=”webapps/agile/WEB-INF/src”/>

And I add one for my project, I’m going to work on something for AgileAgenda, so I’ll call it agile.

<classpathentry excluding=”.svn/*” kind=”src” path=”webapps/agile/WEB-INF/src”/>

Then I go rename the “echo” example to “agile”, and delete all the other samples (I deleted admin too, not sure if that was a good idea or not)

Open up the project in Eclipse again.

And I don’t see my agile webapp. WTF? Oh yeah… Eclipse is retarded. Right Click->Refresh and it shows up.

I want to rename the Application class in my webapps folder (see the picture).

Luckily, Eclipse rocks Java more than it rocks Flex, so I can just right click, select refactor, and pick move. Then I click “Create Package” enter in com.agileagenda.services and click ok a bunch of times.

I delete the rest of the webapp echo source tree.

A project->Clean and…

I think I broke something. Oh well.

Project->Properties->Builders and remove the invalid entry.

Project->Clean and build successful.

I hit the debug button, and search the console output. No errors reported and:

[INFO] 2007-09-23 15:44:45,375 main:( /agile.invoke0 ) Initializing Spring root WebApplicationContext

So I guess it found my new app. Yay!

Kill the server.

So I go back to my Application class and make a new method.

public function login(username:String, password:String) : Boolean
{
return true;
}

Then I remember that this is Java and not Actionscript so I rewrite it…

public boolean login(String username, String password)
{
return true;
}

I go to my project menu and turn on “Build Automatically” and get…

Severity and Description Path Resource Location Creation Time Id
Unbound classpath container: ‘org.jayasoft.ivyde.eclipse.cpcontainer.IVYDE_CONTAINER/ivy.xml/test,’ in project red5_server red5_server Build path 1190576857156 182811

WTF?

Close the project, open my .classpath file, remove the offending line:
<classpathentry kind=”con” path=”org.jayasoft.ivyde.eclipse.cpcontainer.IVYDE_CONTAINER/ivy.xml/test,”/>

Open the project, Project->Clean, build success.

I have no idea why that didn’t bite me earlier.

I press the debug button. The red5 server launches.
[INFO] 2007-09-23 15:51:26,062 main:( org.red5.server.Standalone.main ) Startup done in: 4937 ms

Yay.

Writing some actionscript

Now that I have a (dumb) login method, I want to try it out in Flex.

I have a “Sandbox” AIR application set up in Eclipse that I use when I want to quickly play with something. I highly suggest everyone do that. So I open my sandbox, open the MXML and create a quick login form.

<mx:Label x="26" y="43" text="Username:"/>
<mx:TextInput x="101" y="41" id="txtUsername"/>
<mx:TextInput x=”101″ y=”71″ id=”txtPassword” displayAsPassword=”true”/>
<mx:Label x=”26″ y=”73″ text=”Password”/>
<mx:Button x=”196″ y=”101″ label=”Login” click=”onLoginClick()”/>
<mx:Label x=”58″ y=”148″ text=”Label” id=”lblResult” width=”281″/>

And then add in some code (remembering that this is Actionscript!)…

private var netConn:NetConnection;

protected function onLoginClick() : void
{
NetConnection.defaultObjectEncoding = flash.net.ObjectEncoding.AMF0;
SharedObject.defaultObjectEncoding = flash.net.ObjectEncoding.AMF0;

netConn = new NetConnection();
netConn.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus );
netConn.addEventListener( SecurityErrorEvent.SECURITY_ERROR, errorHandler );
netConn.addEventListener( AsyncErrorEvent.ASYNC_ERROR, errorHandler );
netConn.addEventListener( IOErrorEvent.IO_ERROR, errorHandler );

netConn.connect(“rtmp://localhost/agile”);

}

protected function sendLogin() : void
{
var responder:Responder = new Responder( onLoginResult );
netConn.call(“login”,responder,txtUsername.text, txtPassword.text);
}

protected function onLoginResult( result:Boolean ) : void
{
lblResult.text = result ? “Login Success!” : “Login Fail!?!”;
}

protected function onNetStatus(event:NetStatusEvent) : void
{
switch( event.info.code )
{
case “NetConnection.Connect.Success”:
lblResult.text = “Connected, sending login”;
sendLogin();
break;

default:
lblResult.text = “ERROR!! ” + event.toString();
break;
}

}

protected function errorHandler(event:Event) : void
{
lblResult.text = “ERROR! ” + event.toString();
}

I start the server, run my sandbox app, click the login button, and get a connection error. Something went wrong somewhere.

I bet it’s a configuration problem. I open webapps/agile/WEB-INF and notice 3 config files.

in web.xml I make this change:

<context-param>
<param-name>webAppRootKey</param-name>
<param-value>/agile</param-value>
</context-param>

In red5-web.xml I make this change:

<bean id=”web.handler”
class=”com.agileagenda.services.Application”
singleton=”true” />

In red5-web.properties, I make this change:

webapp.contextPath=/agile

Kill the server, restart it (debug mode), try my app again. “Login Sucess” YES!

Now I head into the java class and put a breakpoint on the “return true;” line. I hit the button on my AIR app and Eclipse correctly breaks on the line. Yay!

I inspect the username and password parameters, and the values I had filled into the AIR app are present. Yay!

I’m now to the point where I can start actually writing my application.

http://labs.adobe.com/technologies/flex/sdk/flex2sdk.html
http://labs.adobe.com/technologies/flex/sdk/flex3sdk.html

Nice.

(Blogging so I can find them later)

There’s now a download page with a slightly updated version. Any future releases will be there.

http://www.rogue-development.com/xrayviewer.xml

1) Open up the Flash IDE and explore it
2) Add an instance of it to my project, and then use XRay to explore it.

Now, I have a third option. I can open it up in the XRayViewer AIR application I just put together and then use XRay to look through it.

XRayViewer.air

All this little app does is host the XRay connector and let you load a local swf (File->Open). Then it displays the swf with some simple controls to play/stop/advance/back.

But the real power is you can go off to the XRay interface and look through that loaded swf!

My home WinXP 2.1ghz DuoCore2 based machine takes 2 seconds. A 9x improvement.

But the shocker… my work WinXP laptop with a 1.7ghz Pentium M, a MUCH slower machine, takes about 4 seconds.

Why is the Mac so much slower on compute intensive actionscript?

I’ve heard of it being slower on graphical animation type things, but not something like this.

The big news for me is it uses my LogViewer component for the log output panel! I hope everyone enjoys it.

Get it: http://osflash.org/xray

John’s announcement:

New LogViewer component replaces Xray’s output – Thanks to Marc Hughes for creating such a killer component and being cool enough to integrate it with Xray!

includes:

*Debug level filtering
*Text filtering / package filtering
*Highlighting
*Search

Latest Xray interface online:
http://www.rockonflash.com/xray/flex/Xray.html

Download the SWF to run locally:
http://www.rockonflash.com/xray/flex/Xray.zip

LogViewer component:
http://rogue-development.com/logViewer.xml

AS3 News for Xray:
Currently, I have a solid beta of the component working. It looks through all display lists and the property inspector seems to be working properly. Some of the other features with highlighting nodes on stage, grid drawing, filters and sound are not working with AS3 yet. I expect that those will all change in a big way so, I’ve just been getting base functionality running. Also, I’m still at a bit of a learning curve with AS3. Debugging visual aspects like we did in AS2 is definitely different, and thats why it’s taking a while to get something out.

The good news is, I’ve written it to work:

1. as a component for CS3 (like the as2 version)
2. with the new constructor: var xray:Xray = new Xray();
3. with flex2 via new constructor

If there’s enough interest in it, I’ll post the beta with docs and let people hammer on it. Need is usually what drives us, so might as well stir up some need