Showing posts with label frontend Dev. Show all posts
Showing posts with label frontend Dev. Show all posts
New features in CreateJS
If you have not already seen this video by Grant Skinner it is work taking the time to see what is coming in the next releases of CreateJS
I will just recap on the things that I am most excited about.
I will just recap on the things that I am most excited about.
- CreateJS functionality is not part of Adobe Flash CC and no longer a external extension that needs to be installed to Flash as a toolkit.
- SpriteSheetBuilder - Generates the sprite sheet from vector graphics. Results in smaller file sizes and is scalable for different devices.
- DOMElement - takes a DOM element and includes it in the display list. It then gets manipulated like every other display element. Best parts of HTML and best part of fast graphics.
- Event Model - Includes binding and cleaning up events, it also handles arbitrary data. Unsubscribing from the event has also been added. Dispatching events by name.
- Preloads anything - Load external manifests and PreloadJS works with SoundJS
var queue = new createjs.LoadQueue();
queue.loadManifest([
{src:path1, id:'id1'},
{src:path2, id:'id2'},
], true, '.../filepath/'); // I like this!
CreateJS is licensed under the MIT licence model
CreateJS, Illustrator and Drawscript
There are various ways of creating and using vector graphics on the web. SVG is a popular choice as is using the canvas in HTML 5. Your background and your project objectives will help you decide which is your best choice.
I am already using the CreateJS library so finding some way of exporting shapes from Adobe Illustrator to code was first prize. Drawscript is a plugin for Illustrator that converts illustrator shapes into code. It can currently only be installed on versions of illustrator between 16.0 and 17.9. Illustrator CC 2014 is version 18.0 so you will need to download a previous version of Illustrator.
Drawscript also does not support complex shapes at this point so nothing with cutouts or negative space. I am sure that support for complex shapes will be coming in future releases which will make this a awesome tool.
Recap on Cons of Drawscript:
I am already using the CreateJS library so finding some way of exporting shapes from Adobe Illustrator to code was first prize. Drawscript is a plugin for Illustrator that converts illustrator shapes into code. It can currently only be installed on versions of illustrator between 16.0 and 17.9. Illustrator CC 2014 is version 18.0 so you will need to download a previous version of Illustrator.
Drawscript also does not support complex shapes at this point so nothing with cutouts or negative space. I am sure that support for complex shapes will be coming in future releases which will make this a awesome tool.
Recap on Cons of Drawscript:
- Only available for versions of illustrator between 16.0 and 17.9
- Support does not yet exist for complex shapes.
GreenSock Animation Platform (GSAP)
This is a great tool that I used in my ActionScript projects for years and now there is a javascript version. You can animate any CSS properties of DOM elements which is making HTML development look super slick. GSAP claims to be up to 20 times faster than JQuery and I believe it. For a couple of years now I have been trying to get a friend of mine (he is a HTML Developer) to try GSAP. Finally with reluctance he started using it and his words to me now are "why isn't everyone using it?".
In addition to setting up individual tweens you can also set up timelines where you can add multiple tweens and then control those tweens with play, pause, resume, reverse, restart. Check out the API Doc's
GreenSock has been around since the days of ActionScript 2.0 and followed that with a version for ActionScript 3.0. Now you can tween like a pro in javascript too!
In addition to setting up individual tweens you can also set up timelines where you can add multiple tweens and then control those tweens with play, pause, resume, reverse, restart. Check out the API Doc's
GreenSock has been around since the days of ActionScript 2.0 and followed that with a version for ActionScript 3.0. Now you can tween like a pro in javascript too!
Starling JS
I was so excited when I heard that there would be a Starling javascript library over a year ago, I signed up for the news letter and eagerly awaited the newsletter that would announce that StarlingJS had moved out of beta and that the library is ready to be put to work. If you have been out of the loop or living under a rock for the past year and have not seen the demo yet check this out.
Sadly things behind the curtain seemed more dire than the community knew and StarlingJS was close to dead in the water after the main sponsor pulled out. Daniel Sperl goes into some detail in this article on his blog. In a nutshell development will continue under a new partnership with Robert Bateman and the Away foundation.
While there is some concern from the community that the partnership will not mean that Starling and StarlingJS become vastly different API's, the good news is that development is underway again! I will be watching my inbox for this release.
Sadly things behind the curtain seemed more dire than the community knew and StarlingJS was close to dead in the water after the main sponsor pulled out. Daniel Sperl goes into some detail in this article on his blog. In a nutshell development will continue under a new partnership with Robert Bateman and the Away foundation.
While there is some concern from the community that the partnership will not mean that Starling and StarlingJS become vastly different API's, the good news is that development is underway again! I will be watching my inbox for this release.
Extend createjs.Container
So I ran into a problem which made me re-look the way that I was using the Sprite and Container classes in the CreateJS framework. Unless you wrap your asset in either of the two you will not be able to adjust properties like x, y and alpha of that asset.
Previously I was doing this
var _container = new createjs.Container(); // now I can adjust the properties
stage.addChild(_container);
var _instance = new MyClass(_instance, imagePath)
_instance.init();
Previously I was doing this
var _container = new createjs.Container(); // now I can adjust the properties
stage.addChild(_container);
var _instance = new MyClass(_instance, imagePath)
_instance.init();
function MyClass(container, src){
this._container = container;
this._src = src;
}
MyClass.prototype.init = function(){
this.bmp = new createjs.Bitmap(this._src);
this._container.addChild(this.bmp);
}
I then had a problem with inheritance when trying to use getters and setters. Long story short I have discovered a better way of doing it. You can extend either the Sprite or Container classes by using the following code.
var _instance = new MyClass(imagePath);
stage.addChild(_instance);
_instance.x = 50;//now I can access properties
_instance.y = 50;
function MyClass(src) {
this._src = src
this.initialize();
}
MyClass.prototype = new createjs.Container(); //Inheritance from Container
MyClass.prototype.Container_initialize = MyClass.prototype.initialize;
MyClass.prototype.Container_tick = MyClass.prototype._tick;
MyClass.prototype.initialize = function () {
this.Container_initialize();//call to initialize() method from parent class
this._bitmap = new createjs.Bitmap(this._src);
this.addChild(this._bitmap);
}
This is much cleaner and you will run into less errors down the line.
Subscribe to:
Posts
(
Atom
)
