Image Gallery with TweenMax CSS3 effects and JQuery sauce

Recently Greensock added some new cool features to their animation JS Engine, these target specifically css3 animations and animating css3 properties.

So I thought to create a little demo showcasing some of these cool new features.

This Image gallery moves on 2 axis, horizontally for viewing different images and “vertically” or “in-time” if you prefer for viewing different galleries.

You can view a rough DEMO here

delorian

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Animating properties of injected SVG elements with TweenMax

Hello all, this post was somewhat inspired by the work of PJ.Onori and his blog post about SVG injecting and manipulation through javascript and css.

You can read more about his findings here: svg-css-injection

So after injecting the SVG inside the DOM I thought of why shouldn’t we try and animate it (no one likes static images right?), some simple things like change color gracefully, scale it or even programmatically create a simple animation of it.

I will show here how we can use simple tools like JQuery and TweenMax from Greensock and animate a simple SVG graphic.

View a DEMO here: AnimateSVG DEMO

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Image Slideshow with PreloadJS, JQuery and TweenMax

This is a tutorial about how to create a simple slideshow element with dynamicaly loaded images and some cool animations.
PreloadJS is a rather new JS library that aims to help with the loading of various assets, in our case it will provide us with the info of when the images are fully loaded and a value of percentage completion of this task.

DEMO

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Greensock-TweenMax Javascript animation (JQuery based)

Hello
This is the first post in this blog for javascript based stuff. I am using greensock products for years for flash/flex/air projects and I would not change their animation power with anything. So when greensock announced port to javascript I was thrilled, and excited to try out the “new” implementation… but wait… there is nothing “new” to the way we declare things… its the same compact and straightforward structure I used in flash! Amazing!

Plus it works with JQuery out of the box AND supports CSS animations, HTML properties animations, timeline animations and a bunch of other cool stuff.

So for my next trick I created a page with the pacman eating some dots, this was done in 10′ and the javascript required as you will see its minimum.

!Note: best viewed with a modern browser as I used css3 for the shapes.

Check it out: http://www.netgfx.com/trunk/animateJS/

Learn more about Greensock and its animation platform here: http://www.greensock.com/v12/

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

AS3 send BitmapData to backend efficiently

I was recently asked to send a medium/large file to a backend server running with php. At first I tried sending byteArray but that got messed up from JSON.strigify then I thought to convert the byteArray to base64 format. Although it worked an image of 500×700 occupied ~500kb on the database so it was unacceptable.
The solution was to compess the byteArray and send it, and then decompress it when I received it again. And here is how I did it:


public static function deconstructBitmap(bmp:BitmapData):Object
    {
      // converting the bitmapdata into a byteArray
      var byteArray:ByteArray = bmp.getPixels(bmp.rect);
      // compressing using the default algorithm 'zlib'
      byteArray.compress();
      var enc:Base64Encoder = new Base64Encoder();  
      var b64;
      enc.encodeBytes(byteArray);
      // joining all in one line
      b64 = enc.drain().split("\n").join("");
      // the rectangle is needed for re-contstruction
      return {'bmpData':b64,'rect':bmp.rect};
    }

And now we have a compressed byteArray with our bitmapData the 500×700 bitmap data now occupies ~13kb on the database!

And here is the re-construction of the byteArray into bitmapData ready to be inserted to <s:Image/> or any other component.


public static function constructBitmap(obj:Object):BitmapData
    {
      // to avoid errors
      if(obj!==''&&obj!==undefined&&obj!==null&&obj.bmpData!=='ByteArray'){
        var dec:Base64Decoder = new Base64Decoder();
        dec.decode(obj.bmpData); // decoding using the same algorithm
        var newByteArr:ByteArray=dec.toByteArray();
        newByteArr.uncompress();
        // end of decoding //
        
        var bitmapData:BitmapData = new BitmapData(obj.rect.width, obj.rect.height);
        bitmapData.setPixels(bitmapData.rect, newByteArr);
        return bitmapData;
      }
      else
      {
        return null;
      }
    }

And thats it, two simple functions to make you and your database happy!

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Capitalize first letter of a word JS & AS3 (quick tip)

After 10′ of searching for a fast solution I came up with this, I suspect there is a much cooler way of capitalizing with AS3, but if I can’t find it on 2 pages of search results it pretty much doesn’t exist…
So here we go, this might work only for single words but that was the intention.


function capWord(source) {
var cap = String(source).substr(0,1);
cap = String(cap).toUpperCase()+String(source).slice(1);
trace('A capitalized '+cap); // A capitalized Word
window.console.log('A capitalized '+cap);
}

enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Re-arrange objects in a VGroup by Drag&Drop (Flex Spark)

Adding drag and drop support for Group components, as well as swapping of children or reorder.
This might seem like a straightforward issue and an easy solution, but as I found out… only list based views have the ability to re-arrange their children via dragging and droping. But there is one hidden gem, all the Group based components have build-in support for drag and drop operations, and whilst the user cannot enable directly the dropEnabled option (which allows the re-arrange like operation), it is fairly easy to create a custom functionality to imitate it.
Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin