Demonstrates basic "Sprite" clipping inside a single canvas, with StrikeDisplay.
BASIC CLIPPING...
var root = new StrikeDisplay("main","#000000",30,false);
var wid = root.stage.stageWidth;
var hei = root.stage.stageHeight;
var bg = new Sprite();
bg.graphics.drawImage("bg","gradientbg.jpg");
root.stage.addChild(bg);
var bg2 = new Sprite();
bg2.graphics.drawImage("bg","gradientbg.jpg");
bg2.alpha = .3;
root.stage.addChildAt(bg2,0);
var circs = new Sprite(); var numcircs = 20; var rad = 120; circs.x = circs.y = 150; bg.clippingSprite = circs;
function circDraw(evt) {
circs.graphics.clear();
circs.graphics.beginFill("#333333",1);
for (var i = 0;i<numcircs;i++) {
circs.graphics.drawCircle(Math.cos(i*Math.PI*2/numcircs)*rad,Math.sin(i*Math.PI*2/numcircs)*rad,10);
}
}
root.stage.addEventListener("enterFrame",loop);
var dir = -1;
function loop(evt) {
rad+=dir;
circs.rotation+=dir*3;
circDraw();
if (rad<1 || rad>120) {
dir*=-1;
}
}
function setClip() {
var c = document.getElementById('clip').checked;
if (c) {
bg.clippingSprite = circs;
} else {
bg.clippingSprite = null;
bg.addChild(circs);
}
}