I have seen lots of questions related to font embedding in flash and I can't seem to find an answer to my problem.
I load fonts from a font swf and register them at a high level so that they can be used in child swfs. The issue is the child swf might also embed these fonts, but not explicitly so, meaning they are only embedded because there are fields in the child swf that use certain characters of a font. This means the text fields in the child use the incomplete embedded font instead of the embedded complete set that is registered in the parent or any level of grandparent. Also this means the swfs that may become children of this child won't get the complete font.
My question:
Is there any way to tell flash at compile to not embed, under any circumstances, fonts into a swf? If not is there a tool that removes embedded fonts from a compiled swf?
Here's a few things I have given thought to/noticed so far:
It seems as if each Font class is tied to an ApplicationDomain. ( Confirmation of this would be helpful )
Using device fonts on text fields will not cause any fonts to embed. ( Not an option for me however because I need the fields to embed fonts at runtime from a parent swf. )
I can't find a way to unregister fonts or simply tell loaded child swfs to use parent fonts, which would be useful to apply to the loaded child swfs.
It may be possible to load the child in a different context that would allow parent definitions of a fonts to override the child definitions. ( Or would there be two definitions and if so which one takes priority? )
Loading assets from the library of the child and adding them to the stage will get the parent definition of the font. ( this makes sense because the asset is created outside the domain of the child )
A possible solution might be to not add any characters to the textfields for compile of the swf, but this isn't really an option either because I need static text using any font.
I've started forming a definition of what the problem is in my mind that may be incorrect, so please if necessary take a few steps back and give me a different perspective on the problem. So far it seems like the question I asked above is the right question to answer and if there is a solution to it, all my problems go away.
Thanks!
If I am right in understanding, than you want to remove/unregister all fonts that are not that complete as the version of this specific font that was already loaded, but embedded in another swf?
Every Font that is embedded creates a class, every swf you load via the Loader class is by default loaded in its own application domain, to prevent namespace clashes, but you can force the loader to load everything into the current application domain with the »loader context« parameter of the Loader's load() method. So this way you could try to force to override classes in the same namespace with each other, but than you cannot control which class to throw away, means you cannot check which font has more glyphs. (maybe it just throws errors instead of overriding and doesn't run at all, i am not that sure about this).
On the other hand you should question how fonts are actually embedded in the child's swf-files. I know no other way than to embed fonts as:
in *.fla-files as »library symbol«,
or in code of flashbuilder or flex like this:
[Embed(source="c:/windows/fonts/verdana.ttf", fontFamily="Verdana", embedAsCFF="false")],
or this:
#font-face {
src: url("../assets/MyriadWebPro.ttf");
fontFamily: myFontFamily;
advancedAntiAliasing: true;
}
in mxml files. So the (that is what I guess) the resulting Name of the class that is generated depends on the »font-family« property (or even more settings) given by the developer, means even if the same font is embedded twice the class-name might differ caused through the settings.
Also there is no Font.unregisterFont() method, so how to manage this stays a good question, just in case that you might find the same Font class somehow (perhaps RegExp becomes a friendly helper).
I think to solve this properly you need control at compile time, using xml based *.xfl project files might help but even than the referenced Font-File can have a different Name.
A nice problem, good luck
I had a lot of problems using fonts with flash. It is still a problem on html with different browsers rendering in different ways.
Anyways, for flash, I built this toolkit that helps me a lot. Check how to customize your fonts. If you do the steps I am pretty sure the problem will be solved.
https://github.com/tbwa/AS3-Toolkit/tree/master/src/com/utils/text
Turns out this is an bug with my version of Flash Professional. I did an update and runtime shared fonts are now possible. I will probably point the shared font at a bad url for the fonts then the fonts will come from the parent application domain because they aren't compiled into the child swfs. I'm using Flash Professional CS5.5 11.5.1 now. I was using CS5.5 11.5.0.
http://forums.adobe.com/message/3926344
Thanks Adobe for wasting my time.
Related
Context: I ran a link sleuth / error checker on my Wordpress website, and found some broken links originating within style.css. These were caused by the theme developer who set up a long list of CSS definitions for certain classes that would load images for them by using the 'background: url()' property, when the classes are present of course. Well this raised 2 general issues for me as follows, and I searched everywhere but couldn't find the answers (the main question is in the title, can you please think of these as 'sub-questions'?):
Doesn't this way of building style.css load a lot of extra unnecessary cruft into the session? Maybe not. I am pretty sure that these image files themselves are not actually requested by the browser unless needed by the page, but I am not sure the process of how this works. Is it that the browser gets the stylesheet, parses it in conjunction with the HTML to determine which classes are 'present', and then requests the stylesheet-linked images from the server accordingly? So in that case, the "background: url(image.png)" definitions that are unused (due to that class not existing on the page), would just be ignored, and that line of the .css file would represent a link to 'somewhere' that is in the 'namespace' of the DOM, but the line of code just sits there, it isn't acted upon, and the file is not pre-fetched or anything? Do I have this correct, close enough, or how could I learn more about this topic?
What happens if, (as it does in this case which the link sleuth showed me), the image linked to from within the stylesheet actually returns a 404? I know this is happening because the theme developer forgot to add those assets into the website folder structure. But is the browser itself 'making it to' all of those 404 errors each time it parses the stylesheet (which presumably would impact performance somewhat, or trigger various alerts on my server software and other places due to all of these invalid link requests)? Or again, are those links just ignored since the classes don't exist in this particular instance of the markup, and so they would only be requested case-by-case in the event that the resource is actually needed by some code on the site?
If I embed icons in the CSS file and refer to the style name in action script code, is that a good practice? Will that increase the swf size?
Any help would be really appreciated.
Thanks,
Gurjaspal
Yes, whatever way you choose, the font face will be embedded inside the SWF file.
Two ways to limit file size when using embedded fonts are :
Include only the needed character range. See this page for more information.
You can embed fonts in the main application and reference them in other parts of the application that are loaded later on (modules or their stylesheets)
Yes... Embed away. Flex has many built in compression algorithms that do a fantastic job of reducing file size. I've tried to optimize this process myself when building for web delivery and ultimately I could not get the file any smaller than flex could embedding the assets natively.
EDIT:
My assumption on adding this second answer is you were asking about icons (imagery) and not fonts.
My Flex app allows people to enter text. There's a broad selection of fonts to choose from. Because it is a multi-lingual app, some of those fonts (e.g. Chinese) are very large indeed - too big to embed all fonts.
I know that I can load fonts at runtime via stylesheets - I plan to do this as people select a font (a small wait while the font loads is not a problem). What I want to be able to do is to unload those fonts again, so that the app doesn't consume huge amount of memory if people select one font and then another.
I can't see a way to do it, though. I can load fonts at runtime, but not unload them. Any ideas?
I did see this question on SO that mentions loading fonts as part of a module - with one font per module, I guess. The advantage being that modules can be unloaded. But then, the font isn't accessible outside the module, as the questioner points out. So that seems like a dead end.
If it's not possible, I will - sadly - accept an answer that shows me that it's impossible, but much more useful would be an alternative strategy! This must be a pretty common scenario that people have run into before...
As your intuition suggests, this is a relatively common scenario for flex developers - there's got to be a solution!
As you have suggested, I would compile the stylesheets as modules with the fonts embedded in each (for Chinese, I suggest you look at specifying unicode ranges if possible to save on font size: http://renaun.com/blog/2011/10/flash-embed-font-unicode-range-generator/).
There are 3 application domains you can load modules into a parent app. Take a look at this: http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7e07.html. I believe 2 out of the 3 ways allows you to use resources from the module. The easiest is to load it with the same application domain - meaning you assume the classes in the module are the same as the parent's.
Make sure your build system is compiling the modules with the same version of the sdk as the parent application. Otherwise, you will run into actionscript runtime errors with marshalling classes.
Finally, how are you profiling your application for garbage collection? Are you using the flash builder's built-in profiler? Forcing garbage collection on a flex app is annoying (from what I remember, you must call System.gc() twice or some weird voodoo magic like that).
Here are some useful links:
http://livedocs.adobe.com/flex/3/html/help.html?content=fonts_04.html (esp. see the section beginning "Embedding fonts in ActionScript")
http://divillysausages.com/blog/as3_font_embedding_masterclass
http://bryanlangdon.com/blog/2007/03/22/loading-fonts-dynamically-in-actionscript-2-and-3/
You can embed the fonts externally in SWF files (one per font), load them up as needed, and use the same value as SWF Embed's "fontName" for CSS's "fontFamily".
When the user is done, and you've cleared all references to the font, you can unload the SWF (Loader.unloadAndStop()) and set it to null. I would think this would prompt it for garbage collection and free up the memory.
I think this is your best bet, because for a font to be used it must be registered, no matter how you got it to that point. And there is no Font.unregisterFont() method. This solution at least lets you free up everything up to that point.
Though I'm curious if Font.enumerateFonts() would still list the font and if it is really freed for garbage collection...
I haven't got too deep into it, but I too think it's not possible to unload a registered font.
I can only think of two probably unfeasible workarounds:
Come up with an elaborate and reliable way to use device fonts. I
guess it would imply quite an extensive investigation about fonts
available/required in different systems and countries, but if you're
not using the font for very graphical things, I think it could be
pulled off.
Reload the whole movie when you change the font. This
obviously depends heavily in what's your application like, but maybe
you could save the app state and reload it through javascript, or
maybe even have a separate overlaid swf that you load on demand
(maybe the latter could work loading the swf in a separate
application/security domain, but I'm not sure the registered fonts
would be sandboxed correctly).
Anyway, I guess it being a Flex app would complicate things quite a bit and render anything outside the box useless...
So we have a component we have written ourselves that deals with text display and translation between languages, reading translations from a file. Ideally what we would like to do is have this component be compatible with any font we can embed in the main .swf's library. What's the best way to do that?
Currently we are going down the route of having our component have an attribute for the font name, lets say 'Font1'. We drag the component into the .FLA file we want and then add a new font to the library called 'Font1' and set it to the typeface we want. This is proving to be inconsistent and problematic which implies it's not really an ideal way of doing it.
Is there anyway to achieve the feature we want? The key is flexibility, we want to easily support languages (hence the component) but we don't want design to be limited in their font selection. Its not practical to embed a range of fonts in the component for example, as it adds to file size and is restrictive.
Any ideas or solutions to this much appreciated. The component is written in AS3 and we are using Flash CS4.
Look into Runtime font loading or runtime font embedding.
There are many ways to deal with this depending on your development environment. In that regard, FlashBuilder may offer you more flexibility than Flash CS4 actually.
A general approach could be to have a set of SWFs file, each embedded with a particular font. Of course, these SWFs shouldn't be loaded at start up.
When calling a font in your component, you would practically call a function that would load the corresponding SWF, adding the font to your Application Domain, therefore making it available to your component.
Here's an article that may help in clarifying the process
http://nochump.com/blog/archives/20
but a Google search such as Runtime font loading or embedding should bring out a lot more resources.
Hope this helps!
I was just wondering what are the pros and cons of using embedded images instead of dynamic loading? Because when making games on pure AS3 (without Flash IDE), its a pain to manually embed all the assets needed... That makes your code sloppy, besides you don't have control to automatically change the hud, for example, by only changing the external file.
But I heard that some sites only let you upload a single swf, so you can't have external images. Also I heard that some are worried about users downloading their art... But as far as I know, and please correct if I'm wrong, they can also download them if they hack the swf with a decompiler. Having it external, you can encrypt the image, and unencrypt it on the code, so if they try to download they will only get encrypted code.
So... What do you think about embedding images? Please share all your thoughts to me.
I believe dynamic loading of images is a better approach. I agree with you about the game problem you stated, but when you are talking of flash/as3 as a whole, games are just one of the things among the many, you do. Also there are a few which also accept multiple files & maybe more will allow later. As of now hosting sites are just being on the safe side by not allowing multiple files & formats. So if you really have additional files you could just host them elsewhere & call them from your main swf.
I however cant agree about the point of making the code sloppy by managing images dynamically. When you do it through an IDE the IDE is writing the code for you, but as you might realize letting an IDE decide what to write doesn't always make the best. Manually handling things let's you understand all entry & exit points of an app. Moreover, would you want to open a flash IDE every time you wish to add an image, make an update, etc.
I usually like to use IDE cause of the awesome tools it provides to make things more efficient & prefer letting the code do all management/control stuff.And yes, if you have many small images (as in online flash games), embedding is better approach.
As far as the security is concerned even externally loaded files can be accessed if the encryption algorithm you use, can be found by decompiling the swf. So your best bet in case of security is usually using a third party software to encrypt the swf, which let's say increases your chance to prevent theft of your material. So if you really encrypt the swf using a 3rd party tool, both the ways would be acceptable.
I believe both approaches are valid, it mainly depends on your assets.
As you know embedding assets, will increase the size of your swf, I would only consider doing this for icon type images where size is hardly an issue.
For bigger images, I would definitely go for dynamic loading which I also find more flexible.
If I have lots of small icons, I'm embedding them. Imagine that number of requests in runtime, any of which may timeout. Pain of embedding, where? A single Embed tag in source or CSS for an asset. "Constant" assets must be embedded, "variable" ones - loaded.
Edit: OK, I got it. Pain of embedding lots of assets. Here is one idea come to my mind... Even if you loading something dynamically, you need some list with all filenames? You may take list of files and generate class full of public static const members with [Embed] attributes, that's fairly trivial. Then you use that class in project and voila, all is in the place. Maybe this helps.