Pulse Particle Explorer introduction

The other day I posted a video showing how to use the Pulse Particle system in Flash. Now, here's an introduction on how to use some of the particle explorer functions to define particle behavior.

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.

Pulse Particle System + Flash IDE

I did a bit of work to see what I could do to get a workflow with the Flash authoring environment and the Pulse particle system working. I got it to a point where I can download, install, and show a quick example of how to use it in a 4 minute video. Not too bad.

The Video (Adobe Share Download)

The video (Alternate Download)

Some more links:

The project page

The download page

The Particle Explorer

The particle system itself is still a bit rough, there's a bit of choppiness here and there that I need to work out, and there's a bunch more options (like acceleration) I'd like to tackle. That, and a bit more on the documentation side would be nice.

Update, Here's a nice demo from the comments below. It has an animated movieclip as a particle and looks pretty cool.

Pulse Particle system interactive explorer

I just whipped up a quick flex app to explore some of the features of the Pulse Particle system I've been working on lately.


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.

Real time log viewing with flash and red5

Disclaimer: The idea for this isn't mine. Another guy did a great version of it over at http://www.fudgie.org/ The only improvement mine has is that it's in flash so it's web-accessible by multiple people at once. His looks cooler, has more data, and probably performs better.

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.

My first Red5 experience

I've worked with both Chris Allen and John Grden on some projects for my employer. During that time, I can't count the number of times I heard about Red5, but I never got a chance to try it out.

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.

Flex SDK nightly builds

Just read about Flex having nightly builds available of the SDK at these url's

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)

XRayViewer download page

Yesterday, I wrote about the XRayViewer AIR application.

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

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

XRay Viewer

A lot of the time a designer gives me a swf, and I want to know how they structured it. I have two options.

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!

Designer + Developer

Relatively speaking, I'm pretty new to the Flash world. I never slugged through the AS1 days like many of the seasoned warriors out there. I've only worked on a few large Flash projects, and I've generally always worked in the same way.

I had a designer (or designers) who knew flash and were able to create .swfs for me to use. Then I wrote my code (in Eclipse+MTASC) that would load and manipulate those assets they provided. I'd use XRay to figure out how things were structured or named. Occasionally I'd have to remind them to add instance names, or not to name multiple things the same thing, but very rarely would I ever fire up the Flash IDE. Sometimes we'd have a pre-design meeting to talk about things like structure or file naming or whatever, but it was always pretty generic stuff

Lately, I've had two different encounters with other developers who work in a completely different fashion. They take the .fla from the designer, completely rip it apart, and then put it back together in a way that makes sense to them.

Now, I know some designers just aren't capable of making a logical structure for their assets, but some can. In fact, those two encounters I mentioned the designer was the same guy I usually work with and I know he did the same sorts of things I expect from him.

The problem with ripping it apart and putting it back together is now, the next time the designer changes something you need to somehow propagate those changes from the designer's work to your own work. I couldn't imagine I'd ever want to take on the role of managing versions of assets within a file during development, even if that meant the assets weren't made how I would have done them.

So it confuses me when a developer will just automatically start in that style of development no matter what the asset structure looks like. Even if stuff wasn't delivered in a logical manner, I'd want to work with the designer instead of just ripping it apart myself.

Maybe I just haven't been bitten by poor designers like others. Maybe my software engineering background makes me fundamentally think different from the flash developers who come more from a design background. How do you guys prefer to work. Is that different from how you actually end up working?

Oh well.. I guess that's my little rant for the week.

OSX Flex app is slow...

So I tried my scheduling software on my mac today. It took about 18 seconds to calculate my schedule on my duo-core 2ghz MacBook Pro.

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.

XRay Updated!

John Grden has just released a new version of XRay, the gosh darn bestest Flash debugging tool out there.

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 :)