Skip to content

Latest commit

 

History

History
183 lines (132 loc) · 6.61 KB

coding.md

File metadata and controls

183 lines (132 loc) · 6.61 KB
Raw

Coding

For most things, you can just use EaselsJS and SoundJS docs. Read below about NanoFL-specified features.

Important rules:

  1. Most time you don't need to use cache() method: if your object have none empty filters then NanoFL cache it automatically.
  2. If you need to uncache your object, don't forget to uncache dependent objects too (often this are the parent objects). You can use nanofl.DisplayObjectTools.smartUncache(myObj) for this.
  3. In most cases you don't need to create instances of Bitmap/Button/MovieClip directly. Use generated children classes in src folder for that.

NanoFL classes:

  • Bitmap - represent Bitmap Symbol on the canvas.
  • Button - represent MovieClip Symbol with a button behavior (checked "Treat as button").
  • DisplayObjectTools - helpers applicable to createjs.DisplayObject.
  • MovieClip - represent MovieClip Symbol (EaselJS's MovieClip class does not used by NanoFL).
  • Player - global store for CreateJS's stage and NanoFL's library and scene.
  • SeamlessSoundLoop - helper to play background music without gaps.
  • TextField - represent static and dynamic text on the canvas.
  • TextRun - represent a formatted piece of text for TextField.

nanofl.Bitmap

Extends createjs.Bitmap. Just image on canvas. Example:

var bmp = new nanofl.Bitmap(nanofl.Player.library.getItem("myBitmap"));
container.addChild(bmp);

nanofl.Button

Extends nanofl.MovieClip. Movie clip with 4 frames: regular, mouse over, ouse pressed and hit area. Example:

var btn = new nanofl.Button(nanofl.Player.library.getItem("myButton"));
container.addChild(btn);

nanofl.DisplayObjectTools

Helper methods applicable to createjs.DisplayObject.

Static methods

  • smartCache(myObj:DiplayObject) - cache objects in the tree (depend on filters and masks). In most cases NanoFL cache objects automatically.
  • smartUncache(myObj:DiplayObject) - uncache myObj display object and dependent objects (depend on masks). In most cases NanoFL uncache objects automatically.
  • getOuterBounds(myObj:DiplayObject) - returns object bounds include filters bounds (invariant to cache).
  • getInnerBounds(myObj:DiplayObject) - returns object bounds exclude filters bounds (invariant to cache).
  • dump(myObj:DiplayObject) - trace objects tree.

Examples:

nanofl.DisplayObjectTools.smartCache(myMovieClip);
nanofl.DisplayObjectTools.smartUncache(myMovieClip);
var bounds = nanofl.DisplayObjectTools.getOuterBounds(myMovieClip);
var bounds = nanofl.DisplayObjectTools.getInnerBounds(myMovieClip);
nanofl.DisplayObjectTools.dump(myMovieClip);

nanofl.MovieClip

Extends createjs.Container

This is a special container to store layer-related children (automatically when constructed from library symbol). Also can contain children not related to any layer (so you can call addChild() to add your DisplayObject to MovieClip).

Example:

var mc = new nanofl.MovieClip(nanofl.Player.library.getItem("myMovieClip"));
container.addChild(mc);

Fields

  • paused - a boolean to specify not to advance to the next frame on tick
  • loop - a boolean to specify go to the first frame on movie is finished
  • currentFrame - readonly integer which represent current frame index (zero-based)

Methods

  • play() - set paused to false
  • stop() - set paused to true
  • gotoAndStop(labelOrIndex) - go to specified frame and stop
  • gotoAndPlay(labelOrIndex) - go to specified frame and play
  • getTotalFrames() - returns most long layer length
  • onEnterFrame() - override this method for your needs
  • onMouseDown(e:createjs.MouseEvent) - override this method for your needs
  • onMouseMove(e:createjs.MouseEvent) - override this method for your needs
  • onMouseUp(e:createjs.MouseEvent) - override this method for your needs

nanofl.Player

This class is accessible anywhere. Use it to control global properties.

Fields

  • library - a object with a getItem(namePath) method; use this method to get symbols from library
  • stage - a createjs.Stage object (use to customize native CreateJS stage)
  • scene - a nanofl.MovieClip scene object (root movie clip)

nanofl.SeamlessSoundLoop

Use this class for gapless background music loops. Example:

var music = new nanofl.SeamlessSoundLoop(createjs.Sound.play("mySound"));
...
music.stop();

Methods

  • new(sound:createjs.AbstractSoundInstance) - constructor
  • stop() - stop playing (create new object to start again)

nanofl.TextField

This class represent a multi-line and multi-format text on canvas. Example:

var tf = new nanofl.TextField();
tf.text = "My text";

Fields

  • border - set to true to show black border around text field
  • height - current height of text field
  • minHeight - minimal height calculated on text; readonly
  • minWidth - minimal width calculated on text; readonly
  • text - allow get or set whole text as a string
  • textRuns - array of TextRun which contains field's text blocks
  • width - current width of text field

Methods

  • new() - constructor

nanofl.TextRun

This class represent a piece of text and it's format. Used in TextField to store text blocks.

Fields

  • align - a string ("left", "right", "center" or "justify")
  • characters - text string
  • family - font family (like "Courier New")
  • fillColor - fill color ("red", "#ff0000", "rgba(255, 0, 0, 0.5)")
  • kerning - a boolean to do auto kerning
  • letterSpacing - space between letters (ignored if kerning is on)
  • lineSpacing - additional space between lines
  • size - font size
  • strokeColor - stroke color (used only if strokeSize > 0)
  • strokeSize - stroke thickness (zero for regular text)
  • style - font style ("", "bold", "italic" or "bold italic")

Methods

  • new([characters], [fillColor], [size]) - constructor
  • clone() - returns a copy of this object