Textoo

I never succeded to make a proper release of the 1st version of this framework, because it got too big, too ambitious and the result was never clean enough to be released.

So now, I’m gonna try an another way, releasing little achieved modules, one after the other, each of them able to work independantly as tools.
For this version, I’ll go back using googlecode, so all sources can be found here :

SOURCES

Now, let me present to you Textoo, an enhanced TextField, with everything taken care of :

• css
• localisation
• rasterisation
• letter access for animation
• columns and flow

Hello World

let’s begin with a small helloworld :

_context = new TextooContext();
//populate the css
_context.addStyleSheet(".hw{font-family:Bitstream Vera Sans;font-size: 20;color:#beb8ad;text-align:left;}");
//populate the localisation.
_context.addLocalText("hello", "", "Hello World", "hw");
 
Textoo.defineGlobalContext(_context);
 
_textoo = new Textoo(0, 0, "hello");
addChild(_textoo);

After creating and populating a context, Textoo.defineGlobalContext allows to set this context as default for all Textoos not having one of their own. (you could define a specific context for a specific Textoo, in a rare usecase when trying to display 2 différent languages at the same time)

Localisation

populate the context with a stylesheet by language

_context.addStyleSheet(CSSText:String, language:String);

As well as the different texts versions

_context.addLocalText(key:String, language:String, text:String, className:String);

The key will be used to allow the Textoo to retrieve the text value.

To change the language, simply set the value :

_context.language = "en";

It will set the corresponding styleSheet and change in every Textoo the value of the text.

About the language code, use either a 2 letter language code (eg : “en”, “fr”, “es”, … find more about ISO 639) as well as country specifics languages (eg: “en_UK”, “en_US”, … find more about ISO 3166). The context will always try to solve the language set to be the closest to the languages registered if the follow this standards.

Also, detect the user language :

_context.detectLanguage();

It will first try to get the browser language and if unsuccesful, fallback to the system language (Capabilities.language).

Rasterisation

_textoo.isBitmap = true;

when set to true, this property make the text rendered as a Bitmap, which can save a lot of performances for a small loss in details.

Letter Animation

_textoo.isSplitted = true;

this property will split the text in small letters.
Depending on isBitmap value, this letters will be TextField or Bitmap. bitmap letters will really greatly improves performances.
Access letters by 2 different ways :

_textoo.displayObjects // return a Vector.
_textoo.letters // return a Vector., each letter being at the same index than in the text, but every space being null.

tips: use textFieldLetterClass and bitmapLetterClass properties to extends respectively TextFieldLetter and BitmapLetter.(see demo)

AutoSizeDirection

Textoo automatic resizing is set through the property autoSizeDirection, which can be set to 4 values (AutoSizeDirection constants) :

• none (default, no resizing)
• horizontal (resize only in width)
• vertical (resize only in height)
• both (resize in width and height)

tips : when defining the width & height of the Textoo in the constructor, setting a value to 0 will make it resizable.

new Textoo(0,20) // set autoSizeDirection to horizontal.

TextVars

we might need to set a dynamic value into the text :

_context.setLocalText("time_left", "time left : ${min}:${sec}' until end", "en", "time");
_textoo.setTextVar("min", "2");// replaces ${min} by the value 2
_textoo.setTextVar("sec", "14");// replaces ${sec} by the value 14

Font Embed

Textoo always tries to use embeded font. It will check if a complete text can be displayed as embeded and do so, else, it will use the devices font.
When splitting Textoo into letters, it will check it for each of them. This way, the user always sees the content.
It can also be useful for complex fonts like oriental fonts, which take a lot of weight, so it can rely on a fallback font for this cases.

with the property useDeviceFonts (true by default), disable the switch to device fonts, which can be useful to check that you fonts are properly embeded

Flow

To display your text as column, or make the text flow from one Textoo to an another, use the link method :

var master:Textoo = new Textoo(200,300,"master");
var slave:Textoo = new Textoo(200,300);//no key for the linked Textoo, as it will be filled with the overfow of the master Textoo
master.link(slave);

RoadMap
In the nexts weeks,  <a href > should work on bitmap version of the text (this should come with a new version of Interaction)

Will follow XMLTextooContext and derivative, which should digest the xmls to populate the context (a first versions of this xmls can be found in the bin of the source)

Interaction

Interaction is an object used to define mouse interaction on a specified displayObject.

public function Interaction(target:InteractiveObject = null)

private var interaction:Interaction;
private var sprite:Sprite; 
 
sprite = new Sprite();
interaction = new Interaction(sprite);

You can define 4 callbacks for each type of interaction:

interaction.onMouseOut = callback;
interaction.onMouseOver = callback;
interaction.onMouseUp = callback;
interaction.onMouseDown = callback;

You can directly trigger interaction as the action was done by the mouse :

interaction.mouseOut();
interaction.mouseOver();
interaction.mouseDown();
interaction.mouseUp();

2 properties let you know the states of the interaction :

trace(interaction.isMouseOver); //Boolean
trace(interaction.isMouseDown);//Boolean

You can define multiple displayObjects as target of the Interaction.

interaction.addTarget(sprite2);
interaction.removeTarget(sprite);
interaction.target;//return the first target, generally the one defined in the constructor
intearction.targets;//return an array of targets

you can disable the interaction with the property mouseEnabled

By default, buttonMode is activated. You can change his state with the property buttonMode.

If you define the property url, mouseDown will directly navigate to this url. the property window allows to define which type of window to open.

As described in the Looty Class post, you can allow only Interaction to work on your application and stop mouseEvents propagation by setting the property Looty.mouseEventsEnabled to false.

For now, Interaction does not yet support Bitmap, but should in the next version (even with transparency support, meaning transparent part of the image will not trigger interaction).

Interaction is the base class for all interactive classes (ColoredInteraction, DragInteraction and others). I’ll come back to those later.

Notifier

Notifer tool allows communication between 2 instances independant of each other, a bit like a global message broadcaster.

You can trigger a method in any instance, applying some parameters and collecting the results returned by the execution.

2 classes :

• Registration, which awaits a Notification to trigger a specified method
• Notifier, which sends the Notification

the same value on their property type will tie them together.

//Create a Registration in a first instance
private var registration:Registration;
//this registration responds to a specific type, a String constant
registration = new Registration("STRING_CONSTANT");
//register the callback you want to be triggered at Notification
registration.register(myCallback);

//In a second instance create a Notifier, with the same type
private var notifier:Notifier;
notifier = new Notifier("STRING_CONSTANT");
//to run the method registered within the registration, use notify method.
notifer.notify();

When you have several registration under the same type, they are all triggered on notification.
Important : Registration and Notifier are weakreferenced, so it is recommanded to declare them as class member.

if you pass arguments through notify, the are applied to the callback.

notifier.notify("arg1", 2, 5.5);
private function myCallback(arg1:String, arg2:int, arg3:Number):void

if your callback return some value, it will be returned by the method notify in an Array, so if several registration return values, they are all assembled in on array.

private function myCallback():String { return "seashell"; }
trace(notifier.notify(), notifier.notify() is Array); // seashell, true

In some case, your notification could be sent before the registration is even created (if the registration is in a swf not yet loaded)
You can set the property persist to true to solve this problem and then the Notification will happend just after the Registration creation.

notifier.persist = true;

Notifier can be useful to communicate easily between 2 swf loaded in a same domain, when working in collaboration on two different part of an application (you just have to agree on the string constant) or to shortcircuit data flow in an application between 2 independant part.

Looty Class

Looty Class is a bit like a swissknife, implementing static methods with general uses and allowing to configure specifics details of the framework.

initialisation

static public function initialise(stage:Stage, isResizing:Boolean = true):void

This initialisation should be the first code to be executed by the application.
Looty will keep a reference to the stage accessible from anywhere through the property stage.

static public function get stage():Stage

the second argument isResizing initialise a listener to the Event.RESIZE and set stage alignement to LEFT and scaleMode to NO_SCALE). If you don’t need resizing, just set isResizing to false.

parameters

static public function get parameters():Object

when initialised, Looty set flashvars definined through embeding in the parameters object so it can be easily accessed from anywhere.

delayed callback

static public function delayedCall(delay:Number, callback:Function, ...params:Array):void
static public function killDelayedCallsTo(callback:Function):void

execute a specified callback after a specified delay (ms)

enterframe, exitframe, mousemove, resize

limiting event listener results in a performance gain.
using callbacks instead of listener makes it simplier to clean up and garanties no reference held to an object.

static public function addEnterFrame(method:Function):void
static public function removeEnterFrame(method:Function):void

method triggered at the construction of the frame

static public function addExitFrame(method:Function):void
static public function removeExitFrame(method:Function):void

method triggered after the frame construction.

static public function executeNextFrame(method:Function):void

method triggered just once at the construction of the next frame.

static public function addMouseMove(method:Function):void
static public function removeMouseMove(method:Function):void

method triggered when mouse is moving

static public function addResize(method:Function):void
static public function removeResize(method:Function):void

method triggered when application change of size.

fullscreen

static public function enterFullScreen(target:DisplayObject = null, extendToFit:Boolean = true):Boolean
static public function exitFullScreen():Boolean
static public function get isFullScreen():Boolean
static public function addOnEnterFullScreen(method:Function):void
static public function removeOnEnterFullScreen(method:Function):void

enterFullScreen allows you to set the application on fullscreen with a specified displayObject being displayed (if null, application is displayed as it is)
a specified callback can be triggered when entering fullscreen.

instance création

static public function createInstanceByName(name:String, params:Array = null):*

create an instance of an object from the name of the Class. a shortcut of getDefinitionByName with vérification of the definition’s existence.
params are used for the construction of the instance.

time and mouse move

static public function get elapsed():Number

time elapsed on last frame

static public function get mouseMotion():Point

mouse movement(px) during last frame

static public function get mouseSpeed():Point

mouse speed during last frame

texts

this two properties allows to configure the way Looty renders its own implementation of textField, StyledTextField and its inheritance.

static public function set useDeviceFonts(value:Boolean):void
static public function get useDeviceFonts():Boolean

by default, if a font is not embeded in the application, Looty will automatically use a device font. This is great in production, but it can be useful when debuging to disable this feature.

static public function set useWhiteBitmapTextColorType(value:Boolean):void
static public function get useWhiteBitmapTextColorType():Boolean

StyledSplittedTextField draws every character in bitmapdatas. textField advanced rendering is different when rendering in white or in black. This property allows you to define which rendering will be used during drawing. It could have been dissociated, but as it is more a question of style, one general property seemed enough for the use.

mouse events

static public function set mouseEventsEnabled(value:Boolean):void
static public function get mouseEventsEnabled():Boolean

Looty provides an alternative to mouseEvent using Interaction object, which simplify cleaning and handling mouse interactions.
So, you can disable the classic use of mouseEvent setting mouseEventsEnabled to false, which can be handy for performance gain, like on mobile for example.
Concretely, the event propagation will be stopped as soon as it reachs the stage during capture phase.

looty on github

I just posted looty on github

looty

I didn’t had the time to make a proper release, so it still is a work in progress delivered as it is.
Feel free to use it or to fork it.

I’ll post some little articles as soon I got time to do so.

looty