By Zevan | April 14, 2009
Actionscript:
-
var size:Array = [1, 1.5, .5, 1, .4, 1, 1, 1, .2, 1.1]
-
var boxes:Array = new Array();
-
var spacing:Number = 4;
-
var container:Sprite = Sprite(addChild(new Sprite()));
-
container.x = container.y = 100;
-
-
for (var i:int = 0; i<size.length; i++){
-
var box:Sprite = makeBox();
-
var prev:int = i - 1;
-
box.scaleX= box.scaleY = size[i];
-
if (i == 0){
-
box.y = 10;
-
}else{
-
// here's the trick
-
// if you animate the height property you need to do this again and again:
-
box.y = boxes[prev].y + boxes[prev].height/2+ box.height/2 + spacing
-
}
-
boxes.push(box);
-
}
-
-
function makeBox():Sprite{
-
var box:Sprite = Sprite(container.addChild(new Sprite()));
-
with (box.graphics) beginFill(0xFF0000), drawRect(-50,-10, 100, 20);
-
return box;
-
}
Sometimes you need to position a bunch of Sprites or MovieClips that are different sizes - and you want to keep the spacing between them the same. This snippet shows a simple example of this.
For more info you could also do this tutorial that I wrote on learningactionscript3.com
Also posted in misc | Tagged actionscript, flash |
Actionscript:
-
var thumbNum:Number = 20;
-
var spacing:Number = 10;
-
var thumbs:MovieClip = new MovieClip();
-
addChild(thumbs);
-
for (var i:int = 0; i<thumbNum; i++){
-
var t:MovieClip = new MovieClip();
-
with(t.graphics) beginFill(0x666666), drawRect(0,0,100,50);
-
t.x = i * (t.width + spacing);
-
t.y = 5;
-
t.buttonMode = true;
-
thumbs.addChild(t);
-
}
-
var minX:Number = stage.stageWidth - thumbs.width - spacing;
-
var destX:Number = thumbs.x = spacing;
-
var velX:Number = 10;
-
var stageThird:Number = stage.stageWidth / 3;
-
var right:Number = stageThird * 2;
-
var left:Number = stageThird;
-
addEventListener(Event.ENTER_FRAME, onLoop);
-
function onLoop(evt:Event):void {
-
if (mouseX> right){
-
destX -= velX;
-
}
-
if (mouseX <left){
-
destX += velX;
-
}
-
if (destX <minX){
-
destX = minX;
-
}
-
if (destX> spacing){
-
destX = spacing;
-
}
-
thumbs.x += (destX - thumbs.x) /4;
-
}
This snippet shows a technique for a common type of navigation.
Also posted in motion | Tagged actionsnippet, flash |
By Zevan | February 21, 2009
Actionscript:
-
[SWF(width = 600, height = 400)]
-
-
// draw the same grid as yesterday
-
var tileSize:int = 40;
-
var cols:int = stage.stageWidth / tileSize;
-
var rows:int = stage.stageHeight / tileSize;
-
var grid:Sprite = Sprite(addChild(new Sprite()));
-
grid.graphics.lineStyle(0,0x000000);
-
var i:int = 0;
-
for (i = 1; i<cols; i++){
-
var posX:Number = i * tileSize
-
grid.graphics.moveTo(posX, 0);
-
grid.graphics.lineTo(posX, stage.stageHeight);
-
}
-
for (i = 1; i<rows; i++){
-
var posY:Number = i * tileSize
-
grid.graphics.moveTo(0, posY);
-
grid.graphics.lineTo(stage.stageWidth, posY);
-
}
-
-
//
-
// -- add a circle that snaps to the grid when dragged
-
//
-
var circle:Sprite = Sprite(addChild(new Sprite()));
-
with (circle.graphics) beginFill(0xFF0000), drawCircle(0,0,10);
-
circle.x = circle.y = tileSize * 3;
-
circle.buttonMode = true;
-
-
circle.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
-
function onDown(evt:MouseEvent):void {
-
addEventListener(Event.ENTER_FRAME, onRunSnapping);
-
}
-
-
function onRunSnapping(evt:Event):void {
-
circle.x = Math.round(mouseX / tileSize) * tileSize;
-
circle.y = Math.round(mouseY / tileSize) * tileSize;
-
}
-
-
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
-
function onUp(evt:MouseEvent):void {
-
removeEventListener(Event.ENTER_FRAME, onRunSnapping);
-
}
This builds on yesterdays post by adding a draggable red circle that snaps to the grid. This is the real trick:
Actionscript:
-
circle.x = Math.round(mouseX / tileSize) * tileSize;
-
circle.y = Math.round(mouseY / tileSize) * tileSize;
Also posted in Graphics, motion | Tagged actionscript, flash |
By Zevan | February 18, 2009
Actionscript:
-
var angOffset:Number = 0;
-
var percent:Number = 0;
-
-
var dial:Sprite = Sprite(addChild(new Sprite()));
-
with(dial.graphics) lineStyle(1, 0x000000), beginFill(0xCCCCCC), drawCircle(0,0,100), lineTo(0,0);
-
dial.x = stage.stageWidth / 2;
-
dial.y = stage.stageHeight / 2;
-
-
dial.addEventListener(MouseEvent.MOUSE_DOWN, onDialDown);
-
stage.addEventListener(MouseEvent.MOUSE_UP, onStageUp);
-
function onDialDown(evt:MouseEvent):void {
-
calcOffset();
-
dial.addEventListener(Event.ENTER_FRAME, onRotateDial);
-
}
-
-
function calcOffset():void {
-
angOffset = Math.atan2(mouseY - dial.y, mouseX - dial.x) / Math.PI * 180 - dial.rotation;
-
}
-
-
function onRotateDial(evt:Event):void {
-
dial.rotation = Math.atan2(mouseY - dial.y, mouseX - dial.x) / Math.PI * 180 - angOffset;
-
percent = dial.rotation;
-
if (percent <0){
-
percent += 360;
-
}
-
percent /= 360;
-
// range 0 - 1
-
trace(percent);
-
}
-
-
function onStageUp(evt:Event):void {
-
dial.removeEventListener(Event.ENTER_FRAME, onRotateDial);
-
}
The above shows the meat of what you need to create some kind of dial UI... this would also work well if you need to create an interactive turntable (record scratching etc...).
Everytime I needed to create dials for UI, the client wanted left -> right mouse motion rather than a circular... like what you see in Reason. Someone recently asked me how to do a circular motion style dial and this is the technique I came up with.
Posted in UI | Tagged actionscript, flash |