I'm trying to create a simple text with a drop shadow in ActionScript 3.0; for example:
_tf = new TextField();
_tf.autoSize = TextFieldAutoSize.CENTER;
_tf.selectable = false;
var format:TextFormat = new TextFormat();
format.font = "Arial";
format.bold = true;
format.color = 0xffffff;
format.size = 12;
_tf.text = "Drop shadow";
_tf.defaultTextFormat = format;
addChild(_tf);
How can i get this text with a drop shadow??
_tf.filters = [new DropShadowFilter()];
or even better;
_tf.filters = [filter(4,153,0xffffff,0.7,4,4,0.7,0.15,false,false,false)];
function filter(distance, angle, color, alpha, blurX, blurY, strength, quality, inner, knockout, hideObject){
return new DropShadowFilter(distance, angle, color, alpha, blurX, blurY, strength, quality, inner, knockout, hideObject);
}
other way:
_tf.filters = [new DropShadowFilter(4.0,45,0x000000,1.0,4.0,4.0,1.0,1,false,true,false)];
/*
DropShadowFilter(distance:Number = 4.0, angle:Number = 45, color:uint = 0, alpha:Number = 1.0, blurX:Number = 4.0, blurY:Number = 4.0, strength:Number = 1.0, quality:int = 1, inner:Boolean = false, knockout:Boolean = false, hideObject:Boolean = false);
DropShadowFilter
distance:Number = 4.0
angle:Number = 45
color:uint = 0
alpha:Number = 1.0
blurX:Number = 4.0
blurY:Number = 4.0
strength:Number = 1.0
quality:int = 1
inner:Boolean = false
knockout:Boolean = false
hideObject:Boolean = false
*/
documentation here: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/DropShadowFilter.html
Related
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;
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...
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.
Is it possible to have two text colors in one text field using Actionscript 3.0?
ex: how can i make like the first string black and the second string red?
Here is my code when using a single color:
public function logs(txt)
{
if (txt == '')
{
textLog.text = "Let's Open up our treasure boxes !!!";
}
else
{
textLog.text = '' + txt + '';
}
textLog.x = 38.60;
textLog.y = 60.45;
textLog.width = 354.50;
textLog.height = 31.35;
textLog.selectable = false;
textLog.border = false;
var format:TextFormat = new TextFormat();
var myFont:Font = new Font1();
format.color = 0x000000;
format.font = myFont.fontName;
format.size = 18;
format.align = TextFormatAlign.CENTER;
format.bold = false;
textLog.embedFonts = true;
textLog.setTextFormat(format);
this.addChild(textLog);
}
In setTextFormat you can specify start index and end index. You can also render text as html using textLog.htmlText.
First set the text
var t:TextField = new TextField();
t.text = "BLUEGREEN";
addChild(t);
Then method 1
var format1:TextFormat = t.getTextFormat(0, 4);
format1.color = 0x0000ff;
t.setTextFormat(format1, 0, 4);
var format2:TextFormat = t.getTextFormat(5, t.length);
format2.color = 0x00ff00;
t.setTextFormat(format2, 5, t.length);
Or method 2
t.htmlText = '<font color="#0000ff">BLUE</font><font color="#00ff00">GREEN</font>';
If you want to do like that, you need create a function to control. charAt(DEFINE INDEX OF STRING HERE).
var format2:TextFormat = textbox.defaultTextFormat;
format2.color = 0x000000;
textbox.defaultTextFormat = format2;
if((textbox.text.charAt(3) == "d") && ( textbox.text.charAt(4) == "i")){
var format1:TextFormat = textbox.defaultTextFormat;
format1.color = 0xFF0000;
textbox.setTextFormat(format1, 3, 5);}
else{
textbox.setTextFormat(textbox.defaultTextFormat);}
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.