Wwwebber's Blog

Elance vs Odesk – Comparison of Site Features

Posted in Uncategorized by wwwebber on February 5, 2012

I have spent almost $20,000 at Odesk and Elance , and I wanted to share my thoughts on the two sites. Most of my experience has come from the last year, so my reflections should be pretty relevant as of right now: 2012.

I have used both sites for hourly and fixed rate jobs. However, I have definitely used elance more–spending about 17 K there  over the last 12 months  as opposed to about 5K on  O-desk.

There are lots of different ways to look at these two sites, but this post will focus on the features that each site has–how it lets you pay for jobs, find contractors, set up milestones, use escrow services etc..  I’ll dedicate another post, later, to the quality and type of developers that I have encountered on Elance/odesk (Overall I have found some great people on both sites!)

Hourly Jobs:

The Time Tracker:

Overall, these sites have many of the same features –especially for hourly jobs. Both provide an hourly time tracker. Basically, it works like this. I hired someone to translate one of my sites to another language, and every 10 minutes or so the application takes a screenshoot of their computer and uploads to Elance/Odesk. This is great because it lets you see exactly what a freelancer was doing for given periods of time.  Odesk and Elance tied on this count–both had nice applications that did basically the same thing.

Fixed Price Jobs

-On Odesk:

You pay a certain amount of money upfront and then agree upon a deadline to pay the rest. There is no formal way to escrow payments or manage milestones. Nor is there any reminders from Odesk that your final deadline is approaching. This last point might seem like no big deal until you have 3-6 jobs going.

Below is a screen shot of the Odesk view for a fixed price job that has already been partially paid (ie most of the milestones had been paid for). I crossed out some personal information –like the picture of the developer etc

-On  Elance.

Both the client and the freelancer can edit and modify the milestones.  However, both parties (client and contractor) must agree to any changes in the agreement.  The client can escrow all of the money in advance (great for end of the year jobs when you want to withdraw money from your account before the tax year ends).  You can associate specific parts of the job to be done with specific milestones and either one of you can request that these milestones be modified. Also, the freelancer can formally request that you escrow a given milestone before he or she starts working on it.   As a specific example, consider a math homework help site (www.painfreehomework.com) that was made by a a company I found on Elance.  I am going to make up some fictional numbers, but it went something like this. The company said that they could do it $4000 by April 1st. I accepted that bid, then that company set up several milestones that went something like:

  • January 1st: Complete mock up of site  – $1000
  • February 1st: Create database scheme and coding back end  $1000
  • March 1st: Rough draft  of site live ($1000)
  • April 1st: Final deliverable of the site ($1000)

At this time, Elance sent me a mesage that the contractor has adjusted the terms of the agreement and showed me the dates describe above. I then have the choice to accept or refuse these changes in the terms and conditions (I”ve never refused so I can’t comment on that).

After you accept these terms, the freelance contractor gets notified. The contractor then generally ask you to put the first milestone’s worth of money into an escrow account.

Below is a screen shot of the Elance view for a fixed price job that has already been escrowed.

Communicating With Contractors

Both  Elance and Odesk have a private messaging system that sends copies of private messages to your inbox. There is one difference–with Elance you can actually reply to the email itself and your reply will get sent as a private message to the contractor.

In the end, if you are going for an hourly job, I think the site features for Elance/Odesk are equivalent. However, when it comes to fixed price jobs–Elance is the hands down winner! By the way, I am in no way associated/affiliated with either of these sites.

Free Online Mortgage Calculator

Posted in Uncategorized by wwwebber on January 24, 2012

I wanted to write a quick post about a very cool free online mortgage calculator — If, like me, you are not the most knowledge about amortization tables, 30 vs 15 year mortgages, and the like, then this calculator might help out a bit. It not only shows the monthly payments, but also creates charts showing the amortization schedule.

 

Very cool. Check it out.

Comments Off on Free Online Mortgage Calculator

Box2d 2.1 How to use a b2Controller

Posted in actionscript 3, Box2d by wwwebber on July 9, 2010

Box2d 2.1 brought some awesome improvements
1) improved class structure.
2) buyouncy support
3) a set of Controller Classes that are well described by the docs as ” a convience for encapsulating common per-step functionality.” (read about them here)

These improvements were actually worth the fact that none of your prior Box2d code (and I mean none) would compile with the new class structure.

If you used earlier versions of Bo2D, you already used something like these controllers–the Gravity Vector that you passed to the world object at construction.
This was a b2Vec2 (the gravity) that the world applied to all non-static objects. Ie the walls wouldn’t be affected by the gravity vector but all the moving objects would be affected by a constant force downwards (unless your gravity had an unusual orientation)

There are several types of controllers and they all extends b2Controller . The TestBuoyancy class that comes with the TestBed shows an example of how to use the b2BuoyancyController .

All of the controllers have the following methods

AddBody(body:b2Body):void
RemoveBody(body:b2Body):void

I was interested in using a b2ConstantAccelController. There aren’t really any examples out there for this (at least that I could find) so here’s how easy it is to implement a b2ConstantAccelController–which will just apply an additional vector each time step to any bodies added to that controller.

Now, unlike the GravityVector you can arbitrarily add and remove objects from the controller. How could this be useful? Imagine that you have gusts of wind blowing sideways…you can add your objects to a Contoller and have them pushed sideways…then when the wind passes you could remove them from that controller.

How to create a b2ConstantAccelController :

//construct object and its acceleration vector
var myAccelController:b2ConstantAccelController = new b2ConstantAccelController();
const WIND_VEC :b2Vec2 = new b2Vec2(10,0);
//associate controller with vector
myAccelController.A = WIND_VEC

Henceforth, all b2bodies that are stored in myAccelController will have the WIND_VEC applied to them during the b2World.step() function .. you don’t have to do anything else except add and remove bodies to the controller.

//now let’s add something to the Controller
myAccelController.AddBody(someB2Body);

…when you want to remove the body
myAccelController.RemoveBody(someB2Body);

Tagged with: ,

Actionscript 3 Tween Library Skinner’s Gtween vs Greensock’s tweenlite

Posted in actionscript 3 by wwwebber on July 5, 2010

Just wanted to add a little extra feed back for anyone who is currently trying to decide on an Actionscript 3 tween library. There are many other to choose from. I spent some time over the last month playing with both Grant Skinner’s GTween library and GreenSock’s TweenLight library . In a nutshell, you can’t go wrong with either one. Both are awesome and I’m glad someone did almost all that heavy lifting!

However, after using both libraries over the course of the development of my most recent online maths games Rj The Robot on the topic of how to combine like terms.

First off, why both libraries ROCK!
-Awesome levels of customization of tween types (sinusodal, Bounce etc..) the differences here are small. At the time of this post, Greensock has some that the GTween library does not .
– Optimized performace.

How they Differ

Object Model
Greensock— You can use either static based methods to create tweens or use good old OOP to create tween objects.
GTween –it uses an object model, though a static based interface is also available

ie–they are pretty much the same here.

Visualizers
Greensock wins this–it comes with an awesome component that let’s you visualize tweens and will actually output the code needed to create the tween! Go Greensock (see what I mean here)
GTween–Do not think anything like this is provided.

Events
Greensock– TweenLite does not include an event system. However, if events are important to you then you just use GreenSock’s TweenMax (also free).
GTween– has a great event system.

Error reporting
Greensock– Hands down wins in the experiments I ran. If you pass Greensock a null object, it will throw an Error reporting the null reference.
GTween– In my tests, Gtween silently did nothing when I tried to tween a null object.
The winner here is clearly the Greensock library. Addendum: It turns out there is a reason for Gtween accepting null objects –read comments below.  That  said, Greensock allows the same chaining of events but reports null pointers.

In the end, you really can’t go wrong with either library. They both support object oriented syntax, chaining of tweens,and event dispatching and listening (Greensock only does this with the TweenMax..which is also free). Greensock does have a few extra tween types , the awesome visualizer as well as some amazing plugins –all of which led me to go with using Greensock.

If I you know of any other differences that I missed (and I know there must be many), please fire off a quick comment.

Using Actionscript to make Subscripts with Flash’s Text Layout Framework

Posted in actionscript 3 by wwwebber on June 5, 2010

Here’s a quick post on on some new Actionscript functionality that takes advantage of Flash’s new Text Layout FrameWork to create subscript and superscipt in the new types of text fields that you can create–These new things aren’t the TextField() that you are used to but rather are part of this whole new, much more sophisticated framework.. I used Flash CS5, but this should work with CS4 also. Apparently, the Text Layout Framework (which is just a component that you can install with the extension manager) will work with CS4.

This post will show you how to use Actionscript to perform this task. There are already lots of videos up on web showing designers how to use the Flash IDE to do this..so here’s how to code it.

What our code will produce:

I have made several math based flash programs, and it has always been a pain in the butt to deal with exponents and subscripts. It has definitely been a long time coming–the ability to create sub and superscripts in a Flash. Now with the new TextLayout Framework you can do all sorts of things including subscripts!. I needed to learn how to do this for a new maths game I was working on Rj The Robot-Since this was a math game, I needed to be able to write exponents in dynamic text fields…so let’s make some subscripts in Flash!

Just Tell me the Steps

Step 1) Download The Text Layout Component here (http://labs.adobe.com/downloads/textlayout.html) Note: do not install the ‘open source’ version, go down the page a bit to get the “text layout component

Step 2)
use the Flash Extension Manager to install the “Text Layout Flash Component.mxp” file…and then restart flash.

Step 3) Open up a Flash File , then open up the components panel (window-> components) and open up the “standard components” and drag an instance of the “textlayout” component onto the stage. (After you have done this you can actually delete the component from the stage…we just needed to make sure the component was in our library…I assume you could also just drag the component directly to the library to achieve this )

Ok, now you can use all of the cool text layout features that we will need to be able to make a Subscript in Flash.

Step 4) Now a bit of Actionscript. I am not going to go over all of the details of how the Text Frame Work works(the two links below explain the framework in greater detail).

Download the Source Code here

Good links on TextLayout
Adobe Docs
link 1
link 2

Here’s the code for Main

package
{
import flash.display.LineScaleMode;
import flash.display.Sprite;
import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.elements.SpanElement;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.formats.CharacterFormat;

import flash.display.DisplayObject;
import fl.controls.TextLayout;

/* textLayout_flash is the base class for the Text Layout component. If you bring up the properties on the TextLayout Component in the library, you will see this.*/

public class MainTxt extends Sprite
{

public function MainTxt()
{

var myTextComponent:TextLayout;
// Instantiate the textLayout_flash class to create a TextLayout Component.
myTextComponent = new TextLayout();

// Add the new component to the Stage.
var myTextComponentOnStage:DisplayObject = addChild(myTextComponent);
// Get the Text Flow from the TextLayout Component.
var textFlow:Object = myTextComponent.textFlow;
var span0:SpanElement = textFlow.getFirstLeaf();
span0.text = “E=MC”;

//get reference to ‘root’ ParagraphElement of the TextFlow
var rootParagraphElement:ParagraphElement = textFlow.getChildAtIndex(0);

var span2:SpanElement = new SpanElement();
span2.text =”2″;
rootParagraphElement.addChild(span2);

var span3:SpanElement = new SpanElement();
span3.text =”\n\nLog”;
rootParagraphElement.addChild( span3 );

var span4:SpanElement = new SpanElement();
span4.text =”2″;
rootParagraphElement.addChild( span4);

var span5:SpanElement = new SpanElement();
span5.text =” = 3″;
rootParagraphElement.addChild( span5 );

var cf:CharacterFormat = new CharacterFormat(textFlow.characterFormat);
cf.fontSize = 20;
textFlow.characterFormat = cf;

var superScriptFormat:CharacterFormat = new CharacterFormat(textFlow.characterFormat);

superScriptFormat.baselineShift = flashx.textLayout.formats.BaselineShift.SUPERSCRIPT;
span2.characterFormat = superScriptFormat;

var subScript:CharacterFormat = new CharacterFormat(textFlow.characterFormat);
subScript.baselineShift = flashx.textLayout.formats.BaselineShift.SUBSCRIPT;
span4.characterFormat = subScript;
}

}

}

Comments Off on Using Actionscript to make Subscripts with Flash’s Text Layout Framework

Box2d 2.1 b2world.QueryPoint() and iterating over a b2fixture list

Posted in actionscript 3, Box2d by wwwebber on May 20, 2010

In version 2.1 (and earlier I believe) of box2d objects are stored in linked lists. A common task will be iterate over one of these linked lists. For instance if you want to iterate over a body’s b2fixture linked list. In my case, I had the following problem: I was making a kids math game on how to combine like terms called Rj The Robot , and I only wanted the robot to jump if it was standing on a ‘floor’ shape. Now all ‘foors’ in the game had a string attached to their b2fixture called ‘is_floor’. Below is some code that demonstrates how floor bodies, shapes and fixtures are creating. Note: if you don’t know what a b2fixture is read this.

//bottom wall
var bottom_wallShape:b2PolygonShape = new b2PolygonShape();
var bottom_wallBd:b2BodyDef = new b2BodyDef();
bottom_wallBd.type = b2Body.b2_staticBody;
var bottom_wallBody:b2Body;
bottom_wallBd.position.Set(halfOfStageWidth /PIXELS_PER_METER , halfOfStage*2/ PIXELS_PER_METER- .5 );
bottom_wallShape.SetAsBox(ground_width, ground_height);
bottom_wallBody = myB2World.CreateBody(bottom_wallBd);


var fd:b2FixtureDef = new b2FixtureDef();
fd.friction = 1 ;
fd.shape = bottom_wallShape;
fd.userData = 'is_floor';
bottom_wallBody.CreateFixture(fd);


Now, I wanted the hero to be able to tell if it was standing on a shape whose b2fixture had the string ‘is_floor’ as its userdata. The solution is to use the b2World.QueryPoint() function . This function takes the form of myb2World.QueryPoint(callbackFunction, someB2Vec) where the someB2Vec is the point to check.  In the picture below I was sending the red dot, called heroFootPoint in my code, to the function. Below is the full code explained in the comments
//get hero's center point
var currentCenter:b2Vec2 = _body.GetWorldCenter();
heroFootPoint.x = currentCenter.x
heroFootPoint.y = currentCenter.y + 1.43    //add 1.43 so point is below Robot  foot;
var bIsOnFloor:Boolean = false;             //assume not standing on floor

function bOnFloorFixture(fixture:b2Fixture):Boolean    //call back function
{                                                                                                               //this call back function
var body:b2Body = b2Fixture(fixture).GetBody();            //get body of current fixture
var bsFixture:b2Fixture = body.GetFixtureList();
while (bsFixture != null )                                                                 //it
{
if (bsFixture.GetUserData() == ‘is_floor’)                  //found a fixture whose userdata is ‘is_floor’…ie are standing on the floor
{
bIsOnFloor = true;
return false;                                                                           //return false so that we don’t continue iterating over the list
}
bsFixture = bsFixture.GetNext();                              //if we got here we didn’t yet find a fixture with ‘is_floor’ userdat..

}                                                                                              //so see if body has another b2fixture attached for checking

return true;                                                                                    //callback returns true means that the queryWorld() function will check next b2Fixture at heroFootPoint
}
myB2World.QueryPoint(bOnFloorFixture, heroFootPoint);               //start queryPoint()…check all fixtures overlapping heroFootPoint

Comments Off on Box2d 2.1 b2world.QueryPoint() and iterating over a b2fixture list

Upgrading to Box2D 2.1 (Flash)

Posted in Uncategorized by wwwebber on May 11, 2010

Box2d 2.1 offers several improvements in its use of events, its object models and added features like buoyancy, over 2.02 but you’ll find that none of your code compiles anymore.

Read this post about fixtures
Read this forum post about the new and improved contact listener
2.1 a documentation
Other changes

Version 2.02 Version 2.1
myB2body.WakeUp() myB2Body.SetAwake(true)

Gone and Not Necessarily Missed

  • myB2Body.SetMassFromShapes() //apparently done automatically
  • declaring a size of your   B2World() . Create a world with new b2World(GRAVITY_VECTOR,  doSleep ) Notice the lack of a b2aab for the world size!

New and Very Welcome

The new contactListner is vastly improved and would take a whole post in itself to explain, but it’s a very welcome improvement

I’ll add other small feature changes as I stumble upon them while working on my new kids game: RJ the Robot ( math based platform game)

Comments Off on Upgrading to Box2D 2.1 (Flash)

Rectangle on top of line…rotated at any angle

Posted in Uncategorized by wwwebber on March 6, 2010

Just started a new game and i needed to have a character who could ‘walk’ on a line at any angle …even upside pic .

With a little trig it’s fairly easy to place a rectanguler movieclip on top of a line.

Here’s all the source code

Here’s the critical code

c1 and c2 are the endpoints of the line that you can drag around (demo)
hero is the name of my rectangular object
xOffset is how far hero should move (based off left right arrow keys). Each time the key is pressed we add or subtract from this number. So it represents a “cumulative” and current x value.

//calculate angle of line based on endpoints
var angle:Number = Math.atan2(c2.y - c1.y, c2.x - c1.x);
//rotation of MovieClips in Flash is in degrees...so convert
hero.rotation = angle * 180 / Math.PI;
//how far (dx) are we from first of the two points
var xFromOrigin:Number = xOffset - c1.x;
//just some trig here
var newY:Number = c1.y + xFromOrigin * Math.tan( angle);
//get new coordinates of hero

hero.x = xOffset + h * Math.sin(angle)
hero.y = newY - h * Math.cos(angle)

Comments Off on Rectangle on top of line…rotated at any angle

Meteor Based Blitter Engine

Posted in bitmapdata, image effects by wwwebber on February 21, 2010

Following up on my last post on how to dynamically, scale and apply filters to display objects and then copy these into bitmapdatas , I wanted to implement the following

Source Code

1) A Meteor class that pre calculates and precaches its rotation, scale etc.. into arrays (thus gaining a performance boost ) Again, I feel the need to give a link out to 8bitrocket.com here regarding this entire idea of bitmapdata blitting for performance gains . Unlike the last post, this one would require also rotating the meteors (just a few extra lines) and storing all of the rotations into an array (I’m actually using the new Vector class…but same idea) Here’s the updated meteor class.
2) Create a Meteor Manager class (self descriptive) for adding new meteors etc..

It ended up working pretty well. Here’s about the only code you need in your main document class to get the meteors going

//create a bitmapdata --which our MetoerManager can blit to
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0x0000);
//create a bitmap to house the bitmapdata
var bmp = new Bitmap(canvas);
stage.addChild(bmp);

//create the Manager object
var mFact:MeteorSpawnFactory = MeteorSpawnFactory.getInstance();;
//pre-cache the bitmapdata
MeteorSpawn.preCache();

//let the manager know about the bitmapdata that it'll blit to
mFact.canvas = super.canvas;

//"spawn" a new at x = 100 and y = 200
mFact.addSpawn(100, 200);

Source Code

Tagged with:

Comments Off on Meteor Based Blitter Engine

Actionscript 3: BitMapData–how to Dynamically Apply a filter, scale and then center BitmapData

Posted in bitmapdata, image effects, Uncategorized by wwwebber on February 21, 2010

Basically, if you are wondering how to create a new BitmapData by scaling a display object and also applying a filter and you would like to keep track of the new center of your scaled bitmapdata …this example is for you.


I was working on a new game for my online math games site and I wanted to be able to create a new BitmapData that was a scaled down version of a library item. This in itself is easy but it required a bit of extra to work to also be able to scale the display object dynamically as well as dynamically apply a filter , and all the while keep track of the center of the ‘real object’ (ie the radius of a original circular meteor). Knowing the true center of the bitmapdata as well as the radius of the ‘real’ object (ie not counting the filter) is necessary for doing collision testing in the math game.

I have attached a flash cs3 version of the file whose demo you can see here and download the cs3 file here. As an aside, I hate using timeline code but I wanted to provide this example in a single file…so I put all the code in the main time line. The code does all of the work and places a red dot at the calculated center of the bitmap. This sort of stuff is useful in games that requiring blitting aka 8bitrocket.com style

Pseudocde
1) create instance of library item (in my case a meteor)
2) Scale down or up the item
3) apply filter around item
4) create a new bitmapdata based on the size of the scaled meteor and the size of the filter (both dynamic)
5) keep track of the ‘actual’ radius of the scaled meteor (ie sans the filter)