brupp.com

The internet is flooded with articles about DPI. And I had hard time to understand it fully. I did a lot of research and consulted designers to get the heck out of it and here is a concise explanation of what it is, what it is to do with print, web and photo editors.I hope you have already gone through those stuff as I would be using less words to fill the missing LEGO pieces.

DPI or Dots per inch is for Print. It has nothing to do with web. You should consider about it only when you have print requirement.

Significance of value of DPI for Printer:
First thing first we are talking here about DPI of Printer and should not be associated with DPI of image right now. DPI is used to describe the resolution number of dots per inch in a digital print and the printing resolution of a hard copy print dot gain. A dot matrix printer, for example, applies ink via tiny rods striking an ink ribbon, and has a relatively low resolution, typically in the range of 60 to 90 DPI. An inkjet printer sprays ink through tiny nozzles, and is typically capable of 300-600 DPI. A laser printer applies toner through a controlled electrostatic charge, and may be in the range of 600 to 1,800 DPI.

Printer gets information not in pixel but in physical dimension say printer gets command to print 1 inch by 1 inch rectangle data. A 300 dpi printer would look for 300 dots data in digital data received. Now if the density of digital data (ppi -pixel per inch) is less than 300 (approx since ppi is not exactly equal to dpi) then image quality will be low (300ppi image data will have greater information filled in one inch than 72ppi. Right.) The more the dots printer can print and more the ppi of image the better the result.

Note: Printer doesn’t scale images based on its PPI. It prints what it gets.

Significance of value of DPI for Image:
Now back to digital word, DPI actually has no meaning. Its loosely equated to PPI and is significant when comes to printing data. Lets understand PPI. Say you have to take a picture which of a  square 1inch wide. Now if you want a good quality image you would prefer to have finest detail of that picture captured. You can capture the data using 300 pixels (300ppi) of inch or say using only 72 pixels (72ppi). Which is better? No point for guessing. 300 ppi of-course. What will be the image dimension of these two images in digital world (physical dimension would be 1 inch).   Obviously a you need 300 pixels to display 330 pixels and 72 pixels for 72 pixels So image dimension would be 330 X 300 and 72 X 72 respectively.

Significance of DPI (or PPI) for Printing Software:
Printing/Editing software such as Photoshop utilizes this PPI information embedded in the image to determine the actual print size of image in physical word by equating PPI to DPI.  If not present depending on software used it assumes PPI to 72 or 96ppi. When the data is send to printer this densified data is used by printer to get the print quality.

All above is applicable for Bitmap data and not Vector. Vector doesn’t work on DPI/PPI. For example flash, svg, pdf are vector format. these format takes care of print quality when sending data to printer of all the “vector objects” inside them.

OKay. This is a real quick post. You may find this error (or error of similar nature) occurring when you try loading a Flex application in another Flex application.

e.g. TypeError: Error #1034: Type Coercion failed: cannot convert mx.managers::BrowserManagerImpl@2ee8581 to mx.managers.IBrowserManager.

FIX: Import the class to which the compiler is trying to cast to in the parent application. In this case

import mx.managers.IBrowserManager;
private var bm:IBrowserManager;

Hope this will save some of your time.

Flex profiler is one of the biggest advantage of using Flex Builder IDE. It works wonders for developer who want to understand the nuances of flash player. If you want to write clean code and avoid memory and performance issues, use profiler.

Read more about profiler here: http://livedocs.adobe.com/flex/3/html/help.html?content=profiler_1.html

Okay, so the post is not about what and how profiler works. In most of the cases you just need to click the “profile..app” button in the IDE. But at times you may find it not working. Here I am putting down one possible way to fix it and look out for:

Flex profiler actually listens for messages from the profiler agent. The profiler agent is a swf launched in parallel to your main swf. It is located in your Flex workspace at .metadata/.plugins/com.adobe.flash.profiler/ProfilerAgent.swf.

Now Flex Builder reads a file called mm.cfg which has the location profileragaent.swf. mm.cfg can be located at  c:/users/user (Windows). It should have a name-value pair indicating the location of ProfilerAgent.swf. Create (or edit existing) mm.cfg and add following line

PreloadSwf=Drive:/…/yourworkspace/.metadata/.plugins/com.adobe.flash.profiler/ProfilerAgent.swf?host=localhost&port=9999

In addition to above you can other options which are quite helpful for debugging:

ErrorReportingEnable=1
TraceOutputFileEnable=1

Above options will redirect the trace() output to an external file which can you browse using any text editor.

The flashlog.txt file will be created in the following location: C:\Documents and Settings\username\Application Data\Macromedia\Flash Player\Logs\flashlog.txt

Let me know if this post saved your couple of hours

There is so much to font embedding that I keep getting new problems and resolutions
The problem: Embedding font on textfield which renders HTML text.

...
instancetextObj.htmlText = "<font size='28' face='Arial' >Hello <b>How</b> <font
size='28' face='SomeOtherFontFace' >Are </font> You</font>"
...
<mx:Text id="instancetextObj" />

I ensured that the fonts used above are embedded. My css look like:

@font-face {
    src      : url("asset/font/embed_fonts.swf");
    font-family    :  "SomeOtherFontFace";
}

@font-face {
    src      : url("asset/font/embed_fonts.swf");
    font-family    :  "Arial"; 

}

The swf has all the necessary fonts embedded (all required font-weight/typefaces). But somehow it didn’t worked.

Solution:
The solution is that the texfield requires a default font family defined which is embedded
So if you make a simple change to the mxml definition of your textfield like this:

<mx:Text id="instancetextObj" fontFamily="Arial" />

It will work.
The better solution is to defined the font family in a “global” style name in css

global
{
     font-family   :   "Arial"
}

I hope this might save your few hours!

Most fonts have four typeface styles: normal, bold, italic and bold-italic. Each typeface need to be embedded separately (even the normal one). You can embed TTF (TrueType) and OTF (OpenType) in Flex. Embedded fonts need not be installed in client’s machine and are anti-aliased for smother edges and better readibility.

Fonts such as Type 1 Postscript can also be embedded by embedding it through SWF and runtime loading. Fonts size smaller than 10 looks fuzzy even on embedding. For this made “advancedAntiAliasing: true” in the font style .

There are primarily two ways to embed fonts through CSS in flex:
- Providing direct source (src) to the TTF or OTF font
- Providing src to the SWF which has the fonts embedded.

Syntax:

@font-face
{
src: url("location") | local("name");
fontFamily: alias;
[fontStyle: normal | italic | oblique;]
[fontWeight: normal | bold | heavy;]
[advancedAntiAliasing: true | false;]
}

The above is self explanatory. The point I would like to highlight is that when you have fonts with separate typeface files for each font style.
For example font MetaOT has MetaOT-Norm for plain (normal) style, MetaOT-Bold for bold and so on. If such is the case, then remember not to specify “fontWeight” for these because then you would be pushing the compiler to understand bold property of a bold typeface font which can lead to improper rendering.

@font-face
{
src                    :    url("asset/fonts/embed_meta.swf");
fontFamily            :     "MetaOT-Norm";
}
@font-face
{
src                    :    url("asset/fonts/embed_meta.swf");
fontFamily            :     "MetaOT-Bold";
}

font-family name should be exactly same as shown in the fla file while embedding. I would suggest using either flash 8 or Flash CS3 for generating the swf.

To use this font-face add it in the style:

.QuestionText
{
font-family            :    "MetaOT-Bold";
color                :     #000000;
font-size            :    16;
}

See the style doesn’t specify fontWeight. One issue which could occur using in separate typeface files is that if any of the parent component of the component using the above style, applies fontWeight:bold then the component wouldn’t render the font properly. This is because the child component takes parent property if not specified. So to make it full-proof use this :

.QuestionText
{
font-family        :    "MetaOT-Bold";
fontWeight        :     normal;
color                :     #000000;
font-size           :    16;
}

fontWeight is made “normal” so that no additional property gets applied.

Loading legacy (pre flash player 9) application/content and communicating with it is avoidable for following reasons:

-        Difficult to communicate (LocalConnection/SharedObject etc)

-        Not reliable behaviour

-        Loading multiple pre-Flash Player 9 SWF’s into the same app breaks sometime

-        Issues with _global, static variables and singleton classes which remain stuck

-        Garbage collection needs to be handled carefully. Pre flash player 9 uses AVM1Movie sandbox which has entirely different garbage collection management and methods

-        Memory leak issues

There are several restrictions on an AVM1 SWF file loaded by an AVM2 SWF file:

1. The loaded AVM1Movie object operates as a psuedo-root object for the AVM1 SWF file and all AVM1 SWF files loaded by it (as if the ActionScript 1.0 lockroot property were set to true). The AVM1 movie is always the top of any ActionScript 1.0 or 2.0 code execution in any children. The _root property for loaded children is always this AVM1 SWF file, unless the lockroot property is set in a loaded AVM1 SWF file.
2. The AVM1 content cannot load files into levels. For example, it cannot load files by calling loadMovieNum(“url”, levelNum).
3. The AVM1 SWF file that is loaded by an AVM2 SWF file cannot load another SWF file into this. That is, it cannot load another SWF file over itself. However, child Sprite objects, MovieClip objects, or other AVM1 SWF files loaded by this SWF file can load into this

References:
http://jessewarden.com/2007/05/controlling-flash-player-8-swfs-in-flash-player-9-swfs.html
http://livedocs.adobe.com/flex/2/langref/flash/display/AVM1Movie.html

public function loadModule(objEvent:Event):void
{

	var objModuleInfo:IModuleInfo = ModuleManager
                                      .getModule("module/ModuleViewA.swf");
	objModuleInfo.addEventListener(ModuleEvent.READY, onModuleReady);
	objModuleInfo.addEventListener(ModuleEvent.ERROR, onModuleLoadError);
	objModuleInfo.load(); 

}

The above code must be familiar to you when you try loading Module using ModuleManager (flex sdk 3.4). But ModuleEvent.READY won’t fire. Why? because the IModuleInfo object above has local scope and ModuleManager maintains weak references to this object. By the time module loading completes it gets Garbage Collected .

Solution: Maintain the reference to the IModuleInfo object by making it a member variable.

AsDoc is a command line tool for generating API documentation for as HTML pages of your packages/classes.

I prefer to use it as external tool running inside the Flex Builder. It provides a console window to diagnose any issues that might occur during HTML generation.

1) Go to Run->External Tools->Open External Tools Dialog..

2) Add new Program/Configuration

3) Fill Name e.g. asdoc_files

4) Add Location of the asdoc executable (bin folder in your Flex Builder installation)

5) Add “Working Directory” by selecting your project from “Browse Workspace”

6) Add following arguments:
“-source-path “src”
-doc-sources .
-external-library-path=”libs” ”

It is of extreme importance that you should add external library path (as above) for any “SWC” that you have used in the project.