AS3: Using embedded font - actionscript-3

I embed font like this (FlashDevelop):
[ Embed( source = "Ubuntu-R.ttf", embedAsCFF = "false", fontFamily = "Ubuntu" ) ]
private static const Ubuntu : Class;
Then try to use like this:
var textField : TextField = new TextField;
textField.embedFonts = true;
textField.defaultTextFormat = new TextFormat( "Ubuntu", 22 );
textField = "免費旋轉 ПРИВЕТ HELLO";
addChild( textField );
Only russian and english parts of the text visible, but not japanese (my PC is russian). If to comment textField.embedFonts = true; line, then the whole text will be visible, but some other (seems like Arial) font used.
Call to Font.enumerateFonts( false ); returns array with one font called "Ubuntu".
Call to Font.registerFont( Ubuntu ); at any place doesn't help.
Adding parameters fontName, unicodeRange = "U+0000-U+FFFF", mimeType = "application/x-font-truetype", fontWeight, advancedAntiAliasing to the font embed directive with different attributes do not change the behavior.
Seems like dead end, but please help.

The font you use does not contain the required glyphs for Japanese. You might try another font, make sure though it has enough glyphs in there. A hint: if the font isn't as big as 1 megabyte, most likely it has neither japanese nor chinese glyphs, if it's bigger, then try embedding and check with hasGlyphs() if it has enough. Once you'll find the correct font, embed and enjoy. But, I'd say use a font that's widely distributed and has japanese glyphs by design, say Arial.

Related

Some local fonts doesn't render on the browser

I've created a small app to view all local fonts on a browser. (Demo).
I'm using Flash to get font names:
import flash.external.ExternalInterface;
ExternalInterface.call("getFontList", getDeviceFonts());
function getDeviceFonts(): Array {
var embeddedAndDeviceFonts: Array = Font.enumerateFonts(true);
var deviceFontNames: Array = [];
for each(var font: Font in embeddedAndDeviceFonts) {
deviceFontNames.push(font.fontName);
}
deviceFontNames.sort();
return deviceFontNames;
}
and later process the names and create a 4 column layout to view them:
function getFontList(fontList) {
$("#flash").remove();
fontList.forEach(function (fontName) {
var cell = elem("div", {"class":"tile"}, [
elem("div", {"class":"fontName"}, fontName),
elem("div", {"class":"demo", "style":"font-family: \"" + fontName.replace(/"/g, '\\"') + "\", Consolas, Arial;"}),
]);
output.append(cell);
});
updateCells($("#input").val());
}
This is working fine, but there's slight problem. Some fonts doesn't render on the browser, and the fallback font is applied.
For example, this font: !PaulMaul. I can view this on MS Word and Photoshop:
and this is how it looks (Consolas applied) on the browser:
I haven't encountered something like this before, so I don't know what the problem is. I thought any local font is usable on the browser, especially if MS Word and PS can render them fine. I guess, that isn't true.
What exactly is the problem here, and is there a way to solve this?
App is available on Github, if anyone wants to tinker.

CycleTile puts a shadow on my images windows phone

I'm trying to make some tasty live tile action for my windows phone 8 app. I've chosen to use the Cycle Tile template for some awesome gliding images but there is a problem: Microsoft seem to have kindly added a grey translucent filter to all the images so that the title text at the bottom is legible even in the case of a white image. This is annoying if the developer intends to make a metro style collage by using WritableBitmap. Whites come out as an off-white grey and the theme colour is a shade darker than all the other tiles:
The code (in a usercontrol in the visual tree):
const double TILE_H = 336;
const double TILE_W = 691;
Size TILE_SIZE = new Size(TILE_W, TILE_H);
const string FILEDIREC = "/Shared/ShellContent";
LayoutRoot.Height = TILE_H;
LayoutRoot.Width = TILE_W;
LayoutRoot.Clip = new RectangleGeometry() { Rect = new Rect(new Point(), TILE_SIZE) };
LayoutRoot.Background = new SolidColorBrush(
((Color)Application.Current.Resources["PhoneAccentColor"]));
TextBlock tb = new TextBlock();
Canvas.SetLeft(tb, 200.0);
tb.Text = "Why is this text grey? + lots more text";
tb.FontSize = 50;
tb.Width = 300;
tb.Foreground = new SolidColorBrush(Colors.White);
tb.TextWrapping = TextWrapping.Wrap;
LayoutRoot.Children.Add(tb);
var bmp = new WriteableBitmap((int)TILE_W, (int)TILE_H);
bmp.Render(LayoutRoot, null);
bmp.Invalidate();
var isf = IsolatedStorageFile.GetUserStoreForApplication();
var filename = FILEDIREC + "/tile.jpg";
if (!isf.DirectoryExists(FILEDIREC))
{
isf.CreateDirectory(FILEDIREC);
}
using (var stream = isf.OpenFile(filename, System.IO.FileMode.OpenOrCreate))
{
bmp.SaveJpeg(stream, (int)TILE_W, (int)TILE_H, 0, 100);
}
imageURIs.Add(new Uri("isostore:" + filename, UriKind.Absolute));
//similar process for other images used by CycleTileData
//these images then added to CycleTileData in the usual way
Any help, explanation, advise or workarounds to get degreying will be greatly appreciated. Thanks. I've tried using the images in different tile types, eg. the front of the flip tile has no issues.
I don't see any obvious issues with the code, but something I would try is to use the Isolated Storage Explorer and download the file and see what it looks like.
When generating custom tiles you may want to consider generating a PNG instead of a JPG. One of the benefits is that you then can generate a transparent image (which means your tile will always have the right theme background color) and PNG also uses a non-lossy compression scheme so there are no compression artifacts introduced.
Take a look at this answer where I describe how I generate tiles in one of my apps. Hopefully that will be of some use to you.

AS3: Embed font two different fonts with same name

I'm embedding a font in AS3 with the following command:
[Embed(source="../font/font1.swf", fontName = "FontName1", fontWeight = "bold" )]
private var myEmbeddedFont:Class;
var _tf: TextFormat;
_tf = new TextFormat();
_tf.color = 0x000000;
_tf.size = 18;
_tf.font = "FontName1";
Now I would like to embedd a second font which is the same font but not bold.
My problem now is: Both vonts (the bold one and the non-bold) have the same name.
What can I do to use both fonts? In the embedding-command fontName="" must be the "real" name of the font. Is there some Kind of an alias I can set for the font-name?
you want to use fontFamily and not fontName. Also, why is your font an .swf? here's what I use :
[Embed(source="../font/font1.ttf", embedAsCFF="false", fontFamily="FontName1")]
private static const Font:Class;
[Embed(source="../font/font1_Bd.ttf", embedAsCFF="false", fontFamily="FontName1", fontWeight="bold")]
private static const FontBold:Class;
With that, AS3 should be able to display both normal anf bold text with your font.
There is nothing like you have to set the "Real" name of the font to set, you can use alias for your fonts.
Like :
for ARIEL(normal) : font Name : Ariel
for ARIEL(bold) : font Name : Ariel_Bold

AS3 > Use different text styles (bold and regular) in the same dynamic text field

I've been using as3 for a lot of years but everytime I need to manipulate fonts I get crazy :(
My setup:
I'm filling up via code a movieClip with a lot of dynamic textFields. Their values come from an external XML.
My problem:
my client wants to insert html tags inside of the xml to have bold text in part of them. For example they want to have: "this string with this part bold".
The Xml part is ok, formatted with CDATA and so on. If I trace the value coming from the xml is html, but it is shown as regular text inside the textfield....
The textfields are using client custom font (not system font), and have the font embedded via embedding dialog panel in Flash by the graphic designer.
Any help?
This is the part of code that fills up the textfields (is inside a for loop)
var labelToWrite:String = labelsData.label.(#id == nameOfChildren)[VarHolder.activeLang];
if (labelToWrite != "") {
foundTextField.htmlText = labelToWrite;
// trace ("labelToWrite is -->" +labelToWrite);
}
And the trace outputs me
This should be <b>bold text with b tag</b> and this should be <strong>strong text </strong>.
Your code looks good. So the issue will be with the embedded Font. When you embed a font in flash, it doesn't embed any separate bold versions, so you may need to embed a bold version of your font.
Some resources:
Flash CS4 <b> tag in with htmlText
I find that html text works best by using the style sheets to declare your fonts instead of text formats.
var style:StyleSheet = new StyleSheet();
style.setStyle(".mainFont", { fontFamily: "Verdana", fontSize: 50, color: "#ff0000" } );
var foundTextField:TextField = new TextField();
foundTextField.embedFonts = true;
foundTextField.autoSize = TextFieldAutoSize.LEFT;
foundTextField.antiAliasType = AntiAliasType.ADVANCED;
foundTextField.styleSheet = style;
foundTextField.htmlText = "<div class=\"mainFont\">" + labelToWrite + "</div>";
See: flash as3 xml cdata bold tags rendered in htmlText with an embedded font
Other reasons maybe:
Are you embedding the right type of font (TLF vs CFF)?
If not using the flash IDE to make your textField, are you registering the font?
Font.registerFont(MyFontClass);
You can work with embeded fonts in Animate graphic design. Just add fonts and create them with a class name.
At Adobe Animate objects library you can add and create fonts as class objects like this:
Select a font and styles to add
Assign a name and export as a Action Script Class
At code frame, you must add the fonts with same classes names created before:
var gothamMediumItalic = new GothamMediumItalic();
var formatMediumItalic:TextFormat = new TextFormat();
formatMediumItalic.font = gothamMediumItalic.fontName;
var gothamBookItalic = new GothamBookItalic();
var formatBookItalic:TextFormat = new TextFormat();
formatBookItalic.font = gothamBookItalic.fontName;
var gothamBoldItalic = new GothamBoldItalic();
var formatBoldItalic:TextFormat = new TextFormat();
formatBoldItalic.font = gothamBoldItalic.fontName;
this.embedFonts = true;
this.antiAliasType = AntiAliasType.ADVANCED;
Finally, you just need to use your box added as graphic object, and set format and content:
var yourText:String = "Some Text";
boxText.defaultTextFormat = formatBook; //My default text font style
boxText.text = yourText; //Full text in same format
boxText.setTextFormat(formatBookItalic,yourText.indexOf("<i>"),yourText.indexOf("</i>")); //Some text in another format found by custom chars
That works fine and lets you use less code and more interface options. I hope this could be usefull for someone.

Adobe TLF and HTML

What is the best way to convert a tlf markup to HTML? I want only standar HTML without the old font tag. I think I saw a utility created by someone for this, but I can remember where it is. any ideas?
Tks.
http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3_Flex/WSc3ff6d0ea7785946579a18b01205e1c5646-7fef.html
var ptext:String = "Hello, World";
var flow:TextFlow = TextConverter.importToFlow(ptext, TextConverter.PLAIN_TEXT_FORMAT);
var out:XML = TextConverter.export(flow, TextConverter.TEXT_LAYOUT_FORMAT, ConversionType.XML_TYPE );
but use TextConverter.TEXT_FIELD_HTML_FORMAT instead of TextConverter.PLAIN_TEXT_FORMAT