How to beginBitmapFill without repeats?(AS3) - actionscript-3

my code:
myCircle = new Shape();
function doStuffWithBitmapData(bmd:BitmapData):void
{
myCircle = new Shape();
var matrix:Matrix = new Matrix();
matrix.translate(0, 0);
myCircle.graphics.beginBitmapFill(bmd, matrix, false);
myCircle.graphics.drawCircle(0, 0, 17);
myCircle.graphics.endFill();
myCircle.x = 40;
myCircle.y = 63;
addChild(myCircle);
// your code
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(e:Event)
{
myCircle.rotation += 3;
}
I need to fill the circle with image , but the image is repeating many times, but if I set the repeat to false, the picture will be bigger, can I make no repeat and at the same time don't change the sizes of the filled image?

i'm not too sure of the the bitmapfill method, but creating your own bitmap and bitmapData, and then using your image's bitmapdata, you can manipulate the image pixel/data anyway you like.
-Using the setPixel/setPixel32 method of the bitmapData class will be helpful in your task (google is your friend)
Adobe's help: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/BitmapData.html

Please look closely at the draw() method of BitmapData Class Documents. It is very important.
and refer a following code.
import flash.display.BitmapData;
import flash.display.Shape;
import flash.display.Bitmap;
var myCircle:Shape;
var bmd:BitmapData = new BitmapData(600,400,false,0xffffff);
var bmp:Bitmap = new Bitmap(bmd);
this.addChild(bmp);
var circleBitmapData:BitmapData = new BitmapData(20,20,false,0xffffff * Math.random());
myCircle = new Shape();
var matrix:Matrix = new Matrix();
myCircle.graphics.beginBitmapFill(circleBitmapData);
myCircle.graphics.drawCircle(0, 0, 20);
myCircle.graphics.endFill();
myCircle.x = 40;
myCircle.y = 63;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(e:Event)
{
bmd.draw(myCircle, myCircle.transform.matrix, myCircle.transform.colorTransform);
myCircle.x = Math.random() * stage.width;
myCircle.y = Math.random() * stage.height;
}

Related

(Actionscript 3) Pixel-perfect collision detection between the walls and player?

I am trying to make a flash game in which there is collision detection between the player and the walls. However, when I try using Wall11.hitTestPoint(), I cannot get the collision detection to be perfect. Then, I decided to use bitmap but it is hard to code this because the wall is irregularly shaped (it is not a square, rectangle, circle or any regular shape). Is there anyway to improve the collision detection with walls?
function checkCollision(_debug:Boolean = false):Boolean {
var bmd1:BitmapData = new BitmapData(Wall11.width, Wall11.height, true, 0);
var bmd2:BitmapData = new BitmapData(LevelOnePlayer.width, LevelOnePlayer.height, true, 0);
bmd1.draw(Wall11);
bmd2.draw(LevelOnePlayer);
if (_debug) {
var bmp:Bitmap = new Bitmap(bmd1);
bmp.x = Wall11.x;
bmp.y = Wall11.y;
addChild(bmp);
var bmp2:Bitmap = new Bitmap(bmd2);
bmp2.x = LevelOnePlayer.x;
bmp2.y = LevelOnePlayer.y;
addChild(bmp2);
}
if(bmd1.hitTest(new Point(Wall11.x, Wall11.y), 255, bmd2, new Point(LevelOnePlayer.x, LevelOnePlayer.y), 255))
return true;
if (!_debug) {
bmd1.dispose();
bmd2.dispose();
}
return false;
}
These are basics of hitTestPoint stuff.
package
{
import flash.geom.Point;
import flash.events.Event;
import flash.display.Shape;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
public class HitTest extends Sprite
{
private var textArea:TextField;
private var Circle:Shape;
private var Box:Shape;
public function HitTest()
{
if (stage) onStage();
else addEventListener(Event.ADDED_TO_STAGE, onStage);
}
private function onStage(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, onStage);
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.showDefaultContextMenu = false;
stage.align = StageAlign.TOP_LEFT;
stage.stageFocusRect = false;
addShapes();
addLabel();
onFrame();
// Call it every frame to keep things updated.
addEventListener(Event.ENTER_FRAME, onFrame);
}
private function onFrame(e:Event = null):void
{
// Place graphics to the center of the stage.
x = stage.stageWidth >> 1;
y = stage.stageHeight >> 1;
// Lets detect collision with the circle.
var aPoint:Point = new Point();
// Take local mouse coordinates within the target shape.
aPoint.x = Circle.mouseX;
aPoint.y = Circle.mouseY;
// Convert them into the root coordinates - it is the ONLY correct way.
// Comment the next 2 lines to see how local coordinates fail to work.
aPoint = Circle.localToGlobal(aPoint);
aPoint = root.globalToLocal(aPoint);
// Hit test the point against shape.
// Set the last parameter to false to see hitTest against the shape bounding box.
var aHit:Boolean = Circle.hitTestPoint(aPoint.x, aPoint.y, true);
textArea.text = aHit? "! HIT !": "NO HIT";
}
private function addShapes():void
{
Circle = new Shape();
Circle.graphics.lineStyle(2, 0x000000, 1);
Circle.graphics.beginFill(0xCC99FF, 1);
Circle.graphics.drawCircle(0, 0, 50);
Circle.graphics.endFill();
Box = new Shape();
Box.graphics.lineStyle(0, 0xCCCCCC, 1);
Box.graphics.drawRect(-50, -50, 100, 100);
addChild(Box);
addChild(Circle);
}
private function addLabel():void
{
textArea = new TextField();
textArea.x = 10;
textArea.y = 10;
textArea.width = 70;
textArea.height = 20;
textArea.border = true;
textArea.wordWrap = false;
textArea.multiline = true;
textArea.selectable = true;
textArea.background = true;
textArea.mouseEnabled = false;
var aFormat:TextFormat;
aFormat = textArea.getTextFormat();
aFormat.font = "_typewriter";
aFormat.size = 12;
aFormat.bold = true;
aFormat.align = TextFormatAlign.CENTER;
textArea.setTextFormat(aFormat);
textArea.defaultTextFormat = aFormat;
stage.addChild(textArea);
textArea.text = "NO HIT";
}
}
}

Get a ByteArray from BitmapData in AS3

I would like to get a ByteArray from a BitmapData in AS3. I tried the following:
var ba:ByteArray = myBitmapData.getPixels(0,0);
It didn't work and I got this error ArgumentError: Error #1063: Argument count mismatch on flash.display::BitmapData/getPixels(). Expected 1, got 2.:
As Adobe said about BitmapData.getPixels : "Generates a byte array from a rectangular region of pixel data...", so your parameter should be a Rectangle object.
Take this example from Adobe.com :
import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.utils.ByteArray;
var bmd:BitmapData = new BitmapData(80, 40, true);
var seed:int = int(Math.random() * int.MAX_VALUE);
bmd.noise(seed);
var bounds:Rectangle = new Rectangle(0, 0, bmd.width, bmd.height);
var pixels:ByteArray = bmd.getPixels(bounds);
As was mentioned in the other answer, getpixels expects a .rect meaning rectangular area of some displayObject (like Sprite, MovieClip, Shape or other already exisiting BitmapData.
getPixels(). Expected 1, got 2. is becuase it should have been:
var ba:ByteArray = myBitmapData.getPixels( myBitmapData.rect);
Study this code and see if it helps you :
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.Event;
import flash.net.URLRequest;
import flash.display.BitmapData;
var ba:ByteArray = new ByteArray;
var picBMP:Bitmap; var picBMD:BitmapData;
var pic_canvas:Sprite = new Sprite(); //container for image
var loader:Loader = new Loader(); //image loader
loader.load(new URLRequest("pic1.jpg")); //load some JPG/PNG/GIF/SWF
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, img_load_Complete);
function img_load_Complete(evt:Event):void
{
picBMP = loader.content as Bitmap;
pic_canvas.addChild(picBMP);
stage.addChild(pic_canvas); //container now added to stage (screen)
BMP_toBytes(); //do function to convert to bytes
}
function BMP_toBytes():void
{
var PC = pic_canvas; //shortcut reference to pic_canvas (less typing)
picBMD = new BitmapData(PC.width, PC.height, true, 0xFFFFFF);
picBMD.draw(PC); //make bitmapdata snapshot of container
ba = picBMD.getPixels(picBMD.rect);
trace("BA length : " + ba.length); //check how many bytes in there
ba.position = 0; //reset position to avoid "End of File error"
bytes_toPixels(); //do function for bytes as pixels to some new container
}
function bytes_toPixels():void
{
var new_BMP:Bitmap = new Bitmap; var new_BMD:BitmapData;
var new_canvas:Sprite = new Sprite(); //another new container for pixels
ba.position = 0; //reset position to avoid "End of File error"
//we can reuse picBMD W/H sizes since we have copy of same pixels
new_BMD = new BitmapData(picBMD.width, picBMD.height, true, 0xFFFFFFFF);
new_BMD.setPixels(new_BMD.rect, ba); //paste from BA bytes
new_BMP.bitmapData = new_BMD; //update Bitmap to hold new data
new_canvas.x = 150; new_canvas.y = 0; new_canvas.addChild(new_BMP);
stage.addChild(new_canvas); //add to screen
}
Hope it helps..

AS3: Pick color from object

I make some object and colored with Color Transform. Here's my code:
function createColorItems():void
{
for (var i:int = 0; i < colorLength; i++)
{
var myColor:Object = new colorArea ;
var colorTrans:ColorTransform = new ColorTransform ;
arrColorTrans[i] = myXML.bag.color.item[i];
arrItem.push(myColor);
arrItem[i].x = 40 * i + 40;
arrItem[i].y = 300;
addChild(arrItem[i]);
colorTrans.color = Number(arrColorTrans[i]);
arrItem[i].transform.colorTransform = colorTrans;
arrItem[i].addEventListener(MouseEvent.CLICK,changeColor);
}
}
This is where i change the color.
function changeColor():void
{
trace(e.target.color);
myBox.graphics.beginFill(0x000000,0.5);
myBox.graphics.drawRect(myImg.x,myImg.y,bagImg.width,bagImg.height);
myBox.graphics.endFill();
myBox.transform.colorTransform = publicColor;
addChild(myBox);
}
what i want is when the object is clicked, the other object's color is change. I trace it with trace(e.target.color) but it's wrong. i use publicColor to pick the color from colorTrans, but i don't know how to pick the color? is it possible??
Sorry for my bad grammar, please help.
You can use getPixel method of BitmapData. Here is a documentation. Example of using:
import flash.events.MouseEvent;
import flash.display.DisplayObject;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.geom.Matrix;
import flash.display.Sprite;
var s0:Sprite = new Sprite();
var s1:Sprite = new Sprite();
var testS:Sprite = new Sprite();
var bmd:BitmapData = new BitmapData(1,1);
s0.graphics.beginFill(0x010FFF);
s0.graphics.drawRect(0, 0, 100, 100);
s0.graphics.endFill();
s0.x = 200;
s0.y = 200;
s1.graphics.beginFill(0x555FFF);
s1.graphics.drawRect(0, 0, 100, 100);
s1.graphics.endFill();
s1.x = 300;
s1.y = 200;
addChild(s0);
addChild(s1);
addChild(testS);
addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(event:MouseEvent):void{
const clicked:DisplayObject = event.target as DisplayObject;
bmd.fillRect(bmd.rect, 0x000000);
bmd.draw(clicked, new Matrix(1, 0, 0, 1, clicked.x - mouseX, clicked.y - mouseY));
const color:uint = bmd.getPixel(0, 0);
testS.graphics.beginFill(color);
testS.graphics.drawRect(0, 0, 100, 100);
testS.graphics.endFill();
trace("color:" + color);
}
BitmapData.getPixel(x:int, y:int):uint
or
BitmapData.getPixel32(x:int, y:int):uint
Returns an ARGB color value that contains alpha channel data and RGB data.

positioning bitmapdata

I have the following code:
public function Application()
{
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
var urlRequest:URLRequest = new URLRequest("image/1.jpg");
loader.load(urlRequest);
addChild(loader);
}
private function completeHandler(e:Event):void{
loader.content.width = 800;
loader.content.scaleY = loader.content.scaleX;
piece = Math.round(loader.height/10);
drawBitmaps();
}
private function drawBitmaps():void{
var bmdata:BitmapData = new BitmapData(loader.width, piece, true, 0x000000);
bmdata.draw(loader);
var bitmap:Bitmap = new Bitmap(bmdata);
addChild(bitmap);
loader.visible = false;
}
the result is a bitmap wich contains a pice of the image. The height is 80. and it starts at the top of the image. But how can i tell the bitmapdata to start drawing the image from lets say 80pixels? so it draws a middle piece of the image? Because atm it allways draws from the top of the image.
You should use BitmapData::draw clipRect parameter.
Here is an example:
package {
import flash.geom.Rectangle;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Graphics;
import flash.display.Sprite;
public class BitmapDataTest extends Sprite {
public function BitmapDataTest() {
var c:Sprite = new Sprite();
var g:Graphics;
g = c.graphics;
g.beginFill(0xFF0000);
g.drawCircle(30,30,30);
g.endFill();
addChild(c);
c.x = 10;
c.y = 10;
var bmdata:BitmapData = new BitmapData(60, 60, true, 0x000000);
bmdata.draw(c,null,null,null, new Rectangle(0,30,30,30));
var bitmap:Bitmap = new Bitmap(bmdata);
addChild(bitmap);
bitmap.x = 80;
bitmap.y = 10;
}
}
}
Please notice that the target bitmap data should have the same dimensions as source or this won't work. If you really have to cut it down you should use BitmapData::copyPixels method.
The easiest way would be to apply a mask, dynamically. Here is a good example: Actionscript 3 and dynamic masks
You can create a rectangle, the height you're looking for and position it appropriately.
Hope this helps.

How to create a light effect inside a rectangle in Actionscript 3?

I have tried to do this here http://wonderfl.net/c/9Kdv but what I want is not this
alt text http://reboltutorial.com/images/flash-banner-trial.png
but rather the equivalent of this. As I'm flash newbie I don't see how:
(source: reboltutorial.com)
action script 3 code below:
package {
import flash.display.*;
import flash.text.*;
import flash.net.URLRequest;
import flash.filters.*;
import flash.geom.Rectangle;
public class FlashTest extends Sprite {
public function FlashTest() {
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0x400000);
mc.graphics.drawRoundRect(0, 0, 278, 170,25,25);
mc.graphics.endFill();
mc.x = 80;
mc.y = 60;
addChild(mc);
//from tut http://blog.0tutor.com/post.aspx?id=116
var filt:GlowFilter = new GlowFilter();
var filt_shadow:DropShadowFilter = new DropShadowFilter();
//here we add some properties to the two filters, the glow filter we give a color.
filt.color = 0xFF0000;
//and how much it should blur.
filt.blurX = 7;
filt.blurY = 7;
//then the dropshadow filter, also how much it should blur on the object.
filt_shadow.blurX = 4;
filt_shadow.blurY = 4;
//and finally an alpha, the alpha goes from 1 to 0, 1 being fully visible and 0 is transparent, then of cause .5 is just in between.
filt_shadow.alpha = .4;
mc.filters = [filt,filt_shadow];
var theTextField:TextField = new TextField();
theTextField.border = false;
theTextField.x = 30;
theTextField.y = 50;
theTextField.autoSize = TextFieldAutoSize.LEFT;
theTextField.text = "Experiment";
var myformat:TextFormat = new TextFormat();
myformat.color = 0xFFFFFF;
myformat.size =24;
myformat.align="center";
myformat.font = "Impact";
theTextField.setTextFormat(myformat);
mc.addChild(theTextField);
var url:String = "//www.rebol.com/graphics/reb-logo.gif";
var urlReq:URLRequest = new URLRequest(url);
var ldr:Loader = new Loader();
ldr.load(urlReq);
ldr.x=30;
ldr.y=88;
mc.addChild(ldr);
}
}
}
Instead of this line:
mc.graphics.beginFill(0x400000);
you can use beginGradientFill with the fillType set to GradientType.RADIAL. You would just need to adjust the focalPointRatio to make it offcenter. Check out the example in the docs for how to do this.