Ok I get a bit lost with all the web tech and I am not sure what the relative merits of approaches are ie: Edge and hand coding when to use css when javascript etc..., but more importantly the difference between just simple cross browser html and html5/canvas.

I have been experimenting with html/javascript, but wondering if I need to be looking at Canvas/html5... I am really more interested in looking at the interactive flash type replacement area rather than corporate html, but still not really sure on where I should be looking is it too early for html5?

Let me give you an example of some haXe cross browser javascript that allows me to slide between images in standard html ( so one image gets masked smaller as the other one gets masked less a sort of reveal effect )... ( should work on phones and lots of browsers ), I am missing out lots of the details and maybe you can do all this with css and maybe my approach is overkill? But anyway...

.... // skipping details here... // ( images is an array of strings and // Pages constructor takes array of type T pageImages = new Pages( images ); pageImages.pageChange.add( setImage ) ; right.setPress( pageImage.previous ); left.setPress( pageImages.next ) ; ....

// function that sets up the movement... // ( some of my var naming need improving but general approach )

public function setImage()
{
    var old = imageOld;
    var img = imageHolder;
    var ina = inner;
    img.visible = false;
    ina.visible = false;
    var s: Int;
    var f: Int;
    if( pageImages.dir == 1 )
    {
        ina.setImage( pageImages.last );
        img.setImage( pageImages.curr );
        s = 0;
        f = 300;
    } 
    else
    {
        ina.setImage( pageImages.curr );
        img.setImage( pageImages.last );
        s = 300;
        f = 0;
    }
    img.width = s; 
    old.width = 300 - s;
    old.x = img.x + s; 
    ina.x = -s;
    img.visible = true;
    ina.visible = true;
    var t = new Tween( s, f, 1000 );
    t.setTweenHandlers( function( e ){ 
                                            img.width = e; 
                                            old.width = 300 - e;
                                            old.x = img.x + e; 
                                            ina.x = -e;
                                        }  );
    t.start(); 
}

Now I know there maybe some overheads with this approach but generally for something large I think it is probably a sensible approach, I looked at jeash and animated some bitmaps but really it seems heavier structually than my simple wrappers.

Anyway I know none of you here use haXe but you probably all know a ton about html/html5 canvas, css etc... and can give me a good overview, as the field looks to be a bit of a confusing mess and while I can code a site in pure haXe js, I would have no idea what laws I would be breaking and what tech I need to be using. Has anyone got a really good understanding of what techs are used when etc... seems edge would only be edge usage for example?