I just want to create a gradient mask –which is generated dynamically through AS3 code– for an object (a pentagon in my following example,) and I simply, cannot! [The SWF file of what I've tried.]
The code works just fine unless it ignores the alpha gradient of the dynamically created Sprite for being used as a gradient mask (it's being treated as a solid mask), while the exact code acknowledges the "on-stage" created object (through the user interface) for being a gradient mask!
I think the runtime just cannot cache the object as bitmap and hence the ignorance! However, I'm stuck at making that happen! So please, shed some lights on this, any help is greatly appreciated in advance :)
var X:Number = 100, Y:Number = 35, W:Number = 350, H:Number = 150;
var mat:Matrix = new Matrix();
mat.createGradientBox(W, H, 0, X, Y);
var gradientMask:Sprite = new Sprite();
gradientMask.graphics.beginGradientFill(GradientType.LINEAR, [0, 0], [1, 0], [0, 255], mat);
gradientMask.graphics.drawRect(X, Y, W, H);
gradientMask.graphics.endFill();
pentagon1.cacheAsBitmap = true;
pentagon2.cacheAsBitmap = true;
onStageGradient.cacheAsBitmap = true;
gradientMask.cacheAsBitmap = true;
pentagon1.mask = gradientMask;
pentagon2.mask = onStageGradient;
stage.addEventListener(Event.ENTER_FRAME, _onEnterFrame);
function _onEnterFrame(e:Event):void {
pentagon1.x += 7;
pentagon2.x += 7;
if (pentagon1.x > 500) {
pentagon1.x = 0;
pentagon2.x = 0;
}
}
You have to add the gradientMask to the display list to have it in effect.
pentagon1.parent.addChild(gradientMask);
Related
Hello there,
I'm making some tests with random color gradient tweenings (to use them as backgrounds). After trying different things, I've found a code here and slightly changed it into the one below, which unfortunately produces lots of lag (interfering with timers and so in the same class). I'm using the GreenSock TweenLite/TweenMax engine:
package{
//...
public class Main extends MovieClip{
var color1:uint = Math.floor(Math.random()*0xFFFFFF + 1);
var color2:uint = Math.floor(Math.random()*0xFFFFFF + 1);
var colors:Object = {left:color1, right:color2};
var newColor1:uint = Math.floor(Math.random()*0xFFFFFF + 1);
var newColor2:uint = Math.floor(Math.random()*0xFFFFFF + 1);
var newColors:Object = {left:newColor1, right:newColor2};
var mySprite:Sprite = new Sprite();
public function Main() {
mySprite.x = 0;
mySprite.y = 0;
stage.addChildAt(mySprite, 1);
drawGradient();
animateBackground();
//...
}
//...
function drawGradient(){
var m:Matrix = new Matrix();
m.createGradientBox(805, 485, 0, 0, 0);
mySprite.graphics.beginGradientFill(GradientType.LINEAR, [colors.left, colors.right], [1, 1], [0x00, 0xFF], m, SpreadMethod.REFLECT);
mySprite.graphics.drawRoundRect(0,0,805,485, 0);
stage.setChildIndex(mySprite, 1);
}
function animateBackground(){
TweenMax.to(colors, 3, {hexColors:{left:newColor1, right:newColor2}, onUpdate:drawGradient, onComplete:reRandomize});
}
function reRandomize(){
color1 = newColor1;
color2 = newColor2;
newColor1 = Math.floor(Math.random()*0xFFFFFF + 1);
newColor2 = Math.floor(Math.random()*0xFFFFFF + 1);
animateBackground();
}
Everything works fine, but the lag keeps increasing and increasing. To make yourself an idea, the swf, which was previously 36 kB large, rose up to 74 kB just with this color implementation.
I was wondering if there is any more efficient way to deal with this effect, or something particularly laggy in the code. Does anybody know a way? Any help would be awesome and greatly appreciated.
Thank you in advance!
NOTE: I know this is the cause of lag after several test with different things disabled, so it is very unlikely that the excessive lag is from another source.
You forgot clearing the old graphics from the mySprite, thus any extra commands produce layers upon layers of graphics on that sprite. Add mySprite.graphics.clear() call to drawGradient function prior to drawing another gradient, should do.
function drawGradient(){
var m:Matrix = new Matrix();
m.createGradientBox(805, 485, 0, 0, 0);
mySprite.graphics.clear(); // here
mySprite.graphics.beginGradientFill(GradientType.LINEAR, [colors.left, colors.right], [1, 1], [0x00, 0xFF], m, SpreadMethod.REFLECT);
mySprite.graphics.drawRoundRect(0,0,805,485, 0);
stage.setChildIndex(mySprite, 1);
}
I have been trying to convert a bitmap I've captured from a camera input into a vector to then convert the vectors points into an array for use later.
However I can not find any such functionality within Flash and so I've been trying to use 'Vectorization Package' created by Corey O'Neil. This seems to work but fails to remove the white background on my bitmap (I am capturing a picture of paper with a line on it). Even manually doing this and making the background transparent still yields no results.
Here is my code:
public class DocumentRich extends MovieClip{
public var initBox2D:Main;
var cam:Camera = Camera.getCamera();
var vid:Video = new Video(420, 300);
var myVector:Vectorize;
public function DocumentRich()
{
if(stage){
initBox2D = new Main();
addChild(initBox2D);
//addChild(new movieMonitor());
}
addEventListener(MouseEvent.CLICK, clickHandler, false, 0, true);
StartAnim();
}
function StartAnim():void
{
//SET UP WORLD
initBox2D.isDebugMode(false);
initBox2D.mouseDragEnabled(true);
Main.world.SetGravity(new b2Vec2(0,0));
cam.setQuality(0, 100);
cam.setMode(420, 300, 30, true);
trace(cam.height);
vid.attachCamera(cam);
addChild(vid);
addChild(go);
}
function clickHandler(m:MouseEvent){
trace(m.target.name);
switch(m.target.name){
case 'go':
goButtonFun();
break;
}
}
function goButtonFun():void{
var screenShot:BitmapData = new BitmapData(cam.width, cam.height);
var screenShot_image:Bitmap=new Bitmap(screenShot);
screenShot.draw(vid) ;
ReduceColors.reduceColors(screenShot, 0, true, false);
screenShot.colorTransform(new Rectangle(0, 0, screenShot.width, screenShot.height), new ColorTransform(2,2,2,1) );
///// --------- MAY NOT NEED THIS ----------- ////////////
for(var i:int = 0; i<screenShot.width; i++)
{
for(var j:int = 0; j<screenShot.height; j++)
{
if(screenShot.getPixel(i,j) == 0xffffff)
{
var transparent:uint = 0x00000000;
screenShot.setPixel32(i, j, transparent);
}
}
}
myVector = new Vectorize(screenShot_image, 23, 2, 1, 3, 0xFFFFFF);
myVector.addEventListener(Vectorize.INIT, traceStatus);
myVector.addEventListener(Vectorize.DESPECKLE_START, traceStatus);
myVector.addEventListener(Vectorize.DESPECKLE_COMPLETE, traceStatus);
myVector.addEventListener(Vectorize.GROUPING_START, traceStatus);
myVector.addEventListener(Vectorize.GROUPING_COMPLETE, traceStatus);
myVector.addEventListener(Vectorize.EDGING_START, traceStatus);
myVector.addEventListener(Vectorize.EDGING_COMPLETE, traceStatus);
myVector.addEventListener(Vectorize.DESPECKLE_PROGRESS, traceProgress);
myVector.addEventListener(Vectorize.GROUPING_PROGRESS, traceProgress);
myVector.addEventListener(Vectorize.EDGING_PROGRESS, traceProgress);
myVector.addEventListener(Vectorize.COMPLETE, showVector);
myVector.vectorize();
//addChild(screenShot_image);
addChild(go);
removeChild(vid);
cam = null;
vid.attachCamera(null);
vid = null;
}
function traceStatus(event:Event):void
{
trace(event.type);
}
function traceProgress(event:Event):void
{
var progress:int = event.target.percentDone * 100;
trace(event.type + ": " + progress + "%");
}
function showVector(event:Event):void
{
trace(event.type);
addChild(myVector);
}
}
Any suggestions?
Thanks.
UPDATE:
Sorry for any confusion, basically I would like a way to trace a transparent bitmap, and get an array of the points of the shape in said bitmap. An array of pixel data is simply too large... I'd like 4 points for a rectangle, regardless of it's size...
Apparently you are looking for BitmapData.getVector(). It's available from Flash player 10, so you should have it at your disposal.
EDIT: After I've reread your question, I understand you want your bitmap to be parsed into a vector - and a vector isn't an array of pixels, but instead a start and end of a certain line. Then yes, if you are capable of calling a threshold() so that the line's pixels will be of one color, and the background of another, you then can call getColorBoundsRect() and query all 4 corners of the rectangle. The ones which have the color of the line are your start and end coordinates, store these.
I'd like to be able to alter an image (specifically a bitmap) in order to replace all dark grey and black pixels with white in ActionScript 3, but maintain all other colors in the image. I am familiar with ColorMatrixFilter and bitmapdata.threshold, but I don't know how to use them to either target the colors I want to remove or check within a specific range of colors. Is there any (efficient) way to go about doing this?
Thanks for any help you can offer.
The AS3 API gives pretty good documentation on how to use the treshhold value. You can find it here. Their example actually checks for a certain range of colors. I've modified their example to work for your problem. I haven't tested it, so it might need some tweaking.
var bmd2:BitmapData = new BitmapData(200, 200, true, 0xFFCCCCCC);
var pt:Point = new Point(0, 0);
var rect:Rectangle = new Rectangle(0, 0, 200, 200);
var threshold:uint = 0x00A9A9A9; //Dark Grey
var color:uint = 0x00000000; //Replacement color (white)
var maskColor:uint = 0xFFFFFFFF; //What channels to affect (this is the default).
bmd2.threshold(bmd1, rect, pt, ">", threshold, color, maskColor, true);
Another option would be to use a double for loop that iterates over all pixels and takes a certain action based on the value of the pixel.
for(var y:int = 0; y < height; y++){
for(var x:int = 0; x < width; x++){
var currentPixel:uint = image.getPixel( x, y );
if(currentPixel != color){
image.setPixel( destPoint.x + j, destPoint.y + i, currentPixel );
}
}
}
I'm trying to do some augmented reality projects with flartoolkit . I can now put simple 3d objects on my marker and it works fine , but I wanna give my project some events that the user can interact with . I'm trying to trace the rotation of the marker. there's a container:DisplayObject3D which my application uses to add the 3d objects , I traced this :"trace(container.rotationZ)" but it's just returning 0 . I studied another AR application's source code and it was using the rotation of it's container object without problem .and I think I should mention that I'm using the exercise file of seb lee delisle papervision3d course from lynda.com . anyone has any experience with flartoolkit? the main functions of my my code is as below:
public function AR_AlchemyBase()
{
super(640,480, false);
cameraParams = FLARParam.getDefaultParam(WIDTH * 0.5, HEIGHT * 0.5);
marker = new FLARCode(16, 16);
marker.loadARPattFromFile(new MarkerPattern());
init();
}
public function init():void
{
video = new Video(WIDTH, HEIGHT);
webCam = Camera.getCamera();
webCam.setMode(WIDTH, HEIGHT, 30);
video.attachCamera(webCam);
video.smoothing = true;
camBitmapData = new BitmapData(WIDTH *0.5, HEIGHT * 0.5,false, 0x000000);
camBitmap = new Bitmap(camBitmapData);
camBitmap.scaleX = camBitmap.scaleY = 2;
addChildAt(camBitmap,0);
raster = new FLARRgbRaster(WIDTH *0.5, HEIGHT * 0.5);
detector = new FLARSingleMarkerDetector(cameraParams, marker, 80);
result = new FLARTransMatResult();
viewport.x = -4;
_camera = new FLARCamera3D(cameraParams);
container = new FLARMarkerNode();
scene.addChild(container);
addSceneObjects();
stage.addEventListener(Event.ENTER_FRAME, enterFrame);
}
//the function to put our objects in
public function addSceneObjects() : void
{
var wmat:WireframeMaterial = new WireframeMaterial(0xff0000, 1, 2);
wmat.doubleSided = true;
var plane : Plane = new Plane(wmat, 80, 80);
container.addChild(plane);
var light:PointLight3D = new PointLight3D();
light.x = 1000;
light.y = 1000;
light.z = -1000;
var fmat:FlatShadeMaterial = new FlatShadeMaterial(light, 0xff22aa, 0x0);
var cube : Cube = new Cube(new MaterialsList({all: fmat}), 40, 40, 40);
cube.z = -20;
container.addChild(cube);
}
public function enterFrame(e:Event):void
{
var scaleMatrix:Matrix = new Matrix();
scaleMatrix.scale(0.5, 0.5);
camBitmapData.draw(video, scaleMatrix);
raster.setBitmapData(camBitmapData);
counter++;
if(counter == 3) counter = 0;
var imageFound : Boolean = false
currentThreshold = threshold+ (((counter%3)-1)*thresholdVariance);
currentThreshold = (currentThreshold>255) ? 255 : (currentThreshold<0) ? 0 : currentThreshold;
imageFound = (detector.detectMarkerLite(raster, currentThreshold) && detector.getConfidence() > 0.5) ;
if(imageFound)
{
detector.getTransformMatrix(result);
container.setTransformMatrix(result);
container.visible = true;
threshold = currentThreshold;
thresholdVariance = 0;
if(onImageFound!=null) onImageFound();
}
else
{
if(counter==2) thresholdVariance +=2;
if(thresholdVariance>128 ) thresholdVariance = 1;
if(onImageLost!=null) onImageLost();
}
singleRender();
}
I might not be able to help with the main problem but If you want users to interact with the models you need to set their materials to be interactive, otherwise they don't receive mouse events. Regarding the rotation...I might be missing something but it's the instances inside the container thar you're applying the rotation to, not the the container itself?
This helped me with getting a simple PV3D example running:
PV3D Tutorial for basic interactivity
I would like to capture a small part of a canvas as a bitmap. Is that possible? This is so that I can replace it after I draw another bitmap on that area. Once I am done with the bitmap I would like to replace the small bit of canvas that I drew on with the original piece.
Thanks!
The drawImage() method of contexts allows you to use an existing canvas as the source. It also allows you to specify sub-regions of the source "image" to draw. You can also create a new canvas element programmatically. Combine these, and you can create your own offscreen buffers and blit to/from them without needing to go through getImageData()/putImageData() or data URLs.
I've put an example of this online.
Note that while the example happens to append the dynamically-created canvas to the document so that you can see it (line 29 of the source), this is not necessary. Canvas elements created in the document function whether attached to the hierarchy or not.
In short:
function copyCanvasRegionToBuffer( canvas, x, y, w, h, bufferCanvas ){
if (!bufferCanvas) bufferCanvas = document.createElement('canvas');
bufferCanvas.width = w;
bufferCanvas.height = h;
bufferCanvas.getContext('2d').drawImage( canvas, x, y, w, h, 0, 0, w, h );
return bufferCanvas;
}
Edit: I benchmarked this technique versus getImageData/putImageData; if speed is important, use drawImage for blitting regions. Here's what I saw:
(source: phrogz.net)
Benchmarks performed by saving and restoring a 125x180 region 10,000 times on OS X on a 2.8GHz Core i7 MacBook Pro. Your mileage may vary. Specifically, saving/restoring regions that are either much larger or smaller may result in different relative performance.
you can do this using .getImageData() and .putImageData()
Example
var canvas, ctx, img, imgd, col;
window.onload = function () {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
col = {
0: '#000',
.25: '#0099f9',
.55: '#03f',
1: '#000'
};
img = document.getElementById('img');
var w = h = canvas.width = canvas.height = 200;
var grad = ctx.createRadialGradient(w / 2, w / 2, 0, w / 2, w / 2, h);
for (var i in col) {
grad.addColorStop(i, col[i]); //just a funny mess, please don't bother :)
}
ctx.fillStyle = grad;
ctx.fillRect(0, 0, w, h);
imgd = ctx.getImageData(50, 50, 20, 20); //caching the image Data
}
function draw() {
ctx.drawImage(img, 50, 50, 20, 20); //drawing Image on to canvas
}
function redraw() {
ctx.putImageData(imgd, 50, 50, 20, 20); //redraw the cached Image Data
}
and a simple Online Example, just you :)
Try it Here
have a look at a similar question here How to Copy Contents of One Canvas to Another Canvas Locally
What i suggest is write somthing like
var canvas1 = document.getElementById('canvas1');
var src = canvas1.toDataURL("image/png"); // cache the image data source`
to save image in a variable and then retrive it later with
var img = document.createElement('img'); // create a Image Element
img.src = src; //image source
var ctx1 = canvas1.getContext('2d');
ctx2.drawImage(img, 0, 0); // drawing image onto second canvas element
Taken from here