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.
Related
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
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
I have a Flex 4/Blaze/Java application and would like to provide my users with a way to switch between several pre-determined skins. Does anyone have a good example of how to do this?
Ideally, the list of themes would be provided by the server -- where the themes are stored. Or do I have to compile in all possible themes into the swf ahead of time?
Check out runtime loading of style sheets.
You can package each style sheet with its skin classes in a swf that can be dynamically loaded by your application at run time using styleManager.loadStyleDeclarations("yourTheme.swf");
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f8c.html
I know that there are questions regarding this same topic, but for HTML. What are some good conventions in regards to using external stylesheets in a Flex app.? How would you break up the stylesheets (names of stylesheets and what they include)?
Flex compiles the external CSS file when you publish your project.
There is a way to load CSS at runtime using Flex; it can be done by compiling CSS files into SWF files and load them at runtime using StyleManager.loadStyleDeclarations.
See the LiveDocs on Stylesheets at Run Time for more info.
Some conventions we use in organizing stylesheets:
Have one main.css stylesheet that holds all of the data for skinning the base application.
Have one fonts.css stylesheet to store all of the fonts in the main app, because these can get quite messy.
The main.css stylesheet is included in the main swf via the <mx:Style source="main.css"/> tag. We load our app with as little as possible, and once everything is loaded, if we need to immediately show some text (sometimes we just have a video playing if it's an advertising site), we fade/tween in the main elements and load the fonts.css via StyleManager.loadStyleDeclarations at runtime.
If we have an admin panel, we have an admin.css stylesheet which we load at runtime because the main app doesn't need it.
We don't need to divide up the CSS anymore than that because we usually create a whole set of skins in a Theme, so the stylesheet is just applying those skins to components and is pretty lean (using Flex 4). I tend not do divide stylesheets into anything smaller (like "pages.css", "comments.css", "popups.css", or even "controls.css", etc.) because it would be overkill and too much to manage for little in return. That's common with HTML, but that's because HTML requires CSS for nice presentation; Flex could do without CSS entirely.
When developing, one of us usually develops most of the skin right away (having a default wireframe setup, like those found on ScaleNine as they do the photoshop/flash/after-effects. There's no way to not have to recompile the css swf if you make changes. But if it is loaded at runtime, you only have to recompile the css file and not the main swf, which is useful but not really useful during hardcore skin development.
I tried keeping the main stylesheet separate during development (in a custom Theme), and it made development a LOT harder, because I had to recompile the css separately every time I made a change and sometimes I had to recompile the main app too, and there were strange and hard-to-track-down bugs, etc. Then I was compiling two different apps. So I recommend keeping the main css file part of the main app.
If you wanted runtime css without having to recompile anything, try Ruben's CSS Loader and check out the source. But that would come at a runtime performance cost.
Flex is not something I've dealt with, but I did some research. It looks like the code to call a remote stylesheet is this:
<mx:Style source="com/example/assets/stylesheet.css" />
Flex Quick Start: Building a simple user interface: Styling your components says this:
Note: You should try to limit the
number of style sheets used in an
application, and set the style sheet
only at the top-level document in the
application (the document that
contains the tag). If
you set a style sheet in a child
document, unexpected results can
occur.
The implication of this seems to be that multiple stylesheets are not really possible. It sounds like what you want to do is organize your stylesheets, check out Organizing Your Stylesheets and Architecting CSS for some ideas for approaches. It looks like you have classes and basic tags, but the W3C stylesheet specifications are different from the Flex stylesheet specification.
As a non-Flex developer, Namespaces looks interesting as a way to organize namespaces: How to use the new CSS syntax in Flex 4.
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