Gradient TextField ActionScript 3 - actionscript-3

I have been searching for a way to put gradient colors on TextField component for the past few hours with no luck. One method is to create a gradient rectangle and set the TextField as a mask for it but I can't make it work:
var m:MovieClip = new MovieClip();
var mTxt:Sprite = new Sprite();
var txt:TextField = new TextField();
var tf:TextFormat = new TextFormat();
var dropShadow:DropShadowFilter = new DropShadowFilter();
dropShadow.distance = 0;
dropShadow.angle = 120;
dropShadow.color = 0x000000;
dropShadow.alpha = 1;
dropShadow.blurX = 2;
dropShadow.blurY = 2;
dropShadow.strength = 1;
dropShadow.quality = 80;
dropShadow.inner = false;
dropShadow.knockout = false;
dropShadow.hideObject = false;
txt.filters = new Array(dropShadow);
tf.font = "Ethnocentric Rg";
tf.color = 0xffde00;
tf.size = 72;
txt.defaultTextFormat = tf;
txt.text = "1756.25";
mTxt.addChild(txt);
var fillType:String = GradientType.LINEAR;
var colors:Array = [0xFF0000, 0x0000FF];
var alphas:Array = [1, 1];
var ratios:Array = [0x00, 0xFF];
var matr:Matrix = new Matrix();
matr.createGradientBox(400, 100, 0, 0, 0);
var spreadMethod:String = SpreadMethod.REFLECT;
m.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);
m.graphics.drawRect(0,0,400,120);
m.mask = mTxt;
addChild( m );
This code literally crashes the AIR debugger and exits itself.
What am I doing wrong here?

Set cacheAsBitmap to true and make sure you're adding the mask to the stage.
m.cacheAsBitmap = mTxt.cacheAsBitmap = true;
m.mask = mTxt;
addChild( m );
addChild( mTxt );

I had to set both layers' cacheAsBitmap option to true:
txt.cacheAsBitmap = true;
m.cacheAsBitmap = true;
addChild( m );
addChild(txt);
m.mask = txt;

Related

Images all added to last sprite, but it is already in a loop

What I am trying to do is:
1.) I parse vectors into the class. It contains simple text,
2.) In a loop it adds the text and (load then add 1 image) into a sprite.
3.) It loops, and then creates a list of boxes where each box has some text and 1 image.
The problem:
I am having a problem. The text adds into the sprite with no problem. It adds all the textfields to it, but all the images are added to the last sprite.
Thanks for your time!
My Code:
for (var k:int = 0; k < test.length; k++)
{
var Bolder:Listing8 = new Listing8();
Bolder.x=20;
if(test[k].pic1){
var loader:Loader = new Loader();
var loading111:loading1 = new loading1;
Bolder.addChild(loading111);
loader.load(new
URLRequest("http://www.rentaid.info/rent/"+test[k].pic1));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
Bolder.addChild(loader);
}
function onImageLoaded(e:Event):void {
removeChild(loading111);
e.currentTarget.loader.content.height =50;
e.target.content.x = 130;
e.target.content.y = 15;
e.target.content.height = 70;
e.target.content.width = 140;
var bf:TextField = new TextField();
var bf1:TextField = new TextField();
var bf2:TextField = new TextField();
var bf3:TextField = new TextField();
bf3.width = 100;
bf.defaultTextFormat = new TextFormat("Arial", 12, 0, null, null, null, null, null, TextFormatAlign.CENTER);
bf.width = 100;
bf.autoSize = TextFieldAutoSize.CENTER;
bf1.width = 100;
bf1.autoSize = TextFieldAutoSize.CENTER;
bf2.autoSize = TextFieldAutoSize.CENTER;
bf3.autoSize = TextFieldAutoSize.CENTER;
bf3.width = 100;
bf1.y= bf.height+5;
// Pulling the textfields content out from the current bookVO
bf.text = test[k].nobed;
bf1.text = test[k].zip;
bf2.text = test[k].Location;
bf3.text = test[k].price;
bf.x = (Bolder.height-bf.height)*.2
Bolder.addChild(bf);
Bolder.addChild(bf1);
Bolder.addChild(bf2);
Bolder.addChild(bf3);
// position the object based on the accumulating variable.
Bolder.y = currentY;
Bolder.mouseChildren = false; // ignore children mouseEvents
Bolder.mouseEnabled = true; // enable mouse on the object - normally set to true by default
Bolder.useHandCursor = true; // add hand cursor on mouse over
Bolder.buttonMode = true;
trace ('add image with index', k);
image[k]= new Sprite();
image[k].addChild(Bolder);
image.mouseChildren = true; // ignore children mouseEvents
image.mouseEnabled = true; // enable mouse on the object - normally set to true by default
image.useHandCursor = true; // add hand cursor on mouse over
image.buttonMode = true;
image[k].addEventListener(MouseEvent.CLICK, gotoscene);
currentY += Bolder.height + 10;
}
if( test.length > 0 )
{
_contentHolder = new Sprite();
addChild(_contentHolder);
for (var j:int = 0; j < test.length; j++) {
_contentHolder.addChild(image[j]);
}
I do not recommend you to put function declaration into a function.
This is the reason of your confusion.
Your program at first executes all code(for example 10 times) EXCEPT this part:
function onImageLoaded(e:Event):void {
e.currentTarget.loader.content.height =50;
var sprite:Sprite = new Sprite;
sprite.y += sprite.height + 10;
sprite.addChild(e.target.content as Bitmap);
Bolder.addChild(sprite);
}
And then executes this part 10 times. And in this situation Bolder is always Bolder == “your_10th_Bolder”
This how events work.
Adding loader as child may help:
loader.load(new URLRequest("http://www.rentaid.info/rent/"+test[k].pic1));
Bolder.addChild(loader);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
and in handler doing this:
function onImageLoaded(e:Event):void {
e.target.content.x = 123;
e.target.content.y = 456;
e.target.content.height = 789;
e.target.content.width = 123;
}

AS3 set (maximum-)height of movieclip without scaling content

I am trying to set a maximum height of a Textfield, after which the Text will only be displayed if you scroll.
I know, that you cannot set the height of a textfield as it is protected. Therefore I put the Textfield inside a movieclip and wanted to set a height for that. However, if I do so, it rescales the text. Depending on the amount of text it not only gets ugly, but plainly unreadable.
function createInfoBox():void
{
for (var i:uint = 0; i < level_200_menu_NEW.numChildren; i++)
{
var button200 = level_200_menu_NEW.getChildAt(i);
button200.addEventListener(MouseEvent.CLICK, goBack);
}
while (infobox_MC.numChildren)
{
infobox_MC.removeChildAt(0);
}
// Create a new instance of the _agilita_str symbol from the document's library.
var myFont:Font = new HelveticaNeueLight();
var nextSprite:MovieClip = new MovieClip();
var prevSprite:MovieClip = new MovieClip();
var infobox_title:TextField = new TextField();
var infobox_text:TextField = new TextField();
var infobox_facts:TextField = new TextField();
var infobox_next:TextField = new TextField();
var infobox_prev:TextField = new TextField();
var format_title:TextFormat = new TextFormat();
format_title.font = myFont.fontName;
format_title.size = 26;
format_title.color = 0x2d4275;
var format_text:TextFormat = new TextFormat();
format_text.font = myFont.fontName;
format_text.size = 20;
format_text.color = 0x000000;
format_text.leading = 6;
format_text.indent = - 17;
format_text.blockIndent = 17;
var format_bullet:TextFormat = new TextFormat();
format_bullet.font = myFont.fontName;
format_bullet.size = 20;
format_bullet.color = 0x000000;
format_bullet.indent = - 17;
format_bullet.blockIndent = 17;
format_bullet.leading = 6;
format_bullet.kerning = true;
var format_btn:TextFormat = new TextFormat();
format_btn.font = myFont.fontName;
format_btn.size = 12;
format_btn.color = 0x2d4275;
var thisItem = xml.item.(#LEVEL == activeLevel);
var nextItem = xml.item.(#LEVEL == thisItem.NEXT_LEVEL);
var prevItem = xml.item.(#LEVEL == thisItem.PREV_LEVEL);
infobox_prev.text = prevItem.NAME;
infobox_prev.autoSize = TextFieldAutoSize.LEFT;
infobox_prev.selectable = false;
infobox_prev.embedFonts = true; // very important to set
infobox_prev.setTextFormat(format_btn);
prevSprite.x = 50;
prevSprite.y = 720-50;
prevSprite.buttonMode = true;
prevSprite.mouseChildren = false;
prevSprite.addEventListener(MouseEvent.CLICK, infoboxPrev);
prevSprite.addChild(infobox_prev);
infobox_next.text = nextItem.NAME;
infobox_next.multiline = false;
infobox_next.autoSize = TextFieldAutoSize.RIGHT;
infobox_next.selectable = false;
infobox_next.embedFonts = true; // very important to set
infobox_next.setTextFormat(format_btn);
nextSprite.x = 250;
nextSprite.y = 720-50;
nextSprite.buttonMode = true;
nextSprite.mouseChildren = false;
nextSprite.addEventListener(MouseEvent.CLICK, infoboxNext);
nextSprite.addChild(infobox_next);
var line:Shape = new Shape();
var line2:Shape = new Shape();
var box:Shape = new Shape();
box.name = "box";
infobox_MC.addChild(box);
infobox_MC.setChildIndex(box,0);
infobox_title.text = xml.item.(#LEVEL == activeLevel).NAME;
infobox_title.autoSize = "left";
infobox_title.selectable = false;
infobox_title.embedFonts = true; // very important to set
infobox_text.name = "infobox_text";
infobox_text.autoSize = TextFieldAutoSize.LEFT;
infobox_text.multiline = false;
infobox_text.selectable = false;
infobox_text.wordWrap = false;
infobox_text.embedFonts = true; // very important to set
infobox_text.text = xml.item.(#LEVEL == activeLevel).INFOTEXT;
//infobox_text.mouseWheelEnabled = false;
//infobox_text.appendText("\n aus de.wikipedia.org");
var temp:String = xml.item.(#LEVEL == activeLevel).FACTS;
var FACTS = temp.split("| ").join("\n");
infobox_facts.name = ("infobox_facts")
infobox_facts.multiline = true;
infobox_facts.selectable = false;
infobox_facts.embedFonts = true; // very important to set
infobox_facts.autoSize = TextFieldAutoSize.LEFT;
//infobox_facts.multiline = false;
infobox_facts.wordWrap = false;
infobox_facts.text = FACTS;
infobox_facts.mouseWheelEnabled = false;
infobox_title.defaultTextFormat = format_title;
infobox_text.defaultTextFormat = format_text;
infobox_facts.defaultTextFormat = format_bullet;
infobox_title.setTextFormat(format_title);
infobox_text.setTextFormat(format_text);
infobox_facts.setTextFormat(format_bullet);
//infobox_text.styleSheet = style_text;
box.graphics.beginFill(0xFFFFFF); // choosing the colour for the fill, here it is red
box.graphics.drawRect(0, 0, 400,720); // (x spacing, y spacing, width, height)
box.graphics.endFill(); // not always needed but I like to put it in to end the fill
box.alpha = .85;
infobox_title.x = 30;
infobox_title.y = 50;
infobox_text.x = (1280-700);
infobox_text.y = infobox_title.y + infobox_title.height + 10;
infobox_text.alpha = 0;
var maxWidthFacts:Number = 300;
var maxWidthText:Number = 600;
if (infobox_text.width > maxWidthText)
{
infobox_text.multiline = true;
infobox_text.wordWrap = true;
infobox_text.width = maxWidthText;
}
infobox_facts.x = 50;
infobox_facts.y = infobox_title.y + infobox_title.height + 10;
if (infobox_facts.width > maxWidthFacts)
{
infobox_facts.multiline = true;
infobox_facts.wordWrap = true;
infobox_facts.width = maxWidthFacts;
}
line.graphics.lineStyle(2.5, 0x3F3F3F, 1);
line.graphics.moveTo(infobox_title.x, infobox_title.y + infobox_title.height -2);
line.graphics.lineTo(box.width - infobox_title.x, infobox_title.y + infobox_title.height-2);
line2.graphics.lineStyle(1, 0x3F3F3F, 1);
line2.graphics.moveTo(infobox_text.x, infobox_text.y + infobox_text.height);
line2.graphics.lineTo(box.width - infobox_title.x, infobox_text.y + infobox_text.height);
var back_BTN = new Back_BTN();
back_BTN.addEventListener(MouseEvent.CLICK, playBackwards);
back_BTN.x = 1150;
back_BTN.y = 25;
back_BTN.name = "back_BTN";
for each(var item in xml.item.(#LEVEL == activeLevel))
{
if(item.REFERENZ != "NONE")
{
var testSprite:MovieClip = new MovieClip();
var infobox_more:TextField = new TextField();
var moreSprite:MovieClip = new MovieClip();
testSprite.name = "REFERENZ";
testSprite.x = 50;
testSprite.y = infobox_facts.y + infobox_facts.height + 25;
imageLoad(item.REFERENZ,testSprite);
moreSprite.addChild(infobox_more);
infobox_MC.addChild(testSprite);
infobox_MC.addChild(moreSprite);
moreSprite.x = testSprite.x;
moreSprite.y = testSprite.y;
moreSprite.buttonMode = true;
moreSprite.mouseChildren = false;
moreSprite.name = "infobox_more";
infobox_more.text = "Referenzbeispiele";
infobox_more.multiline = false;
infobox_more.autoSize = TextFieldAutoSize.RIGHT;
infobox_more.selectable = false;
infobox_more.embedFonts = true; // very important to set
infobox_more.setTextFormat(format_btn);
//var image = testSprite.getChildAt(0);
var spriteWidth = testSprite.width * .035;
var spriteHeight = testSprite.height * .035;
testSprite.alpha = 0;
/*
testSprite.buttonMode = true;
testSprite.mouseChildren = true;
testSprite.addEventListener(MouseEvent.ROLL_OVER, iconHover);
testSprite.addEventListener(MouseEvent.ROLL_OUT, iconOut);
testSprite.addEventListener(MouseEvent.CLICK, iconBig);
*/
//moreSprite.buttonMode = true;
//moreSprite.mouseChildren = true;
moreSprite.addEventListener(MouseEvent.CLICK, iconBig);
infobox_MC.setChildIndex(testSprite,infobox_MC.numChildren-1);
infobox_MC.addChild(moreSprite);
}
}
var infobox_text_MC:MovieClip = new MovieClip();
infobox_text_MC.name = "infobox_text_MC";
infobox_text_MC.addChild(infobox_text);
infobox_MC.addChild(infobox_text_MC);
infobox_text_MC.scaleMode = StageScaleMode.NO_SCALE;
infobox_text_MC.height = 600;
trace(infobox_text_MC.x);
trace(infobox_text_MC.y);
trace(infobox_text_MC.width);
trace(infobox_text_MC.height);
infobox_text_MC.visible = true;
infobox_facts.text = FACTS;
infobox_MC.addChild(infobox_title);
infobox_MC.addChild(infobox_facts);
//infobox_MC.addChild(nextSprite);
//infobox_MC.addChild(prevSprite);
infobox_MC.addChild(back_BTN);
einblenden(infobox_MC);
}
With some other function the alpha of the textfields is toogled to one. So once I execute the right function it is visible but it's squished.
Any help would be appreciated
Chris
You should be using numLines to determine the number of lines in your textfield.
var maxlines:Number = 5;
if( infobox_facts.numlines > maxLines )
{
// scroll it
}
okay, so I found where I was going wrong.
the line "*infobox_text.autoSize = TextFieldAutoSize.LEFT;*" prevents me from setting the width and hight of a textField. Turning that off will let you then specify height as well as width and the texfield doesn't need to be nested within a movieclip.
Sometimes one doesn't see the wood for the trees...

addchild with multiple movieclip in as3

var txt_mc:movieClip=new movieClip();
createTxt(3)
function createTxt(_no):void
{
var _sy = 0;
for (var i=0; i<_no; i++)
{
var txt:TextField = new TextField();
txt_fmt.size = _size;
txt.defaultTextFormat = txt_fmt;
//txt.autoSize = TextFieldAutoSize.CENTER;
txt.autoSize = TextFieldAutoSize.LEFT;
txt.selectable = false;
txt.embedFonts = true;
txt.x = 0;
txt.y = _sy;
_sy = _sy + 25;
//txt.border = true
txt.text = "Enter your text here";
txt_mc.addChild(txt);
}
mc1.addChild(txt_mc);
mc2.addChild(txt_mc);
}
How can i addchild with multiple movieclip.
I was create a movieclip and wants to addchild in two movieclips which are located on stage.
please help me out.
I want to txt_mc will be add in mc1 and mc2 and from that code txt_mc is add in mc2 only.
You can't add the same instance of one movie clip in two different containers. But you can create two similar txt_mc instances and add them to mc1 and mc2.
UPDATE: So, you can modify your createTxt function, so it will return new instance of txt_mc each time you call it. And add it to every container you want:
function createTxt(_no):MovieClip
{
var txt_mc:movieClip=new MovieClip();
var _sy = 0;
for (var i=0; i<_no; i++)
{
var txt:TextField = new TextField();
txt_fmt.size = _size;
txt.defaultTextFormat = txt_fmt;
//txt.autoSize = TextFieldAutoSize.CENTER;
txt.autoSize = TextFieldAutoSize.LEFT;
txt.selectable = false;
txt.embedFonts = true;
txt.x = 0;
txt.y = _sy;
_sy = _sy + 25;
//txt.border = true
txt.text = "Enter your text here";
txt_mc.addChild(txt);
}
return txt_mc;
}
mc1.addChild(createTxt(3));
mc2.addChild(createTxt(3));

AS3 object inexplicably disappears after 1.5 - 2 minutes

I'm new to as3 but have been learning as I go.
I am creating a container which appears with text field inputs so the user can create a 'post'. This is triggered to occur when an animation is removed from the stage which it does automatically when it has completed.
However after about 1.5-2 minutes the container inexplicably disappears. This is a problem as a user may well want to take more than 2 minutes to make a post.
I cannot for the life of me figure out why this is happening, could it possible be a garbage collection issue?
Any help is greatly appreciated thank you,
Dan
var titleText:Title = new Title();
var titleInput:TextField = new TextField();
var categoryText:Category = new Category();
var categoryInput:TextField = new TextField();
var postText:Text = new Text();
var postInput:TextField = new TextField();
//setup text formats to be used
var postCreationTextFormat:TextFormat = new TextFormat();
postCreationTextFormat.font = "arial";
postCreationTextFormat.size = 20;
postCreationTextFormat.align = "left";
postCreationTextFormat.leftMargin = 2;
//Fade In Post Creation Box after Seed to Bud Animation.
seedToBud.addEventListener(Event.REMOVED_FROM_STAGE, createPostInput);
//Some variables to declare for the createPostInput function.
var postCreationContainer:PostCreationContainer = new PostCreationContainer;
var contentWindow:ContentWindow = new ContentWindow;
var postCreationInputBoxes:PostCreationInputBoxes = new PostCreationInputBoxes;
var thumb:Thumb = new Thumb;
var track:Track = new Track;
var scrollDownArrow:ScrollDownArrow = new ScrollDownArrow;
var scrollUpArrow:ScrollUpArrow = new ScrollUpArrow;
function createPostInput(event:Event)
{
addChild(postCreationContainer);
postCreationContainer.x = 230;
postCreationContainer.y = 400;
postCreationContainer.addChild(track);
track.x = 428;
track.y = 25;
postCreationContainer.addChild(thumb);
thumb.x = 418;
thumb.y = 25;
postCreationContainer.addChild(scrollDownArrow);
scrollDownArrow.x = 418;
scrollDownArrow.y = 269;
postCreationContainer.addChild(scrollUpArrow);
scrollUpArrow.x = 418;
scrollUpArrow.y = 6;
postCreationContainer.addChild(contentWindow);
contentWindow.x = 6;
contentWindow.y = 6;
postCreationContainer.addChild(postCreationInputBoxes);
postCreationInputBoxes.x = 6;
postCreationInputBoxes.y = 6;
postCreationContainer.alpha = 0;
postCreationContainer.addEventListener(Event.ENTER_FRAME, fadeInCreatePostInput);
postCreationInputBoxes.addChild(titleText);
titleText.x = 0;
titleText.y = 0;
postCreationInputBoxes.addChild(titleInput);
postCreationInputBoxes.addChild(categoryText);
categoryText.x = 0;
categoryText.y = 60;
postCreationInputBoxes.addChild(categoryInput);
postCreationInputBoxes.addChild(postText);
postText.x = 0;
postText.y = 124;
postCreationInputBoxes.addChild(postInput);
titleInput.defaultTextFormat = postCreationTextFormat;
titleInput.type = "input";
titleInput.multiline = false;
titleInput.wordWrap = false;
titleInput.maxChars = 150;
titleInput.border = true;
titleInput.width = 403;
titleInput.height = 30;
titleInput.x = 0;
titleInput.y = 32;
titleInput.background = true;
titleInput.backgroundColor = 0xFFFFFF;
categoryInput.defaultTextFormat = postCreationTextFormat;
categoryInput.type = "input";
categoryInput.multiline = false;
categoryInput.wordWrap = false;
categoryInput.maxChars = 150;
categoryInput.border = true;
categoryInput.width = 403;
categoryInput.height = 30;
categoryInput.x = 0;
categoryInput.y = 96;
categoryInput.background = true;
categoryInput.backgroundColor = 0xFFFFFF;
postInput.defaultTextFormat = postCreationTextFormat;
postInput.type = "input";
postInput.multiline = true;
postInput.wordWrap = true;
postInput.maxChars = 500;
postInput.border = true;
postInput.width = 403;
postInput.height = 361.5;
postInput.x = 0;
postInput.y = 156;
postInput.background = true;
postInput.backgroundColor = 0xFFFFFF;
stage.focus = titleInput;
seedToBud.removeEventListener(Event.REMOVED_FROM_STAGE, createPostInput);
}
function fadeInCreatePostInput(event:Event):void
{
postCreationContainer.alpha += 0.05;
if (postCreationContainer.alpha == 1)
{
postCreationContainer.removeEventListener(Event.ENTER_FRAME, fadeInCreatePostInput);
}
}
Do you know for a fact that there are no rounding issues with your alpha incrementer? I'd be checking the integer value of alpha and not the real, floating point value. Or, do a fuzz comparison (alpha >= 1-FUZZ && alpha <= 1+FUZZ) for some small value of FUZZ.

AS3 - How to add bevel filter on MovieClip after I changed its color

When I change color with
var blue:ColorTransform = new ColorTransform();
blue.color = 0xFF00B8E7;
MovieClip.transform.colorTransform = blue;
I add this
var myBevel:BevelFilter = new BevelFilter();
myBevel.type = BitmapFilterType.INNER;
myBevel.distance = 3;
myBevel.highlightColor = 0xFFFFFF;
myBevel.shadowColor = 0x000000;
myBevel.blurX = 5;
myBevel.blurY = 5;
MovieClip.filters = [myBevel];
the result is, only color changed.
How can I add this bevel over or on the new color that I changed?
I looked everywhere and found no answer to my problem.
So I hope you guys here, can help me!
It seems like that the bevel takes all colors as the new color that I changed, not taking the one I specified
myBevel.highlightColor = 0xFFFFFF;
myBevel.shadowColor = 0x000000;
colorTransform will apply to the entire movieclip including any children and filters. If you try a drop shadow, you will see what I mean.
METHOD #1:
You can create a parent object with the bevel filter and attach your movieclip with colorTransform.
var parentObject:Sprite = new Sprite();
addChild(parentObject);
var mc:Sprite = new Sprite();
mc.graphics.beginFill(0xFFFF00);
mc.graphics.drawCircle(100,100, 100);
mc.graphics.endFill();
var blue:ColorTransform = new ColorTransform();
blue.color = 0xFF00B8;
var myBevel:BevelFilter = new BevelFilter();
myBevel.type = BitmapFilterType.INNER;
myBevel.distance = 3;
myBevel.highlightColor = 0xFFFFFF;
myBevel.shadowColor = 0x000000;
myBevel.blurX = 5;
myBevel.blurY = 5;
parentObject.filters = [myBevel];
parentObject.addChild(mc);
mc.transform.colorTransform = blue;
METHOD #2:
To avoid having a parent object to handle the bevel, I used two ColorMatrixFilters with an AdjustColor to accomplish what you are looking for. You will end up with 3 filters, one to make the object white, one to change to the color you want, and the last bevel filter. If you are using an IDE other than Flash, like Flex or FlashDevelop, you will need to include flash.swc into your library from 'Common/Configuration/ActionScript 3.0/libs/flash.swc' for the fl.motion.AdjustColor package/class.
var mc:Sprite = new Sprite();
mc.graphics.beginFill(0xFF0000);
mc.graphics.drawCircle(100, 100, 100);
mc.graphics.endFill();
addChild(mc);
// White out the entire shape first
var whiteAC:AdjustColor = new AdjustColor();
whiteAC.brightness = 100;
whiteAC.contrast = 100;
whiteAC.saturation = -100;
whiteAC.hue = 0;
var whiteMatrix:Array = whiteAC.CalculateFinalFlatArray();
var whiteCMF:ColorMatrixFilter = new ColorMatrixFilter(whiteMatrix);
// Now use ColorMatrixFilter to change color
var colorMatrix:Array = hexToMatrix(0x0000FF);
var colorCMF:ColorMatrixFilter = new ColorMatrixFilter(colorMatrix);
// Create bevel
var myBevel:BevelFilter = new BevelFilter();
myBevel.type = BitmapFilterType.INNER;
myBevel.distance = 3;
myBevel.highlightColor = 0xFFFFFF;
myBevel.shadowColor = 0x000000;
myBevel.blurX = 5;
myBevel.blurY = 5;
mc.filters = [whiteCMF, colorCMF, myBevel];
function hexToMatrix ( hex:uint, alpha:Number = 1 )
{
var r:Number = ((hex & 0xFF0000) >> 16);
var g:Number = ((hex & 0x00FF00) >> 8);
var b:Number = ((hex & 0x0000FF));
var matrix:Array = [];
matrix = matrix.concat([r, 0, 0, 0, 0]); // red
matrix = matrix.concat([0, g, 0, 0, 0]); // green
matrix = matrix.concat([0, 0, b, 0, 0]); // blue
matrix = matrix.concat([0, 0, 0, alpha, 0]); // alpha
return matrix;
}
Experiment with the order in which you apply the transformations:
...;
myMovieClip.transform.colorTransform = blue;
...;
myMovieClip.filters = [myBevel];
VS:
...;
myMovieClip.filters = [myBevel];
...;
myMovieClip.transform.colorTransform = blue;
The bevel might also be supplying its own fill over whatever you're doing with the color transform. You might want to experiment with the bevel's shadowAlpha and highlightAlpha properties. Set them to 0.1 and see if your movie clip is blue-shaded.