I have run into a small graphics glitch in Flash. It seems to be both in FP9 - Exported via Flash CS3, and FP10 - Exported via the Flex 4 beta SDK.
The glitch / problem manifests itself as embedded text at a small point size "blooming" under certian conditions. It basically looks like the antialiasing becomes fatter at some level of text brightness. I have made a small test case below. (Obviously) You will need to embed the Arial font in your compiled SWF for the below code to work.
var myText:TextField = new TextField();
myText.embedFonts = true;
myText.antiAliasType = AntiAliasType.ADVANCED;
myText.autoSize = TextFieldAutoSize.LEFT;
var myFormat:TextFormat = myText.getTextFormat();
myFormat.size = 8;
myFormat.font = 'Arial';
myFormat.color = 0x663300;
myText.defaultTextFormat = myFormat;
myText.text = 'Bloom Example';
addChild(myText);
var composit:ColorTransform = new ColorTransform();
var timestamp:Number = getTimer();
function enterFrame (event:Event):void{
var n:Number = (getTimer() - timestamp) / 1000.0;
composit.redMultiplier = 1-n;
composit.greenMultiplier = 1-n;
composit.blueMultiplier = 1-n;
composit.redOffset = 250 * n;
composit.greenOffset = 250 * n;
composit.blueOffset = 0;
myText.transform.colorTransform = composit;
if ( n >= 1 ) removeEventListener(Event.ENTER_FRAME, enterFrame);
};
addEventListener(Event.ENTER_FRAME, enterFrame);
You can see an example of the problem by rolling over the graphical element here: http://bandcamp.fieldsofnoise.org/dump/bloom.swf
It's not really an option to change to AntiAliasType.NORMAL as it makes the text way less readable at this point size.
Any help finding an appropriate resolution to this problem would be appreciated.
I think when you change the brightness then you're maxing out the values for all pixels the font is rendered with including the anti-aliasing pixels. Have you tried changing the color rather than increasing the brightness? Or even applying a simple tint?
Related
As it reads I want to change the font size as the stage size changes.
I have private var myFormat:TextFormat = new TextFormat();
And then when the object gets made it writes the following
_buttonText.wordWrap = true;
myFormat.size = 15;
myFormat.align = TextFormatAlign.CENTER;
_buttonText.textColor = 0x222428;
myFormat.bold = 'true';
_buttonText.defaultTextFormat = myFormat;
_buttonText.text = text;
Then in my on enter frame I want to resize the text, I have tried a couple things but nothing seems to work, currently it looks like this.
myFormat.size = stage.stageWidth / 136.53;
Thanks for any help
A TextFormat object has no effect unless applied to a TextField. Besides if the font size should be linked to the stage size then a factor size of some kind should be applied as well. At the end it looks like this:
myFormat.size = 15 * fontSizeFactor;
//_buttonText.defaultTextFormat = myFormat;this is irrelevant if size should be dynamic.
//instead text should be set then TextFormat should be set again.
_buttonText.text = text;
_buttonText.setTextFormat(myFormat);//this is dynamic
now on enter frame:
myFormat.size = 15 * fontSizeFactor;
_buttonText.setTextFormat(myFormat);//apply the format again or else nothing will happen
I'm pretty frustrated with AS3 right now. It seems like there must be serious issues with how things scale inside of movieclips. From the stage everything seems to work fine.
On one of my projects I try to set a textfield.width equal to its container(movieclip)
tf.width = mc.width; Of course it says everything is even but when I look at the border of the textfield it's nowhere near the size of the movie clip it's contained within.
While trying to make a much smaller sample to share with you guys for help, that part worked, but trying to resize text did something completely different. Can anyone help me make sense of all this? The code below seemingly randomly starts changing the size of everything.
Also, I was trying to follow this code from here but just kept getting an error when trying to change the format size in a while loop: Autosize text to fit the width of a button
var square:MovieClip = new MovieClip();
addChild(square);
square.graphics.lineStyle(3,0x00ff00);
square.graphics.beginFill(0x0000FF);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.x = 0;
square.y = 0;
square.width = 200;
square.height = 200;
var tffSize = 400;
var tffOr:TextFormat = new TextFormat();
tffOr.size = tffSize;
tffOr.align = TextFormatAlign.CENTER;
var tf:TextField = new TextField();
square.addChild(tf);
tf.defaultTextFormat = tffOr;
tf.text = "Hello";
tf.border = true;
tf.width = square.width;
tf.height = square.height;
trace(tf.textWidth);
trace(square.width);
while (tf.textWidth > square.width || tf.textHeight > square.height)
{
trace("too Big");
newTFF();
trace(tf.textWidth + " vs " + square.width);
square.width = 200;
trace(tf.textWidth + " vs " + square.width);
}
function newTFF()
{
tffSize = tffSize - 1;
var tff:TextFormat = new TextFormat();
tff.size = tffSize;
tff.align = TextFormatAlign.CENTER;
//tf.defaultTextFormat = tff;
tf.setTextFormat(tff);
tf.autoSize = "left";
}
recently started to learn ActionScript 3 and already have questions.
question remains the same: I'm uploading a picture using the object Loader.load (URLRequest). Loaded and displayed a picture normally. But it is impossible to read the values of attributes of the image height and width, instead issued zero. That is, do this:
var loader:Loader=new Loader();
var urlR:URLRequest=new URLRequest("Image.jpg");
public function main()
{
loader.load(urlR);
var h:Number = loader.height;// here instead of the width of the image of h is set to 0
// And if you do like this:
DrawText(loader.height.toString(10), 50, 50); // Function which draws the text as defined below
// 256 is displayed, as necessary
}
private function DrawText(text:String, x:int, y:int):void
{
var txt:TextField = new TextField();
txt.autoSize = TextFieldAutoSize.LEFT;
txt.background = true;
txt.border = true;
txt.backgroundColor = 0xff000000;
var tFor:TextFormat = new TextFormat();
tFor.font = "Charlemagne Std";
tFor.color = 0xff00ff00;
tFor.size = 20;
txt.x = x;
txt.y = y;
txt.text = text;
txt.setTextFormat(tFor);
addChild(txt);
}
Maybe attribute values must be obtained through the special features, but in the book K.Muka "ActionScript 3 for fash" says that it is necessary to do so. Please help me to solve this. Thanks in advance.
Well it's simple.
Flash is focused on the Internet, hence such problems.
If you wrote loader.load (urlR); it does not mean loaded. Accordingly, prior to the event confirming the end of loading, in loadare Null
if, instead of certain functions would be more code that would perhaps tripped your approach.
Yeah plus still highly dependent on the size of the file that you read.
Well, in general it all lyrics. Listen event on loader.contentLoaderInfo.addEventListener (Event.INIT, _onEvent), onEvent and read properties.
You need to wait for your image to load to be able to get values out of it.
Attach an eventListener to your URLLoader.
var urlR:URLRequest = new URLRequest("Image.jpg");
loader.load(urlR);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loader_complete);
function loader_complete(e:Event): void {
// Here you can get the height and width values etc.
var target_mc:Loader = evt.currentTarget.loader as Loader;
// target_mc.height , target_mc.width
}
Loader
I am not sure if this is possible, so, please, help me out a little bit over here:
I have an image loaded into the stage:
var miC:Loader = new Loader();
miC.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
miC.load(new URLRequest("coverph.jpg"));
function onComplete(e:Event):void {
miC.width = stage.stageWidth;
miC.height = stage.stageHeight;
miC.x = 0;
miC.y = 0;
addChild(miC);
trace(miC.width, miC.height);
}
And this way the image auto size itself to perfectly match the screen resolution (I have tried it with: (all in landscape)
960dp x 720dp
640dp x 480dp
470dp x 320dp
426dp x 320dp
1196dp x 720dp
and 720dp x 720dp
They all worked fine (it won´t go over 735)
Now, my question is... let´s say that for the 1196 x 720 I have a textField, a textFormat and a legend that appears on the top of the screen (as a title):
var fmat:TextFormat = new TextFormat();
fmat.font = "Times New Roman";
fmat.size = 105;
fmat.color = "0xFF0000";
var titulo:TextField = new TextField();
titulo.x = 145;
titulo.y = 30;
titulo.width = 1290;
titulo.height = 122,10;
titulo.defaultTextFormat = fmat;
titulo.antiAliasType = AntiAliasType.ADVANCED;
titulo.text = "THE TITLE OF WHAT IM DOING";
addChild(titulo);
How do I (if possible) auto size the textField and format to keep the same proportion according to the screen resolution?
Try something like this..
titulo.autoSize = "left";
titulo.text = "THE TITLE OF WHAT IM DOING";
var txt_holder:Sprite = new Sprite();
txt_holder.addChild(titulo);
stage.addChild(txt_holder);
stage.addEventListener(Event.RESIZE, onStageResize);
function onStageResize(e:Event):void {
txt_holder.width = stage.stageWidth * 0.8; // 80% width relative to stage
txt_holder.scaleY = txt_holder.scaleX; // To keep aspectratio
txt_holder.x = stage.stageWidth / 2;
txt_holder.y = 10;
}
With a few extra settings in your app you could calculate what the scaling factors should be for the x-axis and y-axis based on what the resolution is and then set the scalex and scaley properties of the TextField.
Reference: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/TextField.html#propertySummary
How can I set the properties for the text outline / border for each character in a line of text in AS3 ?
I don't think you can. What you can do is use a blur filter to mimic the appearance of an outline. Just paste this into an empty AS3 movie:
var txt:TextField = new TextField();
this.addChild(txt);
txt.appendText('Lorem ipsum');
txt.autoSize = TextFieldAutoSize.LEFT;
txt.antiAliasType = flash.text.AntiAliasType.NORMAL;
txt.selectable = false;
var txtFormat:TextFormat = new TextFormat();
txtFormat.size = 40;
txtFormat.font = 'Helvetica';
txt.setTextFormat(txtFormat);
txt.defaultTextFormat = txtFormat;
var outline:GlowFilter = new GlowFilter();
outline.blurX = outline.blurY = 1;
outline.color = 0xFF0000;
outline.quality = BitmapFilterQuality.HIGH;
outline.strength = 100;
var filterArray:Array = new Array();
filterArray.push(outline);
txt.filters = filterArray;
Try playing with the strength, blurX, blurY and quality properties, in order to obtain different appearances. I think that's about the closest you can get to a text outline.
PS: font embedding would greatly improve the quality of the effect, as well as making the antialias work properly.
i am not shore i understand but you can use same kind of
filter on the testbox and by doing so you can get a same kind of a border
in each one of your letters