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.
Related
I'm trying to make a program that pulses to the beat of a song, with a wave pattern on top, but the wave pattern seems to be behind everything. I know how to change the index of a child added to the stage, but I have no clue on how to set the index value of a graphic. Here's my code(if relevant):
import flash.display.Sprite;
import flash.display.Graphics;
import flash.events.Event;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.media.SoundMixer;
import flash.net.URLRequest;
import flash.utils.ByteArray;
import flash.text.TextField;
var snd:Sound = new Sound();
var req:URLRequest = new URLRequest("SuperHexagonMusic.mp3");
var channel:SoundChannel;
stage.addEventListener(Event.ENTER_FRAME, everyFrame);
snd.load(req);
channel = snd.play();
channel.addEventListener(Event.SOUND_COMPLETE, onPlaybackComplete);
function everyFrame(event:Event):void
{
pulse.alpha = channel.leftPeak * 3;
var bytes:ByteArray = new ByteArray();
const PLOT_HEIGHT:int = 200;
const CHANNEL_LENGTH:int = 256;
SoundMixer.computeSpectrum(bytes, false, 0);
var g:Graphics = this.graphics;
g.clear();
g.lineStyle(0, 0x000000);
g.beginFill(0x000000);
g.moveTo(0, PLOT_HEIGHT);
var n:Number = 0;
for (var i:int = 0; i < CHANNEL_LENGTH; i++)
{
n = (bytes.readFloat() * PLOT_HEIGHT);
g.lineTo(i * 2.5, PLOT_HEIGHT - n);
}
g.lineTo(CHANNEL_LENGTH * 2.5, PLOT_HEIGHT);
g.endFill();
g.lineStyle(0, 0xFFFFFF);
g.beginFill(0xFFFFFF, 0.5);
g.moveTo(CHANNEL_LENGTH * 2.5, PLOT_HEIGHT);
for (i = CHANNEL_LENGTH; i > 0; i--)
{
n = (bytes.readFloat() * PLOT_HEIGHT);
g.lineTo(i * 2.5, PLOT_HEIGHT - n);
}
g.lineTo(0, PLOT_HEIGHT);
g.endFill();
}
function onPlaybackComplete(event:Event):void
{
stage.removeEventListener(Event.ENTER_FRAME, everyFrame);
}
What I'm hoping for is the constructed wave pattern to be on top of the pulse, but the current code produces this result:
In the image, you can see the end of the wave pattern poking out behind the pulse.
So in short: How might I bring that wave pattern to the front?
The parent's Graphics is always behind all parent's children. You should make yourself another Sprite or Shape object, place it on top of your display list, and draw on its graphics instead.
var spectrum:Shape=new Shape();
addChild(spectrum); // if last added, will be on top
function everyFrame(e:Event):void {
var g:Graphics=spectrum.graphics; // that's all you need to change!
// the rest of code follows
}
I converted a movieclip with a lot of unused space into a bitmap, but it seems alike that many white pixels have been added to the bitmap during the conversion so the background wont be displayed properly.
My question is how to remove the background the smartest way...
remove every single white pixel and if so how to do it?
generate a alphamap from the movieclip if possible how to?
or some other way that I dont know about?
thx in advance =)
refer a following code. this code is if pixel is white color, convert to transparent color.
for(var i:int = 0; i<myBitmapData.width; i++)
{
for(var j:int = 0; j<myBitmapData.height; j++)
{
if(myBitmapData.getPixel(i,j) == 0xffffff)
{
var transparent:uint = 0x00000000;
myBitmapData.setPixel32(i, j, transparent);
}
}
}
you've checked following code. before tested, must stage of change the color to Red or Blue or Green... you want.
import flash.display.Sprite;
import flash.events.Event;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.events.MouseEvent;
var brush:Sprite =new Sprite();
brush.graphics.beginFill(0xffffff);
brush.graphics.drawRect(0,0,100,100);
brush.graphics.endFill();
//addChild(brush);
var myBitmap:Bitmap = new Bitmap(convertToBitmap(brush));
var bmd:BitmapData = myBitmap.bitmapData;
addChild(myBitmap);
for(var i:int = 0; i<bmd.width; i++)
{
for(var j:int = 0; j<bmd.height; j++)
{
if(bmd.getPixel(i,j) == 0xffffff)
{
var transparent_color:uint = 0x00000000;
bmd.setPixel32(i, j, transparent_color);
}
}
}
function convertToBitmap( clip:DisplayObject ):BitmapData
{
var bounds:Rectangle = clip.getBounds( clip );
var bitmap:BitmapData = new BitmapData( int( bounds.width + 0.5 ), int( bounds.height + 0.5 ), true, 0 );
bitmap.draw( clip, new Matrix(1,0,0,1,-bounds.x,-bounds.y) );
return bitmap;
}
Another way is when creating your BitmapData object, to use a fill with an ARGB color who's alpha is 0. This way you don't have to iterate over the BitmapData and set each pixel as in #bitmapdata's answer.
var bitmapData:BitmapData = new BitmapData(100, 100, true, 0x00000000);
Here's a sample app that shows this in effect:
package
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Graphics;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
public class TestAS3 extends Sprite
{
private var drawingObject:Sprite = new Sprite();
private var bitmap:Bitmap = new Bitmap();
private var backgroundObject:Sprite = new Sprite();
public function TestAS3()
{
super();
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
// draw something on the background, so we can verify the
// bitmap has transparency
var g:Graphics = backgroundObject.graphics;
g.beginFill(0xFF0000);
g.drawRect(0,0,200,200);
g.endFill();
addChild(backgroundObject);
// draw a black circle so we can make a bitmap out of it
g = drawingObject.graphics;
g.beginFill(0);
g.drawCircle(100,100,50);
g.endFill();
// create the bitmap data
// note use an ARGB color (here color is black, alpha is 0)
// to default the BitmapData to a transparent fill
var bmd:BitmapData = new BitmapData(200,200,true,0x00000000);
bmd.draw(drawingObject);
bitmap.bitmapData=bmd;
addChild(bitmap);
}
}
}
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;
}
I want to be able to write a paragraph in a textfield, and then click and hold, or do some similar gesture, and have the entire paragraph selected. I'm then going to drag it (using bitmapdata or whatever) to another textfield.
In order to do this, I need to be able to detect where a given paragraph ends. So I'm trying to do that with the following code, which searches for "\n" in the text. It isn't finding it. Can anyone see why (or suggest another technique for doing this)?
TIA,
David
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFieldType;
import view.controls.CustomButton;
public class Main extends Sprite
{
private var bt:CustomButton;
private var tf:TextField;
public function Main()
{
tf = new TextField();
tf.name = "tfield";
tf.type = TextFieldType.INPUT;
tf.width = 400;
tf.height = 200;
tf.x = 100;
tf.y = 100;
tf.selectable = true;
tf.border = true;
tf.background = true;
tf.backgroundColor = 0xFFFFFF;
tf.multiline = true;
tf.text = "Like most of the things I get excited about and share with you, this technique really doesn’t have much to it, but I love its elegance, how it works in the background and gets out of your way. While it’s really simple I think this one is a real gem, ’cause when you look at a class that uses it, it looks like magic!\n\nOkay, so you know how when you’re writing a site or app that’s of a small to medium scale, you default to storing data in XML, and you map that XML to model classes, usually pretty directly? Or, maybe you use a configuration file for your site to load in some constants or something, and XML is a pretty easy choice for this. With E4X you can really parse through that XML quickly.";
tf.wordWrap = true;
addChild(tf);
bt = new CustomButton("Detect", 0xFFFFFF, 0x000000,50,20);
bt.x = 250;
bt.y = 350;
addChild(bt);
addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event):void
{
bt.addEventListener(MouseEvent.CLICK, clickHandler);
}
private function clickHandler(e:MouseEvent):void
{
var lineBreak:int = tf.text.indexOf("\n");
trace(lineBreak);
}
}
}
//custom button class
package view.controls
{
import flash.display.GradientType;
import flash.display.SimpleButton;
import flash.display.Sprite;
import flash.display.Stage;
import flash.events.Event;
import flash.geom.Matrix;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
public class CustomButton extends Sprite
{
private var textColor:uint = 0x000000;
private var myColor:uint = 0xFEEE9E9;
private var btnWidth:Number;
private var btnHeight:Number;
public function CustomButton(buttonText:String, gradientColor:uint, borderColor:uint, myBtnWidth:Number, myBtnHeight:Number)
{
var colors:Array = new Array();
var alphas:Array = new Array(1, 1);
var ratios:Array = new Array(0, 255);
var gradientMatrix:Matrix = new Matrix();
var lineThickness:Number = 1;
//var myColor:uint = 0xFF0000;
gradientMatrix.createGradientBox(myBtnWidth, myBtnHeight, Math.PI/2, 0, 0);
this.btnWidth = myBtnWidth;
this.btnHeight = myBtnHeight;
var ellipseSize:int = 20;
var btnUpState:Sprite = new Sprite();
colors = [0xFFFFFF, myColor];
//btnUpState.graphics.lineStyle(1, brightencolor(myColor, -500));
btnUpState.graphics.lineStyle(lineThickness, borderColor);
btnUpState.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, gradientMatrix);
btnUpState.graphics.drawRoundRect(0, 0, myBtnWidth, myBtnHeight, ellipseSize, ellipseSize);
btnUpState.addChild(createButtonTextField(buttonText, textColor));
//
var btnOverState:Sprite = new Sprite();
colors = [0xFFFFFF, brightencolor(myColor, 50)];
//btnOverState.graphics.lineStyle(1, brightencolor(myColor, -50));
btnOverState.graphics.lineStyle(lineThickness, borderColor);
btnOverState.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, gradientMatrix);
btnOverState.graphics.drawRoundRect(0, 0, myBtnWidth, myBtnHeight, ellipseSize, ellipseSize);
btnOverState.addChild(createButtonTextField(buttonText, textColor))
//
var btnDownState:Sprite = new Sprite();
//colors = [brightencolor(myColor, -15), brightencolor(myColor, 50)];
btnDownState.graphics.lineStyle(lineThickness, borderColor);
btnDownState.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, gradientMatrix);
btnDownState.graphics.drawRoundRect(0, 0, myBtnWidth, myBtnHeight, ellipseSize, ellipseSize);
btnDownState.addChild(createButtonTextField(buttonText, textColor))
//
this.btnWidth = myBtnWidth;
this.btnHeight = myBtnHeight;
var myButton:SimpleButton = new SimpleButton(btnUpState, btnOverState, btnDownState, btnOverState);
myButton.name = buttonText;
addChild(myButton);
}
private function createButtonTextField(Text:String, textcolor:uint):TextField {
var myTextField:TextField = new TextField();
myTextField.textColor = textcolor;
myTextField.selectable = false;
myTextField.width = btnWidth;
myTextField.height = btnHeight;
var myTextFormat:TextFormat = new TextFormat();
myTextFormat.align = TextFormatAlign.CENTER;
myTextFormat.font = "Arial";
myTextFormat.size = 12;
myTextField.defaultTextFormat = myTextFormat;
myTextField.text = Text;
myTextField.x = (btnWidth/2)-(myTextField.width/2);
myTextField.y = 1;
return myTextField;
}
private function brightencolor(color:int, modifier:int):int {
var hex:Array = hexToRGB(color);
var red:int = keepInBounds(hex[0]+modifier);
var green:int = keepInBounds(hex[1]+modifier);
var blue:int = keepInBounds(hex[2]+modifier);
return RGBToHex(red, green, blue);
}
private function hexToRGB (hex:uint):Array {
var colors:Array = new Array();
colors.push(hex >> 16);
var temp:uint = hex ^ colors[0] << 16;
colors.push(temp >> 8);
colors.push(temp ^ colors[1] << 8);
return colors;
}
private function keepInBounds(number:int):int {
if (number < 0) number = 0;
if (number > 255) number = 255;
return number;
}
private function RGBToHex(uR:int, uG:int, uB:int):int {
var uColor:uint;
uColor = (uR & 255) << 16;
uColor += (uG & 255) << 8;
uColor += (uB & 255);
return uColor;
}
}
}
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.display.Sprite;
import flash.events.MouseEvent;
var tf:TextField = new TextField();
tf.type = TextFieldType.INPUT;
tf.width = 400;
tf.height = 200;
tf.x = stage.stageWidth / 2 - tf.width / 2;
tf.y = stage.stageHeight / 2 - tf.height / 2;
tf.selectable = true;
tf.border = true;
tf.background = true;
tf.backgroundColor = 0xCCCCCC;
tf.multiline = true;
tf.wordWrap = true;
tf.text = "Enter text here, hit enter to create new paragraphs."
stage.addChild(tf);
var pushme:Sprite = new Sprite();
pushme.graphics.beginFill(0xCCCCCC, 1);
pushme.graphics.drawRect(0, 0, 100, 25);
pushme.graphics.endFill();
pushme.buttonMode = true;
pushme.addEventListener(MouseEvent.CLICK, pushedme);
pushme.x = tf.x + tf.width - pushme.width;
pushme.y = tf.y + tf.height + 15;
stage.addChild(pushme);
function pushedme(e:MouseEvent):void {
var paragraphCounter:int = 1;
var curParagraphOffset:int = -1;
for (var i:int = 0; i < tf.numLines; i++) {
if (tf.getFirstCharInParagraph(tf.getLineOffset(i)) == tf.getLineOffset(i) && tf.getFirstCharInParagraph(tf.getLineOffset(i)) > curParagraphOffset) {
trace("Paragraph " + paragraphCounter + " text: \n" + tf.text.substr(tf.getFirstCharInParagraph(tf.getLineOffset(i)), tf.getParagraphLength(tf.getFirstCharInParagraph(tf.getLineOffset(i)))));
paragraphCounter++;
curParagraphOffset = tf.getFirstCharInParagraph(tf.getLineOffset(i));
}
}
}
Paragraph Detection
Step by step
You can probably take it from here and ignore the empty paragraphs, but to explain:
Setup textfield, input more text manually (as shown)
Create the button to check for paragraphs
Set paragraph counter to 1 so it outputs properly for the first detected paragraph
Paragraph offset needs to be -1 for the if statement to be satisfied for the first iteration as the first paragraph should be at character 0
If the first character in the paragraph is also the first character on this line and we're not part of the previous paragraph, we have a new paragraph on this line.
Output the paragraph text based on the first character and the length of the paragraph by taking a substring of the tf.text property.
Increment paragraphCounter and set the curParagraphOffset to the new first character index.
If you want to be able to click and hold on a given paragraph, all you need to do is call:
tf.getCharIndexAtPoint(x, y)
on click of your text field. You can then find the first character in that paragraph, grab the substring based on the paragraph length, and go from there.
Hope this helps!
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.