How to have several embeded font in a html textfield? - actionscript-3

I'm building a as3 application which displays a textfield with html text inside.
I need to embed the font to have the same aspect on any device.
So I have:
var Arial:Font=new ArialClass();
var myFormat:TextFormat = new TextFormat();
myFormat.font=Arial.fontName;
texte = new TextField();
texte.embedFonts=true;
texte.defaultTextFormat = myFormat;
The problem is that if there's a word in bold it will be displayed like the rest of the text.
Can I add several font to the textformat ?
Thanks

Related

Text Input Rotation + Styling the text

I have textInput on stage, it's not the component; but rather a textField which is set to behave as inputText. I also have a button on stage to bold the selected portion of the text in the inputField.
Here's the code, which works perfectly fine:
var formatDefBold: TextFormat = new TextFormat();
formatDefBold.bold = false;
var formatBold: TextFormat = new TextFormat();
formatBold.bold = true;
boldBtn.addEventListener(MouseEvent.CLICK, makeBold);
function makeBold(event: MouseEvent):void
{
var sbi:Number = myInputField.selectionBeginIndex;
var sei:Number = myInputField.selectionEndIndex;
if (sbi != sei)
{
var section:TextFormat = myInputField.getTextFormat(sbi,sei);
if (section.bold == false)
{
myInputField.setTextFormat(formatBold, sbi, sei);
}
else
{
myInputField.setTextFormat(formatDefBold, sbi, sei);
}
stage.focus = this[selectedTextField]; // highlight the selected text again.
}
}
PROBLEM:
When I rotate the textInput, the text disappears. If I embed the font and choose another anti-aliasing method like "Anti-Alias for animation", the rotated textInput displays the text fine, but the makeBold function doesn't work.
I've tried different fonts. Sans, Arial, which I embedded all it's styles (Bold, Italic, Bold-Italic). nothing!
I've tried placing the textInput inside a movieClip and rotate the movieClip instead. doesn't work.
I've also tried setting the embedFonts parameter for the textInput too, not sure if I did it correctly
myInputField.embedFonts = true;
this time the text disappears even when the textField is not rotated.
I'm really stuck and can't think of anything else to make the bold function work with a rotated textInput.
Embedding method
For any operations like rotation applied to a text field, you should first embed the text font.
myText.text = "rotation with embed font";
myText.rotation = 10;
Your text field 'myText' is physically put on the scene. When you click on it, in the window 'Properties', do that:
anti-alias (Anti-alias for animation)
font embed
To embed the font, click on 'embed' button > window 'Font Embedding' > 'Character ranges' > select: 'Uppercase', 'Lowercase', 'Numerals', 'Punctuation'. (don't click on 'All')
3D method
You can also rotate a dynamic text field without embedding fonts using the 3D methods available in Flash Player 10.
var myTextField:TextField = new TextField();
this.addChild(myTextField);
var fo:TextFormat = new TextFormat("Arial", 11, 0xFF0000);
myTextField.defaultTextFormat = fo;
myTextField.text = "3D rotation";
myTextField.rotationZ = 45;
In your case...
In your case, the following code works perfectly (you just have to put a button named 'boldBtn' on your scene):
var myInputField:TextField = new TextField();
this.addChild(myInputField);
var fo:TextFormat = new TextFormat("Verdana", 12, 0x000000, false);
myInputField.defaultTextFormat = fo;
myInputField.text = "3D rotation";
myInputField.rotationZ = 45;
boldBtn.addEventListener(MouseEvent.CLICK, makeBold);
function makeBold(event:MouseEvent):void
{
fo.bold = !fo.bold;
myInputField.setTextFormat(fo);
}
I set the anti-aliasing to it's default value which is "use device fonts" and used rotationZ to rotate the text field. and it worked!
using rotation (not rotationZ) with default anti-aliasing doesn't show the text.
and using rotation (not rotationZ) with anti-aliasing makes the bold function not work.
so this is solved with just adding this line of code:
myInputField.rotationZ = 45;

AS3 change only font of TLFTextField

To change font in TLFTextField I need to do something like this:
var textFormat:TextFormat = new TextFormat();
textFormat.font = "NewFontName";
textField.defaultTextFormat = textFormat;
and it works ok, but I loose all other previous properties of textField like color, font size or align. How can I overcome this? I don't want new TextFormat, I want to change font only in existing one. I set color and align in fla file and I want to change font in AS code.
Easiest approach is:
var format: TextFormat = textField.defaultTextFormat;
format.font = "Consolas";
textField.setTextFormat(format);
Or you can store reference on TextFormat, if you change it often

Embedded fonts not appearing in actionscript created textfields

I would like to preface this wall of text by saying, I am very new at this. I may be missing something obvious.
I'm working in Flash CS5 with Actionscript 3. I'm trying to use actionscript to create a textfield, and populate it with text. I've embedded my font in my project using the "Font Embedding" window. However, when the code to create the textfield is run, if "embedFont = true;", the font is invisible. The cursor still changes when hovering over it, so I know it's there. Or at least its text box is, I guess. Dynamic textfields with embedded text which are already on the stage seem to be unaffected.
I've tried changing the embedded fonts outline format, neither work. I've tried directly embedding the font with the "embed" tag via actionscript, but it doesn't seem to work with CS5, or I don't know what I'm doing. As you can see in the code provided, I've tried "registering" the font, with no success. I've tried using:
var font:Font = new screenfont(); //"screenfont" is the name from Embedding Fonts
var format:TextFormat = new TextFormat();
format.font = screenfont.fontName;
No dice.
I've followed some different tutorials about embedding, and come across a wealth of conflicted, confusing information. I've read a few different posts pertaining to this subject, but haven't found any viable solutions as of yet.
Here's a simple version of my code, where "screenfont" is the name I specified in the Embedding Fonts window:
Font.registerFont(screenfont);
//TextFormat
var listformat:TextFormat = new TextFormat();
listformat.align = TextFormatAlign.LEFT;
listformat.size = 20.8;
listformat.color = 0x0DAC54;
listformat.font="Fixedsys Excelsior 3.01";
//TextField
var photolist:TextField = new TextField();
photolist.x = photos_x;
photolist.y = tempY;
photolist.width = photos_wdth;
photolist.height = photos_hght;
photolist.text = photoname;
photolist.embedFonts = true; //<--- This freakin' guy!
photolist.antiAliasType = AntiAliasType.ADVANCED;
photolist.defaultTextFormat=listformat;
photolist.selectable = false;
photolist.wordWrap = true;
mediapage.photos.addChild(photolist);
I hope this provides a clear picture.
So, how exactly is embedding accomplished in CS5?
You should set the text as the last thing you do. So this line photolist.text = photoname; should be after everything else.
var photolist:TextField = new TextField();
photolist.x = photos_x;
photolist.y = tempY;
photolist.width = photos_wdth;
photolist.height = photos_hght;
photolist.embedFonts = true;
photolist.antiAliasType = AntiAliasType.ADVANCED;
photolist.defaultTextFormat=listformat;
photolist.selectable = false;
photolist.wordWrap = true;
photolist.text = photoname;//<-- set text only after applying all formatting and embedding
mediapage.photos.addChild(photolist);

AS3: Embedding characters

I having some trouble with TextFields and caracter embedding. As I have understood, the way to embed character in Flash, is to have a TextField in a movieclip that is exported to actionscript via some classname. Then have the TextField embed the characters.
But when i try to use that TextField in my project, I cannot auto resize the field any longer!? Is there a better way to embed charactes? or am I missing some unknow attribute? (and yes i have tried TextField.autoSize = "left" (or "center" or "right")).
The TextField is configured like this in Flash CS4:
Properties:
http://screencast.com/t/0VB6KnNO6G
Library implementation:
http://screencast.com/t/w3yQLqit0veI
And I embed the MovieClip containing the TextField like this:
protected var tabname:MovieClip = new Text(); // The property on the object
Adding the text and setting its Settings:
var txt:TextField = tabname.txt;
if( !contains(tabname) )
{
addChild(tabname);
var format:TextFormat = new TextFormat();
format.bold = true;
format.font = "Arial";
format.size = 12;
format.align = "left";
var dropShadow = new DropShadowFilter(0);
dropShadow.color = 0xFFFFFF;
dropShadow.strength = 2;
dropShadow.blurX = dropShadow.blurY = 5;
dropShadow.alpha = .7;
txt.type = TextFieldType.DYNAMIC;
txt.multiline = tabname.wordWrap = false;
txt.autoSize = TextFieldAutoSize.LEFT;
txt.defaultTextFormat = format;
txt.filters = [dropShadow];
txt.mouseEnabled = false;
txt.x = 10;
}
txt.text = value;
txt.y = Math.ceil((tabmask.height - txt.height) /2);
To embed fonts, don't rely on wrapping them in MovieClips in the library. They should be embedded correctly as Fonts. I have included some basic steps below for embedding fonts, then an example for your particular situation:
1 - Make the textfield Dynamic and click the Embed.. button
2 - Name the font with something meaningful (like the fonts name) and tick the character sets you will be using (usually I select caps, lowercase, numbers and punctuation). Also note the Style is 'Bold', you will need to embed a font set for each style. So if you want to use Bold and Regular, you need to embed 2 fonts.
3 - If you plan on adding textfields dynamically through ActionScript, goto the ActionScript tab and add a class for it (again, use a meaningful name)
4 - Finally click ok, and away you go. I have setup an example, using these steps, and the auto size method, you can see the results below
In Flash, you can click the [Embed...] button below the TextField's character properties. In the window that you get then, you can specify which characters you want embedded in your textfield.
There's a lot more to say about font embedding but this is the simple story. Flash CS5 added TLF TextFields but I don't think you were referring to those, right?
The autoSize property really has nothing to do with font embedding but I guess your TextField is not Dynamic when you cannot auto resize it?
Are you using CS5 or CS4 or earlier by the way?

ActionScript Dynamic HTML Text With Embedded Fonts?

i'm trying to use htmlText on a dynamic text field with embedded fonts. i've searched for an hour for an answer and i still don't have one.
on stage, there is a dynamic text field with no text. i've embedded both regular and bold versions of Myraid Pro. the text field on stage is set to regular (have to choose something). "Render Text As HTML" is selected.
the following code in my document class doesn't work:
myText.autoSize = TextFieldAutoSize.CENTER;
myText.htmlText = "Not Bold <b>Bold</b>";
the html tags only work if the text field on stage is set to "use device fonts" in the anti-alias setting.
unreal.
It may be your embed parameters missing embedAsCFF='false', try something like:
[Embed(source='path/to/foo.otf', fontName='foo', embedAsCFF='false')]
In flex 4 the default is true to take advantage of the new text engine while flash.text.TextField relies on the old engine. There's more details here.
Well i have faced this problem. i forgot the solution but i have clue for you.. Try this way
var myFormat:TextFormat = new TextFormat();
myFormat.font = "Arial";
myFormat.size = 14;
myText.autoSize = TextFieldAutoSize.CENTER;
myText.defaultTextFormat = myFormat;
myText.embedFonts = true;
myText.htmlText = "Not Bold\n";
myText.appendText("Bold");