Making Flex Profiler Work

Trying to improve my Actionscript debugging skills I decided to finally investigate what Adobe Flex 3 Professional Profiler is all about. David Gassner's Flex 3 Bible was not much help unfortunately. It just references it and limits itself to telling you what buttons to click in the UI to start it but doesn't give a detailed explanation on it.

Obviously, it didn't work for me. Opened up a project in Flex, clicked Run/Profile and nothing happened. At first I thought it was because it was an pure Actionscript Project but then after researching a bit I found out that I was not alone, it is a fairly common problem with FB3 Pro.

This post from arielsommeria.com helped me the most but I still couldn't make it work. Trying out different things, I finally made it work when I entered the ProfilerAgent.swf path like so in the mm.cfg:

[Windows Vista]
PreloadSwf=file:///C:/Users/[profile name]/[Flex Workspace]/.metadata/.plugins/com.adobe.flash.profiler/ProfilerAgent.swf?host=localhost&port=9999

This is, the file system path not the paths that appeared on every post online.

I hope it helps somebody and also check out the following video explanation of Flex Profiler from Adobe TV

Twitter Flawed Profile Status Options

I really hate OAuth, the secure authorization open protocol which allows applications to get access to Twitter profiles without requesting the user to enter a username and password. I've worked with Google AuthSub for a Dopplr feed integration before and it was much simpler to work with...

I believe that there is a profile status option missing in Twitter.I think they should have a profile status that is private, meaning that you authorize people to follow you and chose whether to follow them back and still have the twitter timeline public for all to see, subscribe to through RSS or consume as XML.

The way it is now is that you are either completely public or completely private but the reason many users (like myself) are protecting their accounts is due to fake followers that have nothing to do with you or your interests and are simply pushing Twitts to your account. I want to decide who follows me and who to follow and at the same time have my timeline public. Another downside to the private status is that you won't appear on searches, so people cannot find you by things you write and tag.

Oh! and Twitter also closed their crossdomain policy file so no direct flash consumption of any syndication or service they offer.

Tiny URLS and Search Engines

I was wondering today while posting to Twitter if tiny url references would be counted towards Google, Yahoo and other search engines rankings... It turns out that it doesn't.

From Tiny.cc:

We block search engine robots and spiders from following
our redirect URLs. Using Tiny.cc in an effort to boost
search engine rankings is useless.

It makes sense from the anti-spam point of view but it is also killing legitimate references... I guess it pays to have a short domain name and link urls as it relates to Twitter specially.

Flash Builder 4 - Auto Getter/Setter function generator

Here's another GUI improvement that I liked. Flash Builder 4 can generate getter/setter function automatically for you when you select a variable nad either right click on it:



Or select Source from the menu bar and then Generate Getter/Setter...:


It brings up this window:


It's nice, it'll save just a little bit of typing time for me.

Searchable & Indexable SWFs - In Depth

This is the most insightful recourse on Flash searchability I've found so far. It's a session on Flash and search engines in MAX 2008.



It is a monumental task what Adobe and Google have undertaken. Google programmed an automated virtual user that sorts the interactivities of any given SWF to present all the different states in that swf. Adobe has created a customized flash player called Ichabod that is tailor made for the virtual user to access and control. Apparently Ichabod runs much faster than the normal player so that the process is as efficient as possible.

Even dynamically genererated textfields populated with content loaded at runtime like XML, txt, etc is now being indexed apparently.

This is an unbelievable undertaking, but one that was absolutely necessary to ensure the viability of the flash platform into the future and the continued supremacy of Google as the Nr1 search Engine.

Brilliant!

More Flash Builder 4 niceties

I am posting these as I go along surprising myselft with new UI features that make my life easier.

Here is a couple more:

To the left of the code row numbers a green arrow appears that signals that the current method is being overridden and also, when you place the cursor over a method or variable, all instances and declarations of it get highlighted in the code in gray. I've already found these features very good in helping me keep track of my code very quick and intuitively.

Good stuff Adobe!

Flash Player to harness hardware acceletarion

Soon, Flash Player is going to start making use of GPUs power for video and graphics acceleration. This is a feature that the Flash 3D community is clamoring for quite some time now. Nobody is saying how soon though, maybe on the next version of the player? I hope so.

This expands the currently available hardware acceleration in the FP which I believe is geared for scaling, particularly in fullscreen mode.



Here is an nVidia press release that announces the collaboration. This makes me think though, what happens if I have an ATI Video Board? Are we going to start recognizing hardware now as we routinelly do with browsers?

Here's an answer to this question with the currently available FP hardware acceleration from Adobe so that we can get a hold of the complexity that this could bring to the table:

Will hardware-accelerated scaling work on all computers?

For hardware-accelerated scaling to work, you need Microsoft® DirectX 9 with VRAM 128 MB for Windows and OpenGL for Apple® Macintosh®, OS X v10.2 or higher. There might be compatibility issues with older hardware and drivers. (See Flash Player system requirements.) With older versions of Flash Player, you should not see dramatic changes as the player reverts from hardware-accelerated scaling back to software scaling.

Flash Builder 4 Beta - First Impressions

I've installed the beta and here are the first things that stood out for me which look very promising:

• Imported Flex Builder 3 with no problems, it let me know that the project being imported was created under an older version of the Flex Framework and offered the option to select which one I wanted to utilize for it in Flash Builder.
• It also listed the Path Variables that needed to be setup.
  
  
  
• UI Glitches are gone. Many (including me) have complained of disappearing UI elements in Flex Builder 3, in my case I always have problems under Project/Preferences screen.
  
• I was pleased to see that under the project source folder (src by default) there is now a Package node, which is clearer instead of showing (or not showing in the case of default packages) subfolders.
  
  
  
  
• There is also a new node on the Package Explorer for Referenced Libraries which holds all imported SWCs.
  
  
  More to come as I continue to use it!
  
  

Adobe Flash Builder 4 Beta now available (Formerly Flex Builder)

Adobe announced the release of Flash Builder 4 which was previously known as Flex Builder 3. As they say in their posting in Adobe Labs, the shift in name has to do with the differentiation between the open source free Flex Framework and the commercially available developing product suite. Also, dropping in the F brand into the name of this awesome product is definitely going to attract more flash developers who might have been reluctant to pick it up until now.

A video of the new features can be found here.

The 30 free beta is available here.

I am downloading it now, so I haven't tested it yet but I am excited with the improvement of the workflow as it has to do with working with flash graphic assets, which anyone doing pure Actionscript Projects will attest to, it desperately needed simplification.

My Latest iStockPhoto addition

The goblins at iStockphoto.com just approved my newest addition.

Check it out, it's a dusk photo of the Miami Skyline taken from the Rickenbacker causeway coming from Key Biscayne.




The truck lights where a little bit of a lucky shot. I had the tripod setup and my Nikon D200 setup on a 2 second release timer. So I heard something big coming behind me, closed my eyes and released the shutter. The camera started counting and it released just at the perfect time. Couldn't have done it if tried timing it manually.

Thank you Goblins!

Papervision 3D + physics engine.

I've done several updates to the model which I haven't posted about. They are:

- Got rid of ShadowCaster.
- Added click behavior.

The reason I had to eliminate ShadowCaster was because it was downgrading performance too much when the stage was big. Because I am working with full screen stage it was a big issue.

Thanks to Andy Zupko who recommended a better alternative for shadows for what I was trying to do, and even provided the logic for calculating positioning based on light and sphere position. The new version has a plane with blurred circle baked texture material per sphere. Positioned at the bottom of the sphere and with the following logic from Andy to calculate position:

var vector: Number3D = new Number3D(m.x - light.x, m.y-light.y, m.z - light.z);
var spherePos:Number3D = new Number3D(m.x, m.y, m.z);
vector.normalize();
vector.multiplyEq(m.radius);
vector = Number3D.add(vector, spherePos);
this.position = vector;

m being each marble (sphere), and light, well... the light :s.

This runs on every frame as well because as the position of the sphere relative to the light position changes, so does the shadow obviously.

You'll also notice that I added onClick event handler as well finally. More on that on my next posting.

Oops! spheres too big? Visit the bigger site here.

Cheers!

Papervision 3D, ShadowCaster tweaks and ColorMatrixFilter Animation

In this version I "modified" (hacked would be a better word) Andy Zupko's ShadowCaster class because of the problems I was having using it (see my previous post):

Fixed (or hacked really) my problem with the non perFaceCasting, that is using the ShadowCaster.castBoundingSphere() method. My problem was that the shadow was being affected by the rotation of the sphere (see my previous post), so I changed the following in the ShadowCaster class:

FROM
var dx:Number = r2d.x-c2d.x;
var dy:Number = r2d.y-c2d.y;
var rad:Number = Math.sqrt(dx*dx+dy*dy);

TO
var dx:Number = r2d.x-c2d.x;
var dy:Number = r2d.y-c2d.y;
var rad:Number = b.radius/1.1

Divided by 1.1 to make the shadow a little smaller than the radius. It’s not accurate but it works and hopefully somebody will address this in a more professional/consistent way.

I also added some some behavior to the mouse and collision events. For now just animated color using ColorMatrixFilter.

Bigger, stand-alone version here.

I also debugged the mouse generated forces (Ad nauseam) because I found some problems with it. Thanks Cesar Cintron for the feedback. A brief explanation is that I was canceling events from being dispatched by the mouse on the wrong side of the sphere. This happened when the mouse movement was very fast and so the event was dispatched late when the mouse had already passed the center of rotation and thus fired on the wrong side of the ball, making it shoot very fast in the opposite direction from that of the mouse movement.

Casting Shadows in Papervision3D - ShadowCaster class

I've added shadows to my model today. Thanks to the amazing work of Andrew Zupko who did (and re-did) the classes for shadow casting in Papervision3D, I was able to integrate them very easily. I think this stand-alone class should make it into the trunk eventually.

I bumped into a problem though, when I setup the castPerFace parameter in the castModel method to true, it works perfectly. You can even see the shadow of the sides of the sphere which, in order to keep polygon count down, is not entirely smooth. You can see this "good" version below.

BUT, I don't really need per face casting, it adds some some processing to the already cpu intensive model and the non-per face casting method is perfect because it projects a bounding sphere of the model as a shadow. So given that my models are spheres, I could use the performance benefit of using the simpler shadow casting.

Here's the thing, shadows do weird things when setup without the per face casting. It's like the shadow is bouncing underneath the ball. Must surelly have something to do with the fact that it is turning but couldn't figure out the mathematics in the ShadowCaster class to be able to fix it, or at least play with it. What makes me think the it could be the ShadowCaster class and not the way I've implemented it (didn't include the clone hack for example) is because it works as expected with the per face casting.

I am going to leave it like that for now until I (or someone) finds a fix to this issue. This bad version can be found here.

Papervision 3D + APE Physics Engine, Mouse Forces tweaks.

After some diaper changes, a few baby bottles and a couple of trips to the day care, I was able to implement some needed logic to the spheres model. Here's what I added/changed this time around:

- Calculated the mouse speed and added it into the calculations of the "onOver" force. In this version, the force generated at the collision between mouse and sphere, is proportional to the instantaneous mouse speed at that moment (an the mass of the sphere as well, but this is taken care of by physics engine (APE).

- Played around with various parameters so that the overall movement ends up like I wanted it to.

APEngine.init(1/3);
APEngine.damping=0.98;
CircleParticle.mass = 3
CircleParticle.elasticity=0.4 (this one might be too high)
CircleParticle.friction=0.1
CircleParticle.multisample = 4 (might have to reduce this for performance)

The multisample value is the amount of times the engine checks for collision in each step of the engine.

- Added calculations to reduce the magnitude of the resulting mouse collision velocity vector if the sphere is already moving in the same direction as the mouse. If not, every mouse collision would generate a force as if the sphere was static which results in a bigger force.

Here is the result, view it full screen here for a better experience:

Thanks Axel Bunge, Sebastián Pisa, Esteban Rodriguez, Cesar Cintron & Facundo Gamallo for the feedback.

Papervision3D + APE Physics Engine - Fourth Iteration

Completed the next step.

- I added two more balls to see how they would work with each other in terms of the physics and everything worked like a charm. Their initial positions are random in the 2d space.

- I changed the material of the sphere at this point because the wire material was degrading performance of the mouseover event handler. The event fired over every line of the geometry and was really annoying.

- Added a white light so the volume of the sphere would be seen better.

- Changed the mouse interactivity to happen on mousemove over the sphere as well as on mouseover. The mousemove handler created much smaller forcers that the mouseover one. I like it this way because you can 'kick' the ball initially (on over) and then by following it and on over it can be handled much easier, including slowing it down.

Here it is.

- After some usability feedback it is clear that I have to consider the mouse velocity so that the forces are greater or smaller depending on it. This is the next step.

Papervision 3D + Physics Rotation Easing

This turned out to be easier that I expected. The AbstractParticle class which CircleParticle inherits from, implements a velocity property in the form of a vector. SO the only thing left was using the X & Y components of the vector as inputs on the Matrix3D.rotationX & Matrix3D.rotationY transformation Matrixes.

A by-product of tying translation to rotation, which, thinking about it it's just the way it is in the real world, is that bounces automatically change rotation direction as the sphere changes translation directions. It also ensures the perfect synch between rotation speed and rotation speed, so once the correct matching ratio between the two velocities is found, it works perfectly.

Here it it the result:

Papervision 3D 2 plus APE physics engine integration.

So I've completed the initial Papervision3D + APE integration. I added forces on mouseOver to the sphere so that at the same time that the handler rotates it, it moves it as well. Also, I've set the boundaries of the stage so that the sphere or marble doesn't get off-stage. There is a slight mis-alignment between the Camera 3D perspective and the APE 2D engine because, being 2D the projections of the viewpoint are different, but I can live with that.

To sum it all up this is a Papervision3D Sphere primitive, a static camera, a 2D CircleParticle for the physics engine dummy and the four RecatangleParticles for the 'walls'.

I'm still playing with damping ratios, animation speed and the synchronization of the Papervision 3D spherical rotation and the 2D physics translation & bounces. Also the interactivity is still a little slow but once there are multiple marbles interacting with each other, it going to feel faster. I don't think I'll have more than 6 spheres if it isn't too hard on the CPU.

Next I'll be working on the easing of the rotation so that it synchs with the damping of the translations. I have an idea of how to do this but as it often turns out, it never is as easy as I had originally thought.

I'm also going to try to recreate the way bounces off constraints invert the rotation vector on the sphere.

Papervision 3D Sphere Globlal Axis Rotation

Problem:
In my previous post (link here) I realized the the quick and dirty way of turning a sphere was not cutting it for me because the sphere was always turning along the Sphere's own coordinate axis (x & y in this case). So, no matter how the sphere was oriented, meaning what the angle of the X axis was for example, if the user moused over the (absolute) lower half of the sphere it turned it (relatively) along it's own X axis.

Solved!
In this second iteration I converted the rotation on mouseOver so that the sphere rotates around the axis defined by the perpendicular of the vector created by the point on the surface of the sphere over which the user rolled the mouse over and the origin of the sphere coordinates (0,0,0).

How is this done?
Regular trigonometry doesn't cut it for this. Why? because both rotating axis are dependent on each other. As the sphere rotates along one axis by a given the angle, it affects the other... or something like that. A new axis of rotation needs to be resolved for every step of the 3d animation. For an in-depth explanation go to this website that deals with 3D axis rotations, spherical trigonometry and other nasty looking mathematical models. Specifically scroll down to the "Axis Angle rotation" and the link for "axis-angle to matrix conversion".

Luckily the Papervision Gods gave us full fledge transformation matrixes to resolve this in a relatively simple way. Particularly the rotationX & Y static methods of the Matrix3D class saves us a LOT of work. The calculations of the new revolving 3d axis looks something like this:

//get original sphere transform matrix
var tempMatrix:Matrix3D = sphere.transform;
//create the rotation Matrixes for each local rotation axis given the corresponding X & Y
//distances where the user rolled over on the surface of the sphere
//Note: The value passed to Matrix3D.rotationX() should really be radians but I'm just using the x & y values divided by rotSpeedRatio which is a constant to bring the values down to "radiany" magnitudes and thus decrease the speed of the rotation. this will have to be the variable to work with when I implement the slowing down of the rotation.
var rotX:Matrix3D = Matrix3D.rotationX(-[mouse Y here]/[rotSpeedRatio]);
var rotY:Matrix3D = Matrix3D.rotationY(-[mouse X here]/[rotSpeedRatio]);
//Mix both Matrixes together
var rotResult:Matrix3D = Matrix3D.multiply(rotX,rotY);
//Apply (Multiply) the final transform matrix to the original one and assign it to the sphere transform
sphere.transform = Matrix3D.multiply(rotResult,tempMatrix);

That's it.

What I've done also in the example is get the mouse X & Y on MouseMove over the sphere so that the rotation gets refreshed then and because we are using this values for the rotation matixes, it slows down as you move the mouse towards the center of of the sphere (Ie: x and/or y approximates to zero)

This was fun but I really should take a math class soon.

Sphere Rotation

The first thing I did after getting all the Papervision and general project setup is creating a Sphere and make it rotate based on users input (Mouse RollOver) over the same Sphere surface.

Using InteractiveScene3DEvent.renderHitData object we can tell the X and Y values of where the mouse hit on the surface of the sphere. These values are then used to affect the rotationX and rotationY properties of the Sphere.

In the MouseOver and/or MouseMove handler:

var locX:Number = e.renderHitData.x-x;
var locY:Number = e.renderHitData.y-y;

sphere.rotationX -= locY/10;
sphere.rotationY += locX/10;

Divided by 10 just because the values are too big otherwise.

You'll recognize a problem with this way of doing this though. Rotations are done around the sphere's local axis X & Y. and what I really need is a rotation over a global axis based on a vertex defined by the user interaction with the surface of the sphere. This is what I'll work on next.

Idea and Workflow

The initial idea is to have a website that could help me get more business, so it has to have in itself some of the ingredients of what I like working on the most and that hopefully are in demand.

Workflow
I am going to build it in Actionscript 3 using Adobe Flex Builder 3 in a pure Actionscript Project. It's so much better that the Flash IDE for coding that I dread going back to it. Graphical assets will remain in Flash IDE though, with exported SWCs as needed and imported into the FLEX Library path. This workflow has given me some headaches in the past but I think I have it under control now.

I am going to use some open source Actionscript libraries to help me materialize the crazy ideas I am having. I might be getting myself into a quagmire but what I plan to do is have the entire menu/navigation system done in Papervision3D 2 with a little dose of physics thanks to either Fisix or APE.

Some Adobe After Effects will throw in there for good measure to create 2D animations that I am thinking of using as some eyecandy.

Next will be may fist 'real' posting as I jump into the project itself.

Website Project

After more that 10 years of interactive development I've decided to finally create my own website... this is pathetic I know but I don't care. The reason for this really is that I never needed it. So now, with some time in my hands I am committed to building it. It's not going to be a pretentious website but it will have a few things that I think will be very much fun creating. In doing so, I've decided to also document everything in this blog. Just for me to have and for friends to track my progress hopefully.

So, stay tuned. Next, my first post.