I wanna draw a string to a sprite with a fixed with, and be able to determine the height that the string took up. To give a you a more insight, I'll be creating a simple bubble messaging interface. So I just wanna know how to draw a string to a sprite (or any object you find more suitable), be able to control the width, and get the final height.
Thanks
Update: As a matter of fact, I don't necessarily need to be drawing the string. I just need to create that interface.
Update 2: I tried creating a textfield dynamically, but the problem is that I have no idea how to determine the height of it!
Consider this sample :
var sp:Sprite = new Sprite();
var tf:TextField= new TextField();
sp.addChild(tf);
tf.multiline = true;
tf.text = "line 1 \n line 2 \n line 3";
trace(tf.textWidth);
trace(tf.textHeight);
You should be able to use the height & width of the textbox, to re size the outer sprite.
Related
Basically I've got a bitmap which is an image that the user captures from a webcam which was previously stored as bitmapdata which I converted into a bitmap and added it onto the stage..
From here I want the bitmap to be selectable so I can do other things to it, so I realised I would need to add this into sprite in order to add event listeners onto it.
Having done so, for some reason my application ain't wanting to recognise the events added?
Here is the code I've got..
Bitmap..
//Create a new bitmap from the video capture
image = new Bitmap(bitmap,"auto",true);
//Set the width and height properties
image.width=150;
image.height=125;
//Set the stage position
image.x = 430;
image.y = 280;
stage.addChild(image);
Sprite..
var imageSprite:Sprite;
imageSprite = new Sprite();
imageSprite.x = 200;
imageSprite.y = 50;
imageSprite.addChild(image);
stage.addChild(imageSprite);
Event listener:
imageSprite.addEventListener(MouseEvent.MOUSE_DOWN, SelectWebImage1);
Function:
function SelectWebImage1(e:MouseEvent): void {
trace("Clicked");
}
I receive no errors from this but I noticed that when I have that code written in my application, all of the code underneath it doesn't seem to function?
I really don't know what i'm doing wrong, any help appreciated thanks!
When you set Sprite's dimensions, you implicitly set its scale, and also if you place some graphics by using width and height, the width and height includes any sprite's children, accounting for their position. You should place that bitmap into imageSprite and not set x,y proerties for the bitmap, this way you won't have to account for its position inside the sprite to position the bitmap.
I've read tons of posts about setting the size of a TextField to match the width of the string containing it. I'm looking for a way to do it the other way around. The TextField in my application should have a fixed with and I want to squeeze the text in it by changing the width of a single character.
The solution I'm working width now decreases the size of the font until it fits into the TextField, but I want to squeeze the text (so decreasing just width, not height) until it fits in the TextField. Any ideas how to achieve this?
I don't think it's possible to scale font on a single axis.
The only thing i could think of is to bake the text field and scale the resulting bitmap:
var tf:TextField = new TextField();
tf.text = "bitmap text";
var myBitmapData:BitmapData = new BitmapData(80, 20);
myBitmapData.draw(tf);
var bmp:Bitmap = new Bitmap(myBitmapData);
this.addChild(bmp);
Source
I'm trying to create a TextField which will look smooth enough when animated. The only option, when I can get smoothly-animated textfield, is setting antiAliasType property to AntiAliasType.NORMAL; But I'd like to play with text antialiasing to make letters a little bit thicker. So I change the antiAliasType to AntiAliasType.ADVANCED.
After that the textfield looks jumpy when animated (it looks like glyphs are being snapped to pixel-grid). Change of property gridFitType of the textField doesn't make any sense.
Has anyone achieved smooth text-field animation when antiAliasType is switched to AntiAliasType.ADVANCED? (The jumpy text occurs when switching to TLF text fields either)
Here is my short code:
var p:TextField = new TextField();
var font:Font = new Font1XXX();
// font is embedded int the library and exported as Font1XXX class
var tfor:TextFormat = new TextFormat();
tfor.font = font.fontName;
tfor.size = 15;
tfor.color = 0xFFFFFF;
p.defaultTextFormat = tfor;
p.autoSize = TextFieldAutoSize.LEFT;
p.antiAliasType = AntiAliasType.ADVANCED;
p.gridFitType = GridFitType.NONE;
// change to GridFitType.NONE does not make any sense;
p.selectable = false;
p.embedFonts = true;
p.text = "HELLO WORLD";
addChild(p);
If you don't need selectable text, draw the textfield into a bitmap and add the bitmap to the stage instead of the textfield.
Every text in flash is snapped to whole pixels, resulting in any animation in regards to them will feel "jagged".
Workarounds are to convert any "static text" into a shape and place inside movieclip or to "copy" the text into a bitmap and animate that bitmap. Depending on what type of animation you want to do, different solutions are required for best visual experience.
For instance, scrolling text, it would probably be best to cache it as bitmap and then move it along the axis.
Scaling up/down a text (if it is scaled a lot). This sucks, I haven't found a good way to resolve this without visual artifacts. Best solution is usually to copy the text into another clip, hide the text and then animate quickly or try to cover it with other effects so focus is taken away from the text itself.
I wonder know how to get the width of my string in pixels
BitmapFont API < 1.5.6
To mesure the width of a String you use your Font and get the bounds of the String, you are going to draw.
BitmapFont.getBounds(String str).width
BitmapFont API
You can get the height to for the right offset for drawing too. Just replace width with height.
In addition for multiline texts use getMultiLineBounds(someString).width to get the bounds.
BitmapFont API >= 1.5.6
The BitmapFont API changed in 1.5.7 so there is a different way to get the bounds now:
BitmapFont.TextBounds and getBounds are done. Instead, give the string to GlyphLayout and get the bounds using its width and height fields. You can then draw the text by passing the same GlyphLayout to BitmapFont, which means the glyphs don’t have to be laid out twice like they used to.
Source (Web archive)
Example:
GlyphLayout layout = new GlyphLayout(); //dont do this every frame! Store it as member
layout.setText("meow");
float width = layout.width;// contains the width of the current set text
float height = layout.height; // contains the height of the current set text
According to #Nates answer: https://stackoverflow.com/a/20759876/619673 calling method
BitmapFont.getBounds(String str).width
not always returns proper width! Especially when you are reusing font.
If you want draw text for example in the center of part of view port, you can avoid this problem by using another method
BitmapFont.drawWrapped(...)
Example code:
font.drawWrapped(spriteBatch, "text", x_pos, y_pos, your_area_for_text, BitmapFont.HAlignment.CENTER);
If you use skins in UI it is a hassle to find out the correct font to feed into the GlyphLayout.
In this case I use a throw away instance of Label to figure everything out for me then ask the Label for the width.
Skin skin = getMySkin();
Label cellExample = new Label("888.88888", skin);
cellExample.layout();
float cellWidth = cellExample.getWidth();
Table table = new Table(skin);
table.defaults().width(cellWidth);
// fill table width cells ...
This is not the answer if you want to position the text yourself, but it is useful to make a UI layout stable and less dependent on the actual content of the cells.
I would like to add a movieclip to a textfield. The objective is to be able to scroll the movie clip, since the uiscrollbar only works for textfield, i think my solution to scrolling the movie clip is to put it inside a textfield.
I have tried something like:
myText.addChild(myClip);
but failed with error: 1061: Call to a possibly undefined method addChild through a reference with static type flash.text:TextField.
The problem is that a TextField is not a DisplayObjectContainer, so you can't add children.
(The good news is that there are a number of alternate solutions you can find through Google)
You won't be able to add it to a textfield and I'm not exactly sure what you're mean by "scrolling the movie clip" but assuming you have a movieclip that is larger than the area you want to display it, something like this might work:
<s:Group>
<s:Scroller>
<mx:SWFLoader source="#Embed(source='movieclip.swf')"/>
</s:Scroller>
</s:Group>
Sorry if this is a bit of a thread-jack, but I recently had a situation where I needed this type of functionality. And while I'm sure you no longer need an answer to this, I hope that the solution that I came up with will help someone else.
Dear god, why would someone do this?!
In my particular case, I had an extremely long textfield that needed to scroll. In my experience, scrolling by moving the movieclip vertially is unreliable when dealing with extremely long textfields which necessitated that I use the Adobe/Flash uiscrollbar-esk method of adjusting the scrollV of the text field.
This was further complicated by the need for both in-line images which pulled from the library (as opposed to an external source) as well as a black-box border around a section of the text, both of which needed to scroll along with the text.
In a nutshell, one would probably only need to do something like this for a completely self contained swf and under extenuating circumstances (like pharma banners).
Inserting Images From Library:
To accomplish this you need to create a movieclip from an image in the library and export that movieclip for Actionscript. Then, in your code, add something like this:
//This is a string from your textfield that you will replace with an image
var matchForImageSplit:String = 'IMAGE 1 GOES HERE';
//This is the code to replace the above string
//Here, "Image1" is the class name of the exported MovieClip
var imageToAdd:String = '<img src="Image1" />';
my_text.htmlText = my_text.htmlText.split(matchForImageSplit).join(imageToAdd);
Adding the black-box border around text:
This was a bit more tricky. What I had to do was create a MovieClip with a border at the size I needed and give it a name. Then I positioned it behind the text where it was supposed to go, and enclose all of that in a parent_mc movieclip.
I then had to code the box to move along with the scrolling. The below is specific my project, but this is the gist of it:
//THIS CODE IS NON-FUNCTIONAL AND SHOULD ONLY BE USED AS A REFERENCE
//Redundant - just making the example more clear.
var my_text:TextField = parent_mc.my_text;
var borderBox:Sprite = parent_mc.borderBox;
//Vars for calculating position and movement
var borderBoxStartY:Number = borderBox.y;
var incrementRate:Number = my_text.textHeight/my_text.numLines;
var sPos:Number;
var top:Number = dragger.y;
var bottom:Number = (dragger.y + track.height) - dragger.height;
var range:Number = bottom - top;
var ctrl:Number = parent_mc.y; //"parent_mc" is the parent MC that contains the textField and borderBox
function dragScroll():void {
ratio = my_text.maxScrollV/range;
sPos = (dragger.y * ratio) - ctrl;
my_text.scrollV = Math.ceil(sPos);
borderBox.y = ((borderBoxStartY + incrementRate) - (my_text.scrollV * incrementRate));
}
One caveat to note before trying all of this is that when utilizing scrollV, text is moved line-by-line and therefore does NOT scroll smoothly (as it would with position based scrolling). This can result in the scrolling looking "jerky".
EDIT:
I should also note that this was all custom programmed and does not actually utilize the scrollPane/uiscrollbar components, but behaves in the same fashion.