Here is the catch. The form is processed by an intermediary page that then forwards you to a confirmation page. This means that the form data is not available on the final page where the tracking code needs to access it.

The solution that chosen was to grab the values from the form during the validation process in JavaScript and append them to the URL of the redirect page that the intermediary page forwards you to.

This was fine, but each implementation wanted different variables and form values to be available for tracking. So I was constantly customizing the JavaScript to get the right form data and the request variables in JSP to retrieve the passed variables. This became tiresome really quickly after about the 4th implementation.

So, I created little system to streamline the process. Here is what I came up with (some sensitive data removed, but idea still there).

The JavaScript Class:

function TrackingPixel() {
/*Create a reference to the form that contains the data. This could be made more flexible, but for my purposes the form always has the same name. */
this.form = document.emailForm;
/*Iteration variable used to determine if an & needs to be appended between variables*/
this.i = 0
/*String to hold the URL variables that we are going to create*/
this.qs = “”;
}

/*Instance variable that holds a reference to a configuration object that specifies the URL variables to create and the form element to use for the value.*/
TrackingPixel.prototype.variableMap;

/*Certain form values are special cases such as birthdates which required the use of multiple form elements to create the final value. This object specified those cases, the processing method and the values required by the method. */
TrackingPixel.prototype.specialCases;

/*This function loops through the configuration objects defined above and handles any special cases to create the final query string. */
TrackingPixel.prototype.createVariables = function() {
/*Loop through the standard cases*/
for (v in this.variableMap) {
/*Find the form element that matches the key in the config object*/
var elem = this.form[this.variableMap[v]];
/*If the form element is a compound type, find the selected value. Right now I only needed to deal with radio buttons*/
if (elem.type == “radio”) {
this.buildString(v, this.getArrayValue(elem))
} else {
this.buildString(v, elem.value)
}
}
/*Loop through the special cases and return the value from the specified processing function*/
for (s in this.specialCases) {
this.buildString(s, this[this.specialCases[s].method]
(this.specialCases[s].elems))
}
/*If we found variables append the query string to the URL of the forwarding page*/
if (this.qs.length > 0) {
/*See if there are already variables on the URL of the forwarding page, other wise append the ?*/
if (this.form.targetPage.value.indexOf(”?”) > -1) {
this.form.targetPage.value += “&”
} else {
this.form.targetPage.value += “?”
}
this.form.targetPage.value += this.qs;
}
}
/*This is one of the special cases methods. Create a date string using the specified form values*/
TrackingPixel.prototype.birthDate = function(bDayElems) {
return this.form[bDayElems[0]].value + “/” + this.form[bDayElems[1]].value
+ “/” + this.form[bDayElems[2]].value
}
/*Create URL value using the passed key and value and append it to the query string*/
TrackingPixel.prototype.buildString = function(key, val) {
if (this.i > 0) {
this.qs += “&”;
}
this.qs += key + “=” + val;
this.i++;
}
/*Find the selected value of a complex form object such as a radio button*/
TrackingPixel.prototype.getArrayValue = function(arr) {
for (a = 0; a < arr.length; a++) {
if (arr[a].checked == true) {
return arr[a].value
}
}
}

Once I had this class set up, all I have to do in the page with the form is the following:

<script src=”/js/TrackingPixel.js” type=”text/javascript”></script>

//In form validation code:
function validateForm(){
…other validation code
var tp = new TrackingPixel ();
/*Create the standard configuration object specifying the variables to create and the form field that supply the values*/
tp.variableMap = {e:”emailAddress”, src:”contest”,f:”favoritecolor”}
/*Define any special cases, the method used to handle them, and specify the form values needed by that method*/
tp.specialCases={d:{method:”birthDate”, elems:['birthMo',"birthDay","birthYr"]}}
/*Call this function to create and append the variable string*/
tp.createVariables();
}

The final piece of this system was to automate the output of the actual tracking image. In the first few implementations I would manually update the URL variables I wanted, which would look something like:

<div id=”trackingPixel”><img src=”https://trackingurl.com?e=<%=request.getParameter(”e”)%>& src=<%=request.getParameter(”src”)%>& f=<%=request.getParameter(”f”)%>’ width=”1″ height=”1″/> </div>

Where I was basically going in each time an updating the var=<%=request.getParameter(”key”)%> and adding & in between.

Since the var name always matched the key, I came up with this:

<%@ taglib prefix=”c” uri=”http://java.sun.com/jstl/core” %>
<c:set var=”eKeys”>e,src,b</c:set>
<!–Being pixel tracking–>
<div id=”trackingPixel”>
<img src=’https://trackingurl.com?sie=someSite<c:forTokens var = “k” items= “${eKeys}” delims=”,”><c:if test=”${! empty param[k]}”>&<c:out value= “${k}”/>=<c:out value= “${param[k]}”/></c:if></c:forTokens>&la=Y’ width=”1″ height=”1″/>
</div>
<!–End pixel tracking–>

The only things I have to do to customize this is change the keys in

<c:set var=”eKeys”>e,src,b</c:set>

to match those passed in the URL and the rest is taken care of for me.

Then I just include the JSP file that contains the code final landing page and I am good to go.

I am sure there are improvements that can be made (there always are), but this has taken the implementation time of this system down from about an hour to about 10 minutes.

The basic idea here was to create a function that would create a curved animation path to a specified x and y coordinate.

The basic idea here is:

1. Find the pivot point between the current x and y and the desired x and y.
2. Calculate the current angle from this pivot point for the current x and y of the clip.
3. Calculate the ending angle based on the desired ending coordinates and the pivot point.
4. Using trig, update the x and y of the clip along an arc at a given radius until it reaches the end angle.

After a while of playing with it, came up with this

In AS frame main movie:

import CurvedAnimation;
var ca:CurvedAnimation = new CurvedAnimation(ball);
ca.arcTo(500,500);

Class File (this is by no means complete and has some code left over from various previous attempts, but it shows what I finally came up with):

class CurvedAnimation {
private var _clip:MovieClip;
private var startAngle:Number;
private var currentAngle:Number;
public var speed:Number = 1;
public var arcWidth:Number;
private var endAngle:Number;
private var pivotX:Number;
private var pivotY:Number;
private var updateInterval:Number;
public function CurvedAnimation(clip:MovieClip) {
trace(”new curved animation”);
this._clip = clip;
}
public function arcTo(endX:Number, endY:Number) {
var midWay = Math.sqrt(Math.pow(this._clip._x-endX, 2)+Math.pow(this._clip._y-endY, 2))/2;
this.arcWidth= 100;
_root.endPin._x = endX;
_root.endPin._y = endY;
_root.endPin.lbl_txt.text = “End point”;

if (endX>this._clip._x) {
this.pivotX = Math.floor(this._clip._x+midWay);
} else {
this.pivotX = Math.floor(this._clip._x-midWay);
}
if (endY>this._clip._Y) {
this.pivotY = Math.floor(this._clip._y+midWay);
} else {
this.pivotY = Math.floor(this._clip._y-midWay);
}
this.currentAngle = this.startAngle = Math.atan2(this._clip._y - this.pivotY ,this._clip._x - this.pivotX)*180/Math.PI
this.endAngle = Math.atan2(endY - this.pivotY ,endX- this.pivotX)*180/Math.PI
this.updateInterval = setInterval(this, “updatePosition”, 100);
debug();
}
private function debug() {
_root.midPin._x = this.pivotX;
_root.midPin._y = this.pivotY;
_root.midPin.lbl_txt.text = “mid point”;
trace(”Current position x: “+this._clip._x+” y: “+this._clip._y);
trace(”Pivot point x: “+this.pivotX+” y: “+this.pivotY);
trace(”Start Angle “+this.startAngle);
trace(”Current Angle “+this.currentAngle);
trace(”End Angle “+this.endAngle);
_root.debug.mouseAngle.text =this.currentAngle

}
private function updatePosition(){

//this._clip._y = -0.002644 * Math.pow(((this._clip._x += 5) - 200), 2) + 200;
if (Math.floor(this.currentAngle) <= Math.floor(this.endAngle)){
this._clip._y = this.pivotY + Math.sin(this.currentAngle * (Math.PI/180))*this.arcWidth;
this._clip._x = this.pivotX + Math.cos(this.currentAngle * (Math.PI/180))*this.arcWidth;
this.currentAngle += this.speed;
this.currentAngle %= 360;
}else{
clearInterval(this.updateInterval)
}
debug();

}

}

I myself have never used one of these frameworks, as I simply have never had the need for one. However I have been researching them and after attending this presentation I still feel that my initial inclination towards them stands; they exist mostly for standardization when working in teams.

By this I mean you can accomplish the same thing you can with the framework using standard Flex code and ActionScript, more than likely in a much simpler fashion depending on the project. What they afford you when working in a team is that you know that if everyone is using the same framework, then they are coding in the same fashion, hence the code written by one team member should work with the code by another. And as Yakov pointed out, they allow you to spilt up large projects among a team.

This is a nice benefit, but these benefits often come at a cost. For example one of the major complaints about Cairngorm is that you have to write a lot of classes. One reason for this is that in Cairngorm each event that the application triggers has to have a corresponding Command class. That’s a class for every event (its actually worse than that as there are other classes that these need to communicate with that you need to write as well). For a large application with a lot of events, this quickly becomes a lot of code.

Another implication of this is that you can only have one event responder per event. In other words, you lose the benefit of being able to have multiple responders to a single event that is built into Flex events, which as far as I am concerned was a great improvement over the AS2 model. Cairngorm essentially takes you back to the AS2 model.

Mate has a better event model and it does do a nice job of managing dependencies via dependency injection, but you have to maintain an event map and Mate is an MXML only framework.

And as far as PureMVC goes (look at the flow diagram slide for it in the presentation I linked to) all I can say is ???????. In its defense, PureMVC was designed to be language agnostic, but it seems to suffer from the “trying to be everything to everyone” syndrome.

The slides I linked to do a good job of pointing out the strengths and weaknesses of each framework, so I will refer you to them if you are interested in learning more.

So for now, it seems that these frameworks would get in the way more than they would simplify anything for me.

So recently I had some time and decided to take a crack at creating a tween sequencing class. Basic idea being that I add a sequence of tweens to a object and then just call a start function to trigger the sequence.

My first idea was to create a collection of tween objects and store references to them in an array. This led me to com up with this:

package com.vfd.animation.tweens{
import fl.transitions.TweenEvent;
import fl.transitions.Tween;
public class TweenSequencer {
private var _tweens:Array=new Array ;

private var index:Number=0;
public var loop:Boolean=false;
public function TweenSequencer() {
trace(”New Tween Sequencer”);
}
public function addTween(tween:Tween):void {
tween.stop();
tween.addEventListener(TweenEvent.MOTION_FINISH,nextTween);
this._tweens.push(tween);
}
public function removeTween(tween:Tween):void {
for (var i:Number=0; i < this._tweens.length; i++) {
if (this._tweens[i] == tween) {
this._tweens[i].removeEventListener(TweenEvent.MOTION_FINISH,nextTween);
this._tweens.splice(i,1);
break;
}
}
}
public function start():void {
this.startTween();
}
public function stop():void {
this.pause();
this.reset();
}
public function pause():void {
if (this._tweens[this.index]) {
this._tweens[this.index].stop();
}
}
private function nextTween(event:TweenEvent):void {
trace(”Index before ” + this.index);
trace(”Loop : ” + this.loop);
this.index++;
if (this.loop && this.index >= this._tweens.length) {
this.reset();
}
trace(”Index after ” + this.index);
this.startTween();

}
private function startTween() {
if (this._tweens[this.index]) {
this._tweens[this.index].play();
} else {
this.reset();
}
}
private function reset():void {
this.index=0;
}
}//end class
}//end package

The basic idea worked, but I ran into a couple of problems. I was testing this with a basic ball. I placed the ball in the top right corner of the screen. Every time I ran the thing it would play the tweens in the correct sequence, but the ball always started in the bottom right corner of the screen making the first run through the sequence incorrect. However, after the first run through it played as expected.

This took me a while to figure out, but as it turns out that when I created the tweens, even though I immediately stopped them, it was setting the properties of the ball to the start values of the second set of tweens that were applied to the x and y coordinates.

I tried all sorts of variations including writing my own tween class that overrode the starting behaviors of the standard tween class and I still ended up with the same results (though it is entirely possible that I missed something simple).

I did turn out that if I explicitly set the x and y coordinates of the clip after creating the tweens, it worked as expected. However, I was only testing with many tweens applied to one object. If I was applying tweens to multiple objects I would have to reset all of them and having to explicitly set the coordinates defeated the purposes of placing them on the stage where I wanted them to begin with. Additionally, I ran into this problem with tweens applied to x and y, but if there are other properties that behaved the same way, I would have to reset those as well. This class was intended to make this process sequencing tweens easier, not simply introduce a new set of headaches.

After some time I came up with the idea of using a single tween inside of the sequencer class. Instead of storing multiple tween instances, I would just store sequence of properties and values that I wanted to tween an update the single tween instance. this would keep the tweens property settings from conflicting with one another and throwing the sequence off. This lead to:

package com.vfd.animation.tweens{
import fl.transitions.TweenEvent;
import fl.transitions.Tween;
import flash.display.Sprite;
public class TweenSequencer {
private var _tweens:Array=new Array();
private var tween:Tween;
private var index:Number=0;
public var loop:Boolean=false;
private var placeHolderSprite:Sprite = new Sprite();
public function TweenSequencer() {
trace(”New Tween Sequencer”);
this.tween = new fl.transitions.Tween(this.placeHolderSprite,”alpha”,null,1,1,1,true);
this.tween.stop();
this.tween.addEventListener(TweenEvent.MOTION_FINISH,nextTween);
}
public function addTween(obj:Object, prop:String, easing:Function, begin:Number, end:Number, duration:Number, useSeconds:Boolean = false):void {
this._tweens.push(arguments);
}
public function start():void {
this.startTween();
}
public function stop():void {
this.tween.rewind();
this.reset();
}
public function pause():void {
this.tween.stop();
}
private function nextTween(event:TweenEvent):void {
this.index++;
if (this.loop && this.index >= this._tweens.length) {
this.reset();
}
this.startTween();

}
private function startTween() {
this.tween.stop();
if (this._tweens[this.index]) {
this.tween.obj = this._tweens[this.index][0];
this.tween.prop = this._tweens[this.index][1];
if (this._tweens[this.index][2] is Function) {
this.tween.func = this._tweens[this.index][2];
}
this.tween.begin = this._tweens[this.index][3];
this.tween.finish = this._tweens[this.index][4];
this.tween.duration = this._tweens[this.index][5];
this.tween.useSeconds = this._tweens[this.index][6];
this.tween.start();
} else {
this.reset();
}
}
private function reset():void {
this.index=0;
}
public function reverse() {
this._tweens.reverse();
}
}//end class
}//end package

So now this:

import com.vfd.animation.tweens.TweenSequencer;
var ts:TweenSequencer = new TweenSequencer();
ts.loop = true;
ts.addTween(ball, “alpha”, null, 0,1,2,true);
ts.addTween(ball, “x”, null, 130,300,2,true);
ts.addTween(ball, “y”, null, 130,300,2,true);
ts.addTween(ball, “x”, null, 300,130,2,true);
ts.addTween(ball, “y”, null, 300,130,2,true);
ts.addTween(ball, “alpha”, null, 1,0,2,true);
ts.start();

Produces this:

In order to apply some of these tweaks, you will be editing the INI file for Eclipse. This file is named eclipse.ini and can be found in the root directory of wherever you installed Elcipse (e.g., C:\Program Files\eclipse).

Lets start with those tweaks first and then move on to some of the other settings you can play with once you have Eclipse open.

Once you have located the eclipse.ini, make a back up copy of it in case you need to reference to your original settings. Once you have done that, open elcipse.ini in you text editor of choice.

The default contents of my ini file looked like this:

-showsplash
org.eclipse.platform
–launcher.XXMaxPermSize
256M
-vmargs
-Dosgi.requiredJavaVersion=1.5
-Xms40m
-Xmx256m

We are interested in the stuff after the -vmargs. These are the arguments that Eclipse passes to the Java Virtual Machine. By tweaking these settings, we can do things like manage the amount of memory allocated to Eclipse. To apply the tweaks, we are going to modify some of the existing arguments and add a few new ones. For the ones we add, place them at the end of the file after the -vmargs flag. If you are interested in what the specific arguments mean, go here as I am not going to go into that level of detail.

Here are the recommended settings by amount of RAM.

512 MB RAM:

-Xms256m
-Xmx256m
-XX:PermSize=128m
-XX:MaxPermSize=128m

1 GB RAM

-Xms512m
-Xmx512m
-XX:PermSize=256m
-XX:MaxPermSize=256m

2 GB RAM

-Xms1024m
-Xmx1024m
-XX:PermSize=512m
-XX:MaxPermSize=512m

Save the file.

Now we can move onto some of the things you can do once you have eclipse open.

Those of you who use Eclipse know that it has a good error checking system. However, that robustness comes at the cost of speed. Once of the things that Eclipse does is scans through the workspace to check for errors. If you have a large workspace with a lot of projects this can take quite some time. To keep Eclipse from doing this scan each time you save a file, disable the Build Automatically option (Window>>Preferences>>Workspace). If you need error checking, you can turn it back on right before you are going to do a release.

Once of the other things you can do is close any projects that you are not using. That way Eclipse does not have to keep track of them.

Finally, we can apply the same idea to files. For each file that you have open, Eclipse has to track it an allocate memory. Close files that you are not working on and as a further step you can actually limit the number of files that Eclipse will allow you to have open in the preferences dialog (Window >> Preferences >> General >> Editors)

import mx.transitions.Tween;
class com.vfd.animation.tweens.DelayedTween extends Tween{

private var intervalID:Number
private var delay:Number = 0;

public function DelayedTween(object, property, easingFunction, start, end, duration, useSeconds, delay) {

super(object, property, easingFunction, start, end, duration, useSeconds);
this.delay = Math.abs(delay*1000);
this.setDelay();

}
private function start() {

}

private function setDelay() {
if (this.delay > 0) {
this.intervalID = setInterval(this, “startAnimation”, this.delay);
}else {
this.startAnimation();
}
}

private function startAnimation() {
clearInterval(this.intervalID);
super.start();
}

}

This was more or less a simple copy of the class I had found. I got a chance to look at this again today and realized I could simplify it a bit. I ended up with:

/**
* @author Jeremy Wischusen
* This class allows for a delay before starting the animation.
*/
import mx.transitions.Tween;
import mx.utils.Delegate;
class com.vfd.animation.tweens.DelayedTween extends Tween {
/*
Holds the number of seconds to wait before starting the animation.
*/
private var _delay:Number = 0;
/*
Instance variable holding a reference to the start function of the Tween class.
This is needed due to scoping issues when using setTimeout.
*/
private var superStart:Function;
public function DelayedTween(object, property, easingFunction, start, end, duration, useSeconds, delay) {
this.delay = delay;
/*Use the Delegate class to create a reference back to the tween start funciton
that can be used with setTimeout. */
this.superStart = Delegate.create(super, super.start);
super(object,property,easingFunction,start,end,duration,useSeconds);
}
/*Override the default start function so that the delay can be applied.*/
public function start() {
if (this._delay>0) {
_global.setTimeout(this.superStart,this._delay);
} else {
super.start();
}
}
/*Setter function for delay attribute*/
public function set delay(seconds:Number){
this._delay = Math.abs(seconds*1000);
}
}

As you can see, I reduced the number of functions, used the simpler setTimeOut and rely more on inheritance and overriding than in the previous version. I also decided to make and AS3 version.

package com.vfd.animation.tweens{
import fl.transitions.Tween;
import flash.utils.setTimeout;
/**
* @author Jeremy Wischusen
* This class allows for a delay before starting the animation.
*/
public class DelayedTween extends Tween {
/*
Holds the number of seconds to wait before starting the animation.
*/
private var _delay:Number = 0;
public function DelayedTween(object, property, easingFunction, start, end, duration, useSeconds, delay) {
this.delay = delay ;
super(object,property,easingFunction,start,end,duration,useSeconds);
}
/*Override the default start function so that the delay can be applied.*/
public override function start():void {
if (this._delay>0) {
setTimeout(super.start,this._delay);
} else {
super.start();
}
}
/*Setter function for delay attribute*/
public function set delay(seconds:Number):void {
this._delay = Math.abs(seconds*1000);
}
}
}

I have noticed that occasionally the compiler spits out:
The superconstructor must be called first in the constructor body.

If you place the super constructor before the delay variable is set, the tween just starts immediately since the variable has a default value of 0. This is what caused the need for the additional functions in the first version. While the compiler may occasionally complain (sometimes it shows the message and other times it does not), it still compiles and works.

Will be committing these to the repository on Google code sometime today.