By Zevan | December 6, 2008
Actionscript:
-
var xp:Number=Math.random() * stage.stageWidth;
-
var yp:Number=Math.random() * stage.stageHeight;
-
graphics.lineStyle(0,0x000000);
-
graphics.moveTo(xp, yp);
-
addEventListener(Event.ENTER_FRAME, onLoop);
-
function onLoop(evt:Event):void {
-
xp+=Math.random()*10-5;
-
yp+=Math.random()*10-5;
-
graphics.lineTo(xp, yp);
-
}
Nothing special here, but its good to know that this technique has a name... and that it's NOT Brownian Motion... more here.
Posted in Graphics, motion | Also tagged flash, random walk |
By Zevan | December 4, 2008
Actionscript:
-
var phoneField:TextField = new TextField();
-
with (phoneField) {
-
type=TextFieldType.INPUT;
-
maxChars=12;
-
restrict="0-9";
-
border=true;
-
width=100;
-
height=20;
-
x=y=20;
-
}
-
addChild(phoneField);
-
-
phoneField.addEventListener(TextEvent.TEXT_INPUT, onInput);
-
-
function onInput(evt:TextEvent):void {
-
if (phoneField.length==3 || phoneField.length==7) {
-
phoneField.appendText("-");
-
var leng:int=phoneField.text.length;
-
phoneField.setSelection(leng, leng);
-
}
-
}
Quick way to make sure text input is formatted like a phone number.
By Zevan | December 3, 2008
Actionscript:
-
var canvas:BitmapData = new BitmapData(400,400,false, 0x000000);
-
addChild(new Bitmap(canvas));
-
-
addEventListener(Event.ENTER_FRAME, onLoop);
-
function onLoop(evt:Event):void {
-
canvas.perlinNoise(200,200, 2, 1, true, false,0, true,
-
[new Point(mouseX, mouseY),
-
new Point(-mouseX, -mouseY)]);
-
-
}
There area few snippets on the way that involve perlin noise. Starting here with something simple. This creates 2 octave perlin noise and moves each octave based on the mouse location.
Perlin noise was invented by Ken Perlin.
By Zevan | December 2, 2008
drawPath() is flash 10 player only
Actionscript:
-
[SWF(width=400,height=400,backgroundColor=0xEFEFEF,frameRate=30)]
-
-
const TWO_PI:Number = Math.PI * 2;
-
-
var resolution:Number = 50;
-
var step:Number = TWO_PI / resolution;
-
var maxIndex:int = 0;
-
-
var coords:Vector.<Number> = new Vector.<Number>();
-
var drawCommands:Vector.<int> = new Vector.<int>();
-
-
// populate vectors
-
for (var i:Number = 0; i <TWO_PI + step; i += step){
-
coords.push(100 * Math.cos(i));
-
coords.push(100 * Math.sin(i));
-
drawCommands.push(GraphicsPathCommand.LINE_TO);
-
}
-
-
var circleSegment:Shape = new Shape();
-
circleSegment.x = circleSegment.y = 200;
-
addChild(circleSegment);
-
-
addEventListener(Event.ENTER_FRAME, onLoop);
-
function onLoop(evt:Event):void {
-
with (circleSegment.graphics) {
-
clear();
-
beginFill(0x000000);
-
-
// count by two, up to coords.length (drawCommands is exactly half the length of coords)
-
maxIndex = Math.ceil((mouseX / stage.stageWidth) * drawCommands.length) * 2;
-
-
drawPath(drawCommands, coords.slice(0, maxIndex));
-
}
-
}
The new additions to the Drawing API are great. This is just a quick test done with drawPath() to create a circle segment - this technique could be used to draw a pie chart.
The old way would have required lots of calls to the Graphics.lineTo() method. Take a look:
Actionscript:
-
const TWO_PI:Number = Math.PI * 2;
-
-
var resolution:Number = 50;
-
var step:Number = TWO_PI / resolution;
-
var maxAngle:Number;
-
-
var circleSegment:Shape = new Shape();
-
circleSegment.x = circleSegment.y = 200;
-
addChild(circleSegment);
-
-
addEventListener(Event.ENTER_FRAME, onLoop);
-
function onLoop(evt:Event):void {
-
with (circleSegment.graphics) {
-
clear();
-
beginFill(0x000000);
-
-
// count up to (TWO_PI + step), we add step to close the circle
-
maxAngle = (TWO_PI + step) * (mouseX / stage.stageWidth);
-
-
for (var i:Number = 0; i <maxAngle; i += step) {
-
var xp:Number = 100 * Math.cos(i);
-
var yp:Number = 100 * Math.sin(i);
-
lineTo(xp, yp);
-
}
-
}
-
}
If your interested in learning more about the FP10 Drawing API features, you can read more here.