I have a map application where booth numbers are being auto-generated for the booths.
In the map controls, you can rotate the map 90 degrees and when the map is at 0 degrees of rotation, the booth numbers show up just fine. However, at -90, -180 and 90 the text is gone.
Here's the map
http://build.map-dynamics.com/dev
Here's the function used to generate the text fields:
function addTextField(childObj, textValue){
var myTextField:TextField = new TextField();
myTextField.text = textValue;
var myRectangle = childObj.getBounds(childObj);
myTextField.width = (childObj.width/childObj.scaleX);
myTextField.x = 0+myRectangle.x;
myTextField.y = 0+myRectangle.y + (myRectangle.height/2)-6;
myTextField.mouseEnabled = false;
myTextField.selectable = false;
myTextField.border = false;
myTextField.autoSize = TextFieldAutoSize.CENTER;
var myFormat:TextFormat = new TextFormat();
myFormat.color = 0x000000;
myFormat.size = (text_size / childObj.scaleX);
myFormat.font = "Arial";
myTextField.setTextFormat(myFormat);
childObj.addChildAt(myTextField,1);
}
Even just some idea of where to start looking would be helpful.
it means that the font is not embedded.
try embedding it (might take more than myTextField.embedFont = true;)
Related
I want to apply a gradient to my text in Flash Develop and read that using a mask is the easiest way. Problem is that I can not get it to work. I tried to create a mask with just the textField and by adding it to a sprite, neither work.
Another strange thing is that the textmask will function as a mask for start title if I reverse them like:
starttitle.mask =textmask
When I try the code below nothing displays.
var format2:TextFormat = new TextFormat();
format2.size = 40;
format2.font = "Times New Roman";
format2.bold = true
starttitle = new TextField;
starttitle.defaultTextFormat = format2;
starttitle.text = "Memory Circles";
starttitle.textColor = 0xFF0000
starttitle.autoSize = "center";
starttitle.background = false;
starttitle.backgroundColor = 0xFF4242;
starttitle.x = (300 - starttitle.width * .5);
starttitle.y = (150 - starttitle.height * .5);
starttitle.mouseEnabled = false;
addChild(starttitle)
var textmask:Shape = new Shape
var fillType:String = GradientType.LINEAR;
var colors:Array = [0xFF0000, 0];
var alphas:Array = [1, 1];
var ratios:Array = [0, 255];
var gradientBoxMatrix:Matrix = new Matrix();
gradientBoxMatrix.createGradientBox(50,100,45,0,0);
var spreadMethod:String = SpreadMethod.REPEAT;
textmask.graphics.beginGradientFill(fillType, colors, alphas, ratios,
gradientBoxMatrix, spreadMethod);
textmask.graphics.drawRect(200,100,300,100)
addChild(textmask)
textmask.mask =starttitle
I read something about the font needing to be embedded but I'm using Times New Roman and thought this would be embedded. Also other fonts don't work.
Try to use bitmap caching on starttitle and textmask:
starttitle.cacheAsBitmap=true;
textmask.cacheAsBitmap=true;
I have this code for a message to appear on stage when player finishes drag and drop. I would like this sprite to be removed when a button is clicked for the next frame. Can someone help me with the code?
stage.addEventListener(Event.ENTER_FRAME, EntFrame);
function EntFrame (e:Event):void
{
if (CntP1+CntP2+CntP3+CntP4+CntP5+CntP6+CntP7+CntP8 == 40)
{
var w:int = 400, h:int = 200;
var win:Sprite = new Sprite();
win.name = "Mywin";
addChild(win);
// draw rounded rect with subtle vertical linear gradient fill and blue stroke
win.graphics.lineStyle(4,0x0077ff);
var mat:Matrix = new Matrix();
mat.createGradientBox(w, h, 90 * (Math.PI / 180));
win.graphics.beginGradientFill(GradientType.LINEAR,[0xffffff,0xeeeeee],[1.00,1.00],[0,255],mat);
win.graphics.drawRoundRect(0,0,w,h,15,15);
// show center "YOU WIN!" text
var tf:TextField = new TextField();
tf.autoSize = TextFieldAutoSize.LEFT;
tf.antiAliasType = AntiAliasType.ADVANCED;
tf.defaultTextFormat = new TextFormat("Arial, Verdana",36,0x454545,true);
tf.text = "Κέρδισες!";
tf.selectable = false;
win.addChild(tf);
tf.x = w/2 - tf.width/2;
tf.y = h/2 - tf.height/2;
// add a drop shadow
var dropShadow:DropShadowFilter = new DropShadowFilter(3,45,0,.35,8,8,1,3);
win.filters = [dropShadow];
// center the graphic
win.x = stage.stageWidth/2 - win.width/2;
win.y = stage.stageHeight/2 - win.height/2;
}
}
Your code isn't written well and needs rewriting to ensure reuse or scalability of your project, but here's a quick way out.
make a holder Sprite, something like
var messageHolder:Sprite = new Sprite();
addChild(messageHolder);
add all the messages to that holder in any fashion you like. When you need to erase the contents of that holder, call following method:
function clearHolderContents(holder:DisplayObjectContainer):void
{
if (holder.numChildren < 1)
return; // no need to continue this method if the target is empty
for (var i:int = holder.numChildren - 1; i >= 0; i--)
removeChild(holder.getChildAt(i));
}
This method can clear contents of any DisplayObjectContainer => use it for your messageHolder:
clearHolderContents(messageHolder);
Hope that helps!
I have a bitmap data which draw a text field. after scaling, text are distortion.
I using following code:
// tf is text Field and bm is bitmap.
var tf:TextField = new TextField();
tf.text = "Hello world";
var bd:BitmapData = new BitmapData(200, 200, true, 0x00ff00);
bd.draw(tf);
var bm:Bitmap = new Bitmap(bd);
addChild(bm);
bm.scaleX = 2;
bm.scaleY = 2;
Please guide me.
You should use transform matrix to draw an upscaled text field (or any other vector graphics object) onto a BitmapData.
var mat:Matrix=new Matrix();
mat.scale(2.0,2.0);
bd.draw(tf,mat);
First, increase the font size and then convert and scale as bitmap like so,
//---- Text format ----
var textFormat:TextFormat = new TextFormat();
textFormat.font = "Arial";
//textFormat.bold = true;
textFormat.size = 40;
//---------------------------------------------
//
var tf:TextField = new TextField();
tf.text = "Hello world";
/*tf.antiAliasType = AntiAliasType.ADVANCED;
tf.gridFitType = GridFitType.PIXEL;
tf.thickness = 0;
tf.sharpness = 0;*/
tf.setTextFormat(textFormat);
//
//
var bd:BitmapData = new BitmapData(200,200,true,0x00ff00);
bd.draw(tf);
var bm:Bitmap = new Bitmap(bd);
bm.smoothing = true;
addChild(bm);
bm.scaleX = 2;
bm.scaleY = 2;
Best luck.
I am using the following to rotate a textfield from its top right corner, I would like to know the best way to find the point of the top right corner.
var txt:TextField = new TextField();
txt.autoSize = TextFieldAutoSize.LEFT;
txt.htmlText = "Some text here>";
mtx = txt.transform.matrix.clone();
MatrixTransformer.rotateAroundInternalPoint(mtx, txt.width, 0, -45);
txt.transform.matrix = mtx;
EDITED:
I just written this test code below in the flash IDE (omg that hurts...), obviously there is an embedded font called Arial in the library. I can't get the circle to correctly position on the top right of the textfield.
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.geom.Matrix;
import flash.display.Shape;
import fl.motion.MatrixTransformer;
import flash.geom.Point;
import flash.text.TextFormat;
import flash.text.Font;
Font.registerFont(Arial);
var angle:Number = -45
var txt:TextField = new TextField();
txt.autoSize = TextFieldAutoSize.LEFT;
txt.embedFonts = true;
txt.defaultTextFormat = new TextFormat("Arial", 20, 0x0000ff);
txt.text = "Here is some text";
txt.border = true;
txt.x = 100;
txt.y = 100;
addChild(txt);
var circle:Shape = new Shape();
circle.graphics.beginFill(0x00ff00);
circle.graphics.drawCircle(-5, -5, 10);
circle.graphics.endFill();
addChild(circle);
var mtx:Matrix = txt.transform.matrix.clone();
MatrixTransformer.rotateAroundInternalPoint(mtx, txt.width, 0, angle);
txt.transform.matrix = mtx;
// The top right after being turned -45°
var localPoint:Point = new Point( txt.width, txt.height );
var globalPosition:Point = txt.localToGlobal( localPoint );
circle.x = globalPosition.x;
circle.y = globalPosition.y;
If you mean what was the top right before turning it:
// The field's original top right corner:
var localPoint:Point = new Point( txt.width, 0 );
var globalPosition:Point = txt.localToGlobal( localPoint );
If you mean, after having turned the field:
// The top right after being turned -45°
var localPoint:Point = new Point( txt.width, txt.height );
var globalPosition:Point = txt.localToGlobal( localPoint );
EDIT:
Ok, after seeing your test I experimented with a bunch of things and I think I found something that will work:
var angle:Number = -45
var txt:TextField = new TextField();
txt.autoSize = TextFieldAutoSize.LEFT;
txt.defaultTextFormat = new TextFormat("Arial", 20, 0x0000ff);
txt.text = "Here is some text";
txt.border = true;
txt.x = 100;
txt.y = 250;
stage.addChild(txt);
var local3d:Vector3D = new Vector3D( txt.width, txt.height );
var circle:Shape = new Shape();
circle.graphics.beginFill(0x00ff00);
circle.graphics.drawCircle(-5, -5, 10);
circle.graphics.endFill();
stage.addChild(circle);
var mtx:Matrix = txt.transform.matrix.clone();
mtx.rotate( -45 / 180 * Math.PI );
txt.transform.matrix = mtx;
var globalPosition:Point = txt.local3DToGlobal( local3d );
circle.x = globalPosition.x;
circle.y = globalPosition.y;
If I run this, I get a TextField, turned -45 degrees with a green ball stuck to what-used-to-be-the-bottom-right corner. I don't know your MatrixTransformer class, but it should be able to work with any matrix.
Try and copy&paste this code and fiddle around with it until you get the result you want.
i'm attempting to position a textfield to the bottom left of an image that is added to the display list from the Loader() class. i don't know how to access the width/height information of the image.
var dragSprite:Sprite = new Sprite();
this.addChild(dragSprite);
var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("picture.jpg"));
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, displayPic, false, 0, true);
function displayPic(evt:Event):void
{
dragSprite.addChild(evt.target.content);
evt.target.removeEventListener(Event.COMPLETE, displayPic);
}
var tf:TextField = new TextField();
tf.text = "Picture Title";
tf.width = 200;
tf.height = 14;
tf.x //same x coordinate of dragSprite
tf.y //same y coordinate of dragSprite, plus picture height, plus gap between picture and text
addChild(tf);
within the displayPic function, i could assign the evt.target.content.height and evt.target.content.width to variables that i could use to position the text field, but i assume there is a more appropriate and direct way?
There is no direct way since you have to wait the image to be loaded to access width, and height.
But you can place you text as soon as the complete is done if it`s fit your design. Store the value into some var so you can reuse it when moving the sprite.
//...
var tf:TextField = new TextField();
tf.text = "Picture Title";
tf.width = 200;
tf.height = 14;
addChild(tf);
var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("picture.jpg"));
imageLoader.contentLoaderInfo.addEventListener(
Event.COMPLETE, displayPic, false, 0, true
);
var offsetX:Number=0;
var offsetY:Number=0;
function positionText():void {
tf.x=dragSprite.x + offsetX;
tf.y=dragSprite.y + offsetY;
}
function displayPic(evt:Event):void {
var li:LoaderInfo=evt.target as LoaderInfo;
if (li===null)
return;
li.removeEventListener(Event.COMPLETE, displayPic);
var dob:DisplayObject=li.content;
if (dob!==null) {
dragSprite.addChild(dob);
// set only once the offset depending on the loaded image
offsetX = ...//
offsetY = dob.height+gap //...
// position text using the offset setted
// so you can reuse the function when moving your sprite
positionText();
}
}