Red Code Monkey

ImpactJS

Sara — Tue, 24 Jan 2012 16:55:44 +0000

Resources for impactJS

http://www.pointofimpactjs.com/

more to come…

Some notes on sources of info for JS

Sara — Tue, 24 Jan 2012 16:45:51 +0000

http://paperjs.org/

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

http://easeljs.com/

The Easel Javascript library provides a retained graphics mode for canvas including a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.
The API is loosely based on Flash’s display list, and should be easy to pick up for both JS and AS3 developers.

DisplayObject
Abstract base class for all display elements in Easel. Exposes all of the display properties (ex. x, y, rotation, scaleX, scaleY, skewX, skewY, alpha, shadow, etc) that are common to all display objects.

Stage
The root level display container for display elements. Each time update() is called on Stage, it will update and render the display list to its associated canvas.

Container
A nestable display container, which lets you aggregate display objects and manipulate them as a group.

Text
Renders text in the context of the display list.

Bitmap
Draws an image, video or canvas to the canvas according to its display properties.

BitmapAnimation
Displays animated or dynamic sprite sheets (images with multiple frames on a grid), and provides APIs for managing playback and sequencing.

Graphics
Provides a simple but powerful API for rendering retained vector graphics to a canvas.

Shape
Renders vector art via the Graphics object within the context of the display list.

DOMElement
An experimental display object that allows you to manage an HTML element as a part of the display list.

Filter
The base filter class that other filters (ex. BoxBlurFilter, ColorMatrixFilter, etc) extend.

http://www.chromeexperiments.com/

http://mrdoob.github.com/three.js/

Necessity of planning

Sara — Tue, 08 Nov 2011 21:10:06 +0000

Someone recommended this and when I read it, it blew my mind in how simple it is and just how necessary it should be when creating a project from the ground up. I cannot emphasize enough the importance of taking the time to draw your plan out on paper so that you can create a flow-chart of usability, identify various parts needed to make up the whole and to figure out they should be loosely-coupled. I’ve learned that there’s nothing worse than coding on the fly and then figuring out that you’ve coded yourself into a corner when new functionality is introduced.

Objology: One of the Best Bits of Programming Advice

Learning plan

Sara — Tue, 08 Nov 2011 16:07:55 +0000

I’m creating a plan to dedicate time to learn three things:
1. HTML5 and CSS3 (yes, they’re not fully usable yet but I want to be ready)
2. Unity
3. the Starling Framework: Particle System

I’m also interested in understanding the Appcelerator program and how it may benefit future projects. Is it all that it’s cracked up to be?

Go Fullscreen

Sara — Wed, 19 Oct 2011 20:52:59 +0000


import flash.display.StageDisplayState;

function goFullScreen():void
{
    if (stage.displayState == StageDisplayState.NORMAL) {
      stage.displayState=StageDisplayState.FULL_SCREEN;
    } else {
        stage.displayState=StageDisplayState.NORMAL;
    }
}

stage.addEventListener(MouseEvent.CLICK, _handleClick)

function _handleClick(event:MouseEvent):void
{
    goFullScreen();
}

Interactive JavaScript Charts plug-in

Sara — Thu, 16 Jun 2011 17:33:17 +0000

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

http://www.highcharts.com/

It works in all modern browsers including the iPhone/iPad and Internet Explorer from version 6. Standard browsers use SVG for the graphics rendering. In Internet Explorer graphics are drawn using VML.

Free for non-commercial usage and low licensing fee for single website usage.

Easy to use and beautiful!

Quit Fullscreen App completely

Sara — Tue, 07 Jun 2011 15:42:25 +0000

Code to quit a fullscreen exe completely (close out of fullscreen AND close down application:


import flash.events.Event;
import flash.ui.Keyboard;

stage.addEventListener(KeyboardEvent.KEY_DOWN,
                      onStage_KEY_DOWN);

function onStage_KEY_DOWN(evt:KeyboardEvent):void {
            if (evt.keyCode == Keyboard.ESCAPE) {
                fscommand("quit");
            }
 }

Remove children on the fly

Sara — Thu, 19 May 2011 20:41:01 +0000

Need to remove children on the fly?


function removeChildrenOf(mc:MovieClip):void{
    if(mc_mc.numChildren!=0){
        var k:int = mc.numChildren;
        while( k -- )
        {
            mc.removeChildAt( k );
        }
    }
}

NOTE: don’t forget to put weak listener references to on any event listeners that may be attached to said children so that garbage collection can ensure that they’re taken out of memory.

Need special characters/formatting of HTML in Flash but Flash isn’t behaving?

Sara — Thu, 19 May 2011 19:28:05 +0000

Ran into a situation where I was bringing in HTML dynamically and needed to format it in a certain way. Flash still has some limitations so I came up with a quick and dirty way after seeing a trick:

private function replaceToBullets(text:String):String
{
if (null == text) return “”;
var text:String = text = text.replace(/

/gi, ‘bulletpointNumber; ‘);
text = text.replace(/

/gi, ‘’);
text = text.replace(/<\/h2>/gi, ‘’);
text = text.replace(//gi, ‘

’);
return text;
}

Superscript and Subscript:

public static function formatForDisplay(text:String):String
{
if (null == text) return “”;
text = text.replace(/_{/gi, ‘’);

text = text.replace(/<\/sub>/gi, ‘’);

text = text.replace(/^{/gi, ‘’);

text = text.replace(/<\/sup>/gi, ‘’);}}

return text;
}

Quick way to set properties all children of a movie clip

Sara — Wed, 18 May 2011 19:31:47 +0000


for(i in mYears)
	{
		if(typeof(mYears[i])=="movieclip")
		mYears[i]._alpha = 0;
	}

AND then use same code set up to cycle through children, applying Tween:


var counter:Number=0;
	for(i in mYears)
	{
		if(typeof(mYears[i])=="movieclip")
		{
			TweenLite.to(mYears[i], 0.5, {_alpha:100,
                               delay:2.5+(counter*(0.25))});
			counter++;
		}
	}