Flex / Flash: How to embed the same font in multiple SWCs - apache-flex

I have the following project structure:
- A Flex Project (SDK 3.3)
- Multiple SWCs with grafics and textfields that are used as components in the Flex project.
Since I have a lot of SWCs that all use the same font in dynamic textfields, I do not want to embed the font in every SWC.
Instead I want to have a library (RSL?) with the font from where all the SWCs load the font.
I tried to build a library file with the fonts using the "Export for runtime sharing" feature in Flash.
While it works perfectly when I stay in Flash, Flex throws an "internal build error" when I try to use these SWCs in Flex.
Any ideas for a good strategy to load the fonts?
Thanks a lot,
Kolt

What I've done in the past was to use flash to create a swf file with the embedded fonts. see this if you're not sure what I mean for this) The link also provides other info you may find useful, its not the link I was trying to find but it covers the necessary.
Once you have your font SWF then you can just reuse this for each project. It's not a swc, but it’s as good as for the purpose of fonts. I've used CS3 to do this (I mention this as I tried the trial of CS4 and I think they may have changed the way you create embedded font swfs)
You can reference the font swf in your CSS file using something like
#font-face
{
src: url("../theFolderWhereTheFileIs/YourFontFile.swf");
fontFamily: "NameOfTheFontYouHaveEmbedded";
font-weight : bold;
}
I create a separate swf file for each type of font and name it appropriately such as StoneSansSemiBold.swf or StoneSansItalic.swf

Related

How to use main application style in module without embedding with runtime style loading in flex 4 verion

I want to load style runtime and apply to modules also.I don't want to embedd stye compile time. Modules not inherite style from main application. I have already loaded style runtime but style not visible in module mainly the font issue. Not able to use fonts which is embedded in CSS. Font size is very large.
why not create an .swf font file which can be loaded in a module separately! or which also if needed will be used by the modules if placed in main index file! regards aktell

Loading swf-fonts with Loader works perfectly in Flex SDK 3.5 - not in Flex SDK 4

For a large project I have the following setup:
a content editor made with Flex SDK 3.5
a content viewer made with Flex SDK 4.1
Both need to work with dynamically loaded fonts as the user can use the fonts he wants.
So we used this approach:
convert the font files with Flash Professional to SWF-files (Creating a Font SWF)
editor: load the fonts with Loader (Loading a SWF font)
the fonts can then be perfectly used within the application to generate htmlText
viewer: the same approach to load the fonts + register them with Font.registerFont (Flex 4 Embed font from swf)
Now the problems: although the loaded fonts are listed when you trace Font.enumerateFonts(false), they are not used in the textarea. There the text is shown with the default font.
Maybe the problem is the fonts are loaded as embedAsCFF for the Text Layout Framework, and that way are not usable in an mx.controls.TextArea? But as I can not change that to a spark TextArea for multiple reasons, I need a solution to use the loaded fonts in that mx.controls.TextArea.
Any ideas? Thanks a lot in advance!
Frank
Apparantly the problem was located in the project properties.
In "Flex Compiler" settings, the checkbox "Use Flash Text Engine in MX components" must be unchecked!
I'm not sure why you're using Flash Pro to create a font swf. You could just as easily done it using CSS by embedding the fonts and compiling it as a themed swf which could be loaded on runtime.
This should work for both Flex 3 and Flex 4 (with TLF).
This CSS code effectively retrofits mx textarea to accept CFF fonts:
mx|global{
textFieldClass: ClassReference("mx.core.UIFTETextField");
}
from the docs: "When MX components use FTE, they can use the same embedded fonts as Spark components, which always use FTE. Otherwise, a font must be embedded with embedAsCFF="false" for use by TextField-based components, and with embedAsCFF="true" for use by FTE-based components." http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UIFTETextField.html

Flex - Modules does not inherit css styles when built with ant

I'm creating a Flex 4 application which contains different modules in it. The main application contains a style sheet and the modules inherit the styles defined in this file.
Its working fine when the swf's are generated using Flash Builder. But when I'm generating it using Ant script, the modules does not inherit the styles and everything looks weird.
I added
isolate-styles="false"
as an additional parameter to mxmlc, but still its not working :(
Can someone please provide your suggestions?
I have never had to do anything special in regards to modules, flex and ANT but maybe I have been lucky. Or there is something else going on in your ant script. You can try being explicit and adding your css files via the compiler argument - [defaults-css-files filename , ... but that would be a brute force method forcing the styles to be recompiled into your module. Another option to help with debugging is to call getMergedStyleDeclaration() from your module so that you can compare the difference between Flash Builder and when ant builds the file. I am sure you have already read this document, but just in case, here is Adobe's information on modular applications.
If none of this helps please post some more detailed information around your current scripts and I can help from there.
Turned out to be a simple solution. All styles except fonts were inherited to the modules.
mx|Module{
font-family : "Myriad Web";
}
Needs to be added when built using ant. Flash builder generated swf's were working fine with out this additional style definition.
I had provided only
s|Application {
font-family: "Myriad Web";
font-size: 12;
font-anti-alias-type:advanced;
}
in the main style sheet.

Flex and embbed fonts shared library

I have a question regarding flex and embed fonts , i want to have a library of embed fonts that will have about 30 different fonts .
Is there any way i can only load the fonts that i use? ( dynamicaly )
Thanks
This page (from the Flex docs) has one approach:
Loading style sheets at run time.
By loading style sheets at run time,
you can load images (for graphical
skins), fonts, type and class
selectors, and programmatic skins into
your Flex application without
embedding them at compile time.
You might also find something useful here: AS3 Runtime Font Loading.

Flex AS3 Project Convert to CS4

Has anyone got experience in converting AS3 projects (no mxml) in Flex, to Flash CS4? Are there any resources out there as to what works in Flex Builder that doesn't work in Flash, and how to get the project running? I read somewhere that (for instance) certain Metadata tags don't work.
If I've got all my code in the src folder, should I just create the .fla file in that folder and basically copy all code from the .as file which launched the Flex project? Or create the .fla file somewhere else and point assign that src folder in the classpath? Also, not being familiar with the CS4 IDE, do I create a new Flash Project?
Thanks!
So here's the issue I'm having. The code in the Flex AS3 looks like this:
[Embed(source='C:/WINDOWS/Fonts/ArialBD.TTF', fontWeight = 'bold', fontName='ArialBold', unicodeRange='U+0020-U+0020,U+0021-...')] //a bunch of other unicode
public static var _VerdanaFontBold:Class;
[Embed(source='C:/WINDOWS/Fonts/Arial.TTF', fontWeight = 'regular', fontName='Arial', unicodeRange='U+0020-U+0020...')] //a bunch of other unicode
public static var _VerdanaFont:Class;
And in constructor of the extended textfield in which my text appears I have:
Font.registerFont(_VerdanaFontBold);
Font.registerFont(_VerdanaFont);
CS4 doesn't allow use of the Embed metadata. So I've commented that out. In CS4, I understand that I'm supposed to create a blank textfield in design mode, which I've done. I then can select fonts to embed. I've selected verdana (upper and lower case, punctuation, number, etc).
When I run the app in CS4, the textfield is blank.
What am I doing wrong? Do I need to give the verdana font an instance name of _VerdanaFont? I wouldn't think so, since I've had to comment out the Font.registerFont as well. The fact that I'm embedding the font in a blank textfield, and not the one that's called by the document class I've set, shouldn't matter, right -- the font should just be embedded in the swf and available for use. But it's blank.
Does anyone know what to do here?
Edit: Well given that the apparent reason this isn't working now has to do with fonts not showing up correctly, I better create that as a new Question. Also, there's a clearer description than the one in the link provided above regarding the document class, here: http://www.heaveninteractive.com/weblog/2008/03/04/introduction-to-the-document-class-in-actionscript-30-tutorial/
It really depends. If it's just a pure AS3 project that relies only on playerglobal.swc it should be fairly easy. Just copy your .as files and add them to your new project as Cameron has suggested.
If however you've written a pure AS3 Flex app that relies on any of the other SWCs (flex.swc, framework.swc, etc) it's not really possible, as CS4 can't use SWC files. If you google around you might find somebody who's disassembled the SWC into various .abc files and a SWF full of resources, but you'll probably end up having to embed the entire Flex framework and all support code into your final SWF, which will bloat it big-time.

Resources