Non Tech Guy

"It works! Ha ha, IT WORKS! I FINALLY build something that works!"

Showing posts with label createjs. Show all posts
Showing posts with label createjs. Show all posts

New features in CreateJS

Unknown
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.

  • 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
Read More
06:03 ,

CreateJS, Illustrator and Drawscript

Unknown
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:

  • Only available for versions of illustrator between 16.0 and 17.9
  • Support does not yet exist for complex shapes.
Read More
02:50 , , ,

Extend createjs.Container

Unknown
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();
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.
Read More
00:20 ,
Subscribe to: Posts ( Atom )