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); } }