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.
Related
I want click on button not text
btn_start.t1.text = "hello world" // not working
Rough code... You will have to work on it but it seems easy.
You just have to set your text for each states of the SimpleButton for each states when you create it.
That's all.
Now you may embed fonts, change the style of your TextField...
var btn_start:SimpleButton = new SimpleButton();
addChild(btn_start);
btn_start.upState = drawUpstate(0xcc5500,"upstate");
btn_start.downState = drawDownstate(0x444444,"downstate");
btn_start.hitTestState = drawDownHitTeststate();
btn_start.overState = drawOverState(0x888888,"overtstate");
addChild(btn_start);
placeButton(btn_start,50,50);
function drawUpstate(color:int, btnLabel:String):Sprite {
var btn_color:uint = color;
var mc:Sprite = new Sprite();
var textLabel:Sprite = new Sprite();
var tf : TextField = new TextField();
tf.textColor = 0xffffff;
tf.text = btnLabel;
mc.addChild(tf);
var g:Graphics = mc.graphics;
drawButton(g,btn_color);
return mc;
}
function drawDownstate(color:int, btnLabel:String):Sprite {
var btn_color:uint = color;
var mc:Sprite = new Sprite();
var textLabel:Sprite = new Sprite();
var tf : TextField = new TextField();
tf.textColor = 0xffffff;
tf.text = btnLabel;
mc.addChild(tf);
var g:Graphics = mc.graphics;
drawButton(g,btn_color);
return mc;
};
function drawDownHitTeststate():Sprite {
var btn_color:uint = 0x0000000;
var mc:Sprite = new Sprite();
var g:Graphics = mc.graphics;
drawButton(g,btn_color);
return mc;
};
function drawOverState(color:int, btnLabel:String):Sprite {
var btn_color:uint = color;
var mc:Sprite = new Sprite();
var textLabel:Sprite = new Sprite();
var tf : TextField = new TextField();
tf.textColor = 0xffffff;
tf.text = btnLabel;
mc.addChild(tf);
var g:Graphics = mc.graphics;
drawButton(g,btn_color);
return mc;
};
function drawButton(g:Graphics,color:uint) {
g.beginFill(color,1);
g.drawRect(0,0,100,20);
g.endFill();
};
function placeButton(btn:SimpleButton,x:uint,y:uint):void {
btn.x = x;
btn.y = y;
};
Best regards.
Nicolas
I'm adding some circles to away3d as sprite3ds, but for some reason they all have white backgrounds that I can't seem to remove. Anyone know what I'm missing:
var hotspot:Hotspot = e.target as Hotspot;
var spBoard:Sprite = new Sprite();
spBoard.x = circleX;
spBoard.y = circleY;
var shCircle:Shape = new Shape();
shCircle.graphics.lineStyle(2,0x000000);
shCircle.graphics.drawCircle(0,0,circleR);
shCircle.x = 0;
shCircle.y = 0;
var shFill:Shape = new Shape();
shFill.graphics.lineStyle(1,0x000000);
shFill.graphics.moveTo(0,0);
shFill.graphics.lineTo(circleR,0);
shFill.x = 0;
shFill.y = 0;
var shAngle:Shape = new Shape();
var shArrow:Shape = new Shape();
shArrow.graphics.lineStyle();
shArrow.graphics.beginFill(0x000000);
shArrow.graphics.moveTo(angleR,1);
shArrow.graphics.lineTo(angleR-5,8);
shArrow.graphics.lineTo(angleR+5,8);
shArrow.graphics.lineTo(angleR,1);
shArrow.graphics.endFill();
spBoard.addChild(shFill);
spBoard.addChild(shAngle);
spBoard.addChild(shArrow);
spBoard.addChild(shCircle);
var hotspotTimer:MovieClip = new MovieClip();
hotspotTimer.addChild(spBoard);
var bounds:Rectangle = hotspotTimer.getBounds(hotspotTimer);
var bitmapData : BitmapData = new BitmapData(512, 512);
bitmapData.draw(hotspotTimer);
var bitmapPointsTexture:BitmapTexture = new BitmapTexture(bitmapData);
var _pointsMaterial:TextureMaterial = new TextureMaterial(bitmapPointsTexture);
var inworldHotspotTimer:Sprite3D = new Sprite3D(_pointsMaterial,bitmapData.width,bitmapData.height);
inworldHotspotTimer.x = hotspot.x;
inworldHotspotTimer.y = hotspot.y;
inworldHotspotTimer.z = hotspot.z;
scene.addChild(inworldHotspotTimer);
}
I've seen in blog posts such as this
http://www.allforthecode.co.uk/aftc/forum/user/modules/forum/article.php?index=6&subindex=4&aid=315
On how they do it, but they're using an older version with the BitmapMaterial removed.
Change the line that declares the bitmapdata to this:
var bitmapData : BitmapData = new BitmapData(512, 512, true, 0x00808080);
If you don't fill the bitmap with a color that has alpha of 0, you'll get the borders in the texture.
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;)
I'm wondering how I can create a dynamic rectangle which has some text in it, the text is dynamic so the rectangle has to adapt to the length of the text. Any ideas on how to approach this?
here is a basic one for single line text:
import flash.display.Sprite;
import flash.text.TextField;
var rectClip:Sprite = new Sprite();
var rect:Sprite = new Sprite;
rect.graphics.beginFill(0xff0000, 1);
rect.graphics.drawRect(0, 0, 100, 100);
rect.graphics.endFill();
var tf:TextField = new TextField();
tf.autoSize = "left";
tf.text = "Lorem ipsum dolor sit amet...";
addChild(rectClip);
rectClip.addChild(rect);
rectClip.addChild(tf);
rect.width = tf.textWidth + 12;
rect.height = tf.textHeight + 12;
tf.x = Math.round(rect.width/2 - tf.width/2);
tf.y = Math.round(rect.height/2 - tf.height/2);
Rob
Another way if you want to draw your rectangle in Flash instead of actionscript (although the above way might be more useful).
Create a layer with a rectangle.
Make the rectangle some sort of graphic or sprite and set it to 9-slice scaling. This way the rectangle will scale properly with the textbox (good if it's a rounded rectangle)
Also choose Linkage for the rectangle and give it a class name (say, "Background")
public var textBackground:Background; // can make public or private depending if you leave it on the stage or generate it
private var myTextField:TextField;
Then have two functions:
private function createTextField():void
{
// create your textfield here using actionscript
myTextField = new TextField();
// customize your textfield
}
private function createTextBackground():void
{
textBackground = new Background;
textBackground.height = myTextField.height + 20;
}
Then:
createTextField();
createTextBackground();
addChild(textBackground);
addChild(myTextField);
I usually change the height depending on the text and set the width to a fixed width and set my positioning how I like.
If the TextField is multiline, you will need to set a fixed width , you can then determine the TextField height after it's been formatted.
private var format:TextFormat = new TextFormat();
private var textWidth:int = 300;
private var hPadding:int = 10;
private var vPadding:int = 10;
private var boxColor:uint = 0x990000;
private function init():void
{
var tf:TextField = getTextField("Your text..........etc...");
tf.x = hPadding;
tf.y = vPadding;
var rectWidth:int = textWidth + ( hPadding * 2);
var rectHeight:int = tf.textHeight + ( vPadding * 2);
var container:Sprite = getTextContainer( rectWidth , rectHeight );
container.addChild( tf );
}
private function getTextField( text:String ):TextField
{
var tf:TextField = new TextField();
tf.defaultTextFormat = format;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.multiline = true;
tf.width = textWidth;
tf.text = text;
// etc...
return tf;
}
private function getTextContainer(width:int , height:int ):Sprite
{
var sp:Sprite = new Sprite();
with( sp.graphics )
{
beginFill( boxColor );
drawRect( 0 , 0 , width , height );
endFill();
}
return sp;
}
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();
}
}