Announcing VeraType

VeraType is an app I’ve been working on that lets you convert your images into text and your text into images (see screenshots). I’ve just released it a version for Windows and Mac.

 

It’s mostly for entertainment but it can be used for forum signatures, email messages, chat messages, typography, artwork or fun. I’ve created some tutorials shown below.

How to make great text art
How to convert text into an image
Sharing your type compositions

There is a Mac and Windows version and a version for Android.

 

Posted in Apps, Art, Graphics, Mobile, Technology, Typography | Tagged , , | Leave a comment

Save Login in Flash and Flex

One of the benefits of creating your login in HTML is the browsers ability to save your username and password. This feature is becoming more important with new features like Firefox Sync, Chrome Sync and so on. We can do this in Flash and Flex with a little bit of work.

First, some common prompts  you’ll recognize.

Firefox save password

Safari save password

Google Chrome save password

To begin we need to add a form to your index.template.html page inside the body tag:

	<form id="bridgeForm" action="#" target="loginframe" autocomplete="on" style="display:none">
		<input type="text"     name="username" id="username" />
		<input type="password" name="password" id="password"/>
	</form>

	<iframe id="loginframe" name="loginframe" src="blankpage.html" style="display:none"></iframe>

This gives the browser a form to auto fill and gives us a method to get and set the form values.

The browser will fill the form with values if the user logged in before. If there are multiple users it will fill it with the last user. Or on some browsers it will fill in the password when a saved username is entered into the form.

For this to work with Flash we need to do the following:

1. Add scripts to the page when the application loads (or embed them on the page)
2. Check for existing form values set by the browser
3. Fill in our Flash form with those values

Using the save password class we can perform these procedures.

protected function application_applicationCompleteHandler(event:FlexEvent):void
{
	var savePassword:SavePassword = new SavePassword();
	var savePasswordCreated:Boolean = savePassword.initialize(); // places our javascript onto the page
	var result:Object = savePassword.resizeApplication("60%"); // used to see the form - for testing purposes
	var result2:Object = savePassword.showForm(); // used to see the form - for testing purposes
	var loginItems:Array = savePassword.getFormValues(); // gets existing form values

	if (loginItems.length>0) {
		usernameTextInput.text = loginItems[0];
		passwordTextInput.text = loginItems[1];
	}
}

Before the browser will fill in our form we have to prompt it to save the form. To do this we need to submit the form.

That means doing the following:
4. Copy our login information to the form on the HTML page
5. Submit the form. By default a form will redirect to a new page. We can prevent this by targeting a frame or posting to a hash tag (action=”#”). We are going to target a frame.
6. After calling submit form we can continue to handle the login procedure as normal.

IE we continue to use HTTPService, URLRequest, etc as normal.

protected function submitForm_clickHandler(event:MouseEvent):void
{
	var savePassword:SavePassword = new SavePassword();
	var setValues:Boolean = savePassword.setFormValues(usernameTextInput.text, passwordTextInput.text);
	var results:Boolean = savePassword.submitForm(); // this prompts the save password dialog

	// handle actual validation and login as usual
	myLoginService.send();
}

And our MXML form:

<s:BorderContainer horizontalCenter="0" verticalCenter="0" 
				   width="250"
				   dropShadowVisible="true"
				   >
	<s:layout>
		<s:VerticalLayout paddingBottom="8" paddingLeft="12"
						  paddingRight="8" paddingTop="12"/>
	</s:layout>
	<s:Label text="Login Form" fontSize="24" fontFamily="Verdana"/>
	<s:TextInput id="usernameTextInput" text="" prompt="Username"/>
	<s:TextInput id="passwordTextInput" text="" displayAsPassword="true" prompt="Password"/>
	<s:HGroup>
		<s:Button label="Submit" click="submitForm_clickHandler(event)" />
	</s:HGroup>
</s:BorderContainer>

View ExampleSource CodeLibrary

Optional Multiple Account support
On all of the major browsers if you type into the username field the auto complete will fill in the rest of the username or password. When multiple users are saved for the same site the browsers save the last one submitted and fills the form in with that one on future visits.

If the form is left blank or other events happen the browser may not fill in the form. Usually logging in once will retain that login. If we are using Firefox we can get it to help us auto complete the form when the user types in the username. Other browsers are not as forthcoming.

To do this we need to:
7. Give the HTML form our username and “tab” to the next field
8. Check if the browser has filled in the password after username is entered
9. Fill in our password field with the password

protected function username_focusOutHandler(event:FocusEvent):void
{
	var savePassword:SavePassword = new SavePassword();

	// if username or password is blank check for password after supplying username
	// only am able to get this to work with Firefox at the moment 
	// not thoroughly attempted with other browsers (limited time)
	var value:String = savePassword.checkForPassword(usernameTextInput.text);

	if (value!="") {
		passwordTextInput.text = value;
		passwordTextInput.selectAll();
	}

	// set focus on our text field
	passwordTextInput.setFocus();

	// we have to focus back on Flash because of the javascript we use
	var results:Object = savePassword.setFocusOnFlash();

}

In conclusion, we want our Flex and Flash apps to provide the best experience as possible.

Notes
In Safari it seems that you have to be on a server (localhost or remote) for the passwords to be saved. Firefox has a few minor quirks as well as Chrome but I can’t remember them now. It mainly had to do with making sure the HTML form had all the required elements. Any issues bring them up in the comments and it might jog my memory.

PS This is a work in progress. Please leave your comments or improvements.

Posted in Flash, Flex, HTML | 8 Comments

Using CSS in Flex – Styles Guideline

First, the stylesheet examples. BTW This is a work in progress.

fonts.css,

/* CSS file for Embedded Fonts */

/**** MyFont ************************************/

@font-face {
	src: url("/assets/fonts/Font.otf");
	fontFamily: MyFont;
	embedAsCFF: true;
	fontStyle:  normal;
}

@font-face {
	src: url("/assets/fonts/Font.otf");
	fontFamily: MyFont;
	embedAsCFF: true;
	fontStyle:  italic;
}

@font-face {
	src: url("/assets/fonts/Font.otf");
	fontFamily: MyFont;
	embedAsCFF: true;
	fontWeight: bold;
	fontStyle:  normal;
}

@font-face {
	src: url("/assets/fonts/Font.otf");
	fontFamily: MyFont;
	embedAsCFF: true;
	fontWeight: bold;
	fontStyle:  italic;
}

/**** MyOtherFont ************************************/

@font-face {
	src: url("/assets/fonts/Font2.otf");
	fontFamily: MyOtherFont;
	embedAsCFF: true;
	fontStyle:  normal;
}

@font-face {
	src: url("/assets/fonts/Font2.otf");
	fontFamily: MyOtherFont;
	embedAsCFF: true;
	fontStyle:  italic;
}

@font-face {
	src: url("/assets/fonts/Font2.otf");
	fontFamily: MyOtherFont;
	embedAsCFF: true;
	fontWeight: bold;
	fontStyle:  normal;
}

@font-face {
	src: url("/assets/fonts/Font2.otf");
	fontFamily: MyOtherFont;
	embedAsCFF: true;
	fontWeight: bold;
	fontStyle:  italic;
}

textstyles.css,

/* CSS file for Label, TextInput, TextArea, RichText, RichEditableText components */

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

/**** LABEL ************************************/

s|Label
{
	fontFamily:    MyFont;
}

s|Label.loginGroupStyle
{
	fontSize:      12;
	fontFamily:    MyFont;
	embedAsCFF:    true;
	color:         #FFFFFF;
}

s|Label.formItemStyle
{
	fontSize:      14;
	fontFamily:    MyFont;
	embedAsCFF:    true;
	color:         #FFFFFF;
}

s|Label#loginDescriptionText
{
	color:         #FFFFFF;
	fontSize:      15;
	fontStyle:     italic;
	textAlign:     center;
}

/**** TEXT INPUT ***************************/

s|TextInput
{
	font-family:      MyFont;
	font-size:        24;
}

s|TextInput:normalWithPrompt
{
	font-style:       normal;
	horizontal-align: left;
	color:            #CCCCCC;
	font-family:      MyFont;
}

s|TextInput.myStyle:normalWithPrompt
{
	font-style:       normal;
	horizontal-align: left;
	color:            #CCCCCC;
	font-family:      MyFont;
}

/**** TEXT AREA ***************************/

s|TextArea
{
	fontFamily:        MyFont;
	fontSize:          24;
}

s|TextArea:normalWithPrompt
{
	color:             #CCCCCC;
	fontFamily:        MyFont;
	fontStyle:         normal;
	fontWeight:        bold;
	textDecoration:    underline;
}

s|TextArea.myStyle
{
	color:             #CCCCCC;
	fontFamily:        MyFont;
	fontStyle:         normal;
	tabStops:          0 100 200;
	typographicCase:   uppercase;
}

s|TextArea.myStyle:normalWithPrompt
{
	color:             #CCCCCC;
	fontFamily:        MyFont;
}

FONTS

First we are going to start with fonts. If you have any embedded fonts separate them out into a separate CSS file. This allows you to comment out the embedded font file to compare the application file size with or without fonts included.

All for one
Fonts have multiple type faces signified by style and weight. In Flash these are regular, bold, italic and bold italic. You must create a rule for each of these to include each type face of the font family. If you don’t include italic or bold and your text is italic or bold then the text will show the default font family not your embedded font.

You should also name the fonts of the same family the same name for each style and weight (see example). Notice that we have 4 font face rules all for the same font family. When you use the font-face rule you are only embedding one face of the font family. By default that is the regular font face.

Note: Some fonts do not include italic or bold.

Checking what fonts are embedded
You can see what font and styles of those fonts are embedded by calling trace(Font.enumerateFonts()). You should see 4 entries for your embedded font (one for each font face).

Precompile to SWF
Embedding your fonts separate from the rest of your CSS styles also allows you to precompile the CSS to a SWF file separately. In my tests compiling the fonts CSS to SWF increased the compile time (instead of decrease). This was tested when embedding Lucida Grande. See the section performance without unicode range for more info.

Character Sets
When you embed a font you are automatically including the full character set. Fonts can contain up to 65,000 glyphs. This can add unnecessary size to your application. You can define a range of characters that will include only the characters you specify. We do this through the unicode-range property.

An example of setting the unicode range:

unicodeRange: U+0041-005A, U+0061-007A, U+0030-0039;

Unicode Ranges
U+0020,U+0041-005A – Upper-Case [A..Z]
U+0020,U+0061-007A – Lower-Case a-z
U+0030-0039,U+002E – Numbers [0..9]
U+0020-002F,U+003A-0040,U+005B-0060,U+007B-007E – Punctuation
U+0020-007E – English Range (all the above)

You can find the complete set of ranges and short hand names in the Flash Builder/sdks/4.6.0/frameworks/flash-unicode-table.xml file.

You can also use the language description instead of the character ranges (if you manually add the unicode short names to the flex-config xml file):

unicodeRange: Uppercase, Lowercase, Numerals, Punctuation, "Basic Latin", "Japanese Kana";

Note: If you set a range than any characters outside of that range will not be embedded in the font you are using.

Note: If you do not add the short names you’ll get an error similar to the following, “Invalid Unicode range ‘UPPERCASE’”. Note: I didn’t get it to work with short hand names in my tests.

Note: Consider our international friends before making a decision to include only English characters.

Character or Glyph?
Type designers distinguish characters from glyphs in order to comply with Unicode, an international system for identifying all of the world’s recognized writing systems. Only a symbol with a unique function is considered a character and is thus assigned a code point in Unicode. A single character, such as a lowercase a, can be embodied by several different glyphs (a, A). Each glyph is a specific expression of a given character. source

Interesting note: When we specify the Unicode character range to include the lowercase “a” we may also be including uppercase “A”.

File size with and without range set
When embedding fonts be sure to check the file size. Without setting a range when embedding Avenir the application increased in size by 116kb. When embedding Lucida Grande without setting a range the application file size increased by 560kb.

Here are the results for embedding the Avenir font:

Original file size (no embedded font)          51kb 

With one character and one type face           65kb
-  regular

All 4 type faces no range                      167kb
- regular, italic, bold, bold italic

All 4 type faces english character range       80kb 
- regular, italic, bold, bold italic

The following are how much size was added by the different font families:

Avenir embedded without range                  116kb
Avenir embedded with range                     29kb

Gill Sans embedded without range               132kb
Gill Sans embedded with range                  46kb

Lucida Grande embedded without range           560kb
Lucida Grande embedded with range              27kb

Performance without unicode range set
Compiling can take much longer if you do not set a character range. In my tests embedding the full range of characters in the Lucida Grande font family took 6-24 seconds longer each compile time when no range was set. That number dropped to about 1 second with the range set.

I tested compiling CSS to SWF (right click on the CSS file in Flash Builder and check Compile to SWF). and in my tests it took much longer to run and debug when this option was enabled. It is supposed to help by not recompiling styles but in my tests it did not work. It may have been that character ranges were set and that may have kept the CSS dirty flag set so it was always recompiled or it could have been something else entirely. I didn’t figure it out at the time of this writing but you should probably test compile times when using this option.

Naming fonts
When naming embedded fonts use a name similar to the font name but not exactly the same. If the font is named “Courier New” then name your font “CourierNew” or something similar. Do not name it “Courier New”.

We do this because if the font is installed in your operating system it will show up in your application even if it’s not embedded correctly. It will give the appearance of being embedded without it actually being embedded.

Using a unique name and then applying that font unique name to your components and CSS allows you to see visually if the font is embedded and applied correctly at runtime. We do this because Flash fall backs on device fonts if it can’t find an embedded font with the same name. It will look like you embedded the font but if you run the application on another computer where the font is not installed an alternative font will be shown.

STYLES
Let’s move on to CSS styles. You’ll notice the spaces between the name and value of the styles. Adding a space allows you to double click on the value for selection and makes it easier to read. If you want to be fancy you can align the values with tabs or spaces as shown.

s|Label
{
	fontSize:      14;
	fontFamily:    MyFont;
	embedAsCFF:    true;
	color:         #FFFFFF;
}

Camel case or dashes
Style names of multiple words can be defined with camel case, “fontFamily”, or by dashes, “font-family”. I don’t think it matters if you use either. Whatever you choose stick to it the whole file. One advantage to camel case is it’s used in the attributes of MXML. So if you needed to copy and paste between MXML and CSS style declarations and were using camel case rather than dashed case you would not have to remove the dashes as dashes are not allowed in MXML. One advantage of using dashes is it’s easier to read.

Alphabetical Ordering of Style Names
You don’t have to order styles alphabetically but it looks nicer. What’s more important is the grouping and ordering of the style inheritance.

Grouping and ordering
When defining styles in your CSS file group them by type (TextInput styles, Label styles, Button styles, etc) and in those type groups define the defaults first, next by class (CSS class) and then by ID. Go from broadest scope to narrowest. This order is based on the way the styles are inherited and applied.

/**** TEXT INPUT ***************************/

/* default type selector */
s|TextInput
{
	font-family:      MyFont;
	font-size:        24;
}

/* class selector */
s|TextInput.myStyle
{
	font-style:       normal;
	horizontal-align: left;
	color:            #CCCCCC;
	font-family:      MyFont;
}

/* type selector with ID selector condition */
s|TextInput#usernameTextInput
{
	font-style:       normal;
	color:            #AAAAAA;
	font-family:      MyFont;
}

Base Types
Order the base types before the classes that extend them.

/**** TEXT BASE ***************************/

s|TextBase
{
	font-family:      MyFont;
	font-size:        24;
}

s|TextBase:normalWithPrompt
{
	font-family:      MyFont;
	font-style:       normal;
}

/**** TEXT INPUT ***************************/

s|TextInput
{
	font-family:      MyFont;
	font-size:        24;
}

/**** TEXT AREA ***************************/

s|TextArea
{
	font-family:      MyFont;
	font-size:        24;
}

Creating class and type styles
When creating class styles try to name them by function or context rather than color. There are many reasons for this but it comes down to handling design changes gracefully.

Let’s say your application has lots of blueStyle, darkBlueStyle, lightBlueStyle, lightBlueBoldStyle type of styles. Then let’s say you receive instructions to change the color to red. Now what do you do? You could change the color value of each of the styles to red but then the style names would no longer describe the style content. To retain an accurate style name description you would need to rename all the style names to say “red” instead of “blue”, set all the style values to red and then find and replace each instance that referenced the old blue style names with the new red style names. That’s what we call concrete.

If we name styles by function or context we can avoid that. For example, if you have a login form, create a “s|Label.loginFormLabelStyle” style rather than “.blueBoldLabel”. Then when you have a change from blue to red you only have to change the values in the loginFormLabelStyle styles.

Inheriting Styles from Containers
On that note, you may have a form that has multiple Labels. If possible apply the style to the container rather than individual elements. The individual Labels will inherit those values from the container. For example, if all the text in the Labels in a form are dark grey then apply the style to the parent group like so, “s|Group.loginFormStyle”.

Using the above method may create more styles but it is more abstract, like writing to an interface.

Style Constants in code
If you do have universal colors in Flex you have the freedom to use a global constants rather than global styles. You don’t have that freedom in other environments but it’s possible in Flex. So this would be perfectly legal, <s|Label color=”{ApplicationModel.TEXT_COLOR}”/>. This is doing one of the things CSS was created to do. You’re environment and workflow will probably dictate the advantages and disadvantages of this.

Multiple style files
As CSS files can grow over time. Large CSS files can grow out of control. Break CSS styles into groups and then those groups into different files. For example, create a CSS file for Label, TextInput, TextArea, TextBase, RichText, RichEditableText in one, List, DataGroup, DataGrid, ItemRenderers in another and containers such as Group, HGroup, VGroup, BorderContainer, SkinnableContainer, etc in another. Don’t forget Button, RadioGroup, Slider and etc in another. You could join the List groups and Buttons groups into one file but I recommend still keeping the major text components separate.

While it sounds like overkill to separate CSS into separate files it’s an attempt to give CSS organization and structure. This is because CSS has a loose set of rules that allow it to get out of control. When it’s unorganized it makes it hard to find where and why styles are defined and which are applied to a given component.

In the containers or styles CSS file I would also put the universal, global and general styles. General styles being the class type declarations that do not have a type for example, “.myStyle”.

In practice you should try and qualify the generic class style and ID declarations with a type. This increases performance. For example, if you know a style is only going to be used with Labels do this:

s|Label.myStyle 
{
	fontWeight: bold;
}

rather than this:

.myStyle 
{
	fontWeight: bold;
}

Specificity and inheritance
One tip to remember about styles is that the closest style to the object wins. And by closest I mean in proximity, specificity and last defined. So an inline style overrides a type declaration which overrides a global declaration which overrides a universal declaration.

APPLICATION
In your application add your includes like so:

<s:Application>

	<s:Style source="fonts.css"/>
	<s:Style source="styles.css"/>
	<s:Style source="textcomponents.css"/>
	<s:Style source="components.css"/>
	<s:Style source="containers.css"/>

</s:Application>

If you need to debug styles you can comment out each file one at a time until you find the style that’s causing the issue.

Naming gotchas
If you name your CSS file defaults.css it will be automatically included whether you specify the include directive or not. The only reason I wouldn’t recommend naming it this if you ever need to comment out your stylesheets. Also, you do not want to name your stylesheet a reserved word such as default.css. This will cause errors.

POP QUIZ
In the following Label what would the font family be and what would be the inheritance order?

<s:Label id="myLabel" text="Hello world" fontFamily="Noteworthy"/>
s|Label.myStyle 
{
	fontFamily: Courier;
}

global {
	fontFamily: Baskerville;
}

s|Label 
{
	fontFamily: Helvetica;
}

s|Label#myLabel
{
	fontFamily: Verdana;
}

s|Label 
{
	fontFamily: Garamond;
}

* {
	fontFamily: Didot;
}

To make it more challenging what would the order be with this change:

<s:Label id="myLabel" text="Hello world" fontFamily="Noteworthy" styleName="myStyle"/>

And using the same styles as before plus this one:

.myStyle 
{
	fontFamily: Futura;
}

Experimental Flex style inheritance lookup utility class and SWC.

Posted in CSS, Flex | Leave a comment

UI Graphic tips in Flex

This example shows how to create text inner shadow, text and display object border, beveled text with border, lines with inner shadow and frames with inner shadow.

This example includes a BorderStrokeFilter and TextShadowFilter classes and skinnable container FrameSkin skin. It also includes a drop shadow explorer. It is setup so you can compare text with drop shadow filter applied (in Flash) with images of rasterized text (with stroke) exported from Photoshop.

Demo
Source

Posted in Flex, FXG, Graphics, Tips | 1 Comment

Add a border or outline to Text or Bitmap at runtime

Update: I’ve created a new border filter based on the Spark DropShadowFilter. It works better and it’s native. You can read more here.

I’ve been trying to figure out how to add an outline to dynamic text and found out that there’s little usable concrete examples out there.

I hobbled together some classes that find the outline of an object and used that to draw pixels in those places. I then attempted to outline that outline to create a simple border weight like effect. Here’s the demo.

The main issue for a text outline is that the text has to be rasterized first; it’s not as easy to apply as a drop shadow filter effect.

The other issues are that the border grows in rather than out, the edge is aliased and the outline is cut off if the bitmap is not large enough ahead of time.

I think a better approach would be to create a pixel bender filter that can be applied to display object. Or instead of getting the points around an object get the text path (like in FXG Path) and then apply a stroke to it.

<s:Path data="M 1,2 L 3,4">
    <s:stroke>
        <s:SolidColorStroke weight="2" />
    </s:stroke>
</s:Path>

If possible the class would extend Label and add a stroke property or extend Path and add a text property (when you set the text the path would be created). Examples:

<s:Path text="Test Text">
    <s:stroke>
        <s:SolidColorStroke weight="2" />
    </s:stroke>
</s:Path>
<s:Path bitmapData="{image1}">
    <s:stroke>
        <s:SolidColorStroke weight="2" />
    </s:stroke>
</s:Path>
<s:Label text="Test Text">
    <s:stroke>
        <s:SolidColorStroke weight="2" />
    </s:stroke>
</s:Path>
Posted in AIR, Flash, Flex, FXG | 2 Comments