AIR

I found an interesting trick with embedding fonts today while working with the Text Flow engine in Flex 4.  What I found out is that you can embed multiple fonts under the same font family name, but set the properties such as font weight or font style to different settings based on the font source you are using.  This may be an obvious thing to a lot of people, and the property name ‘font-family’ makes a lot more sense now, but for me it was a real ‘ah-ha’ moment.  By the way, this isn’t just a Flex 4 thing, you can do this with Flex 3 and probably AS3 only projects (haven’t tried that yet) but the issue became more apparent in Flex 4’s new TLF enabled components.

The problem came about because we have a set of fonts that provide each style type in a unique OTF file, i.e. Font-Regular.otf, Font-Bold.otf, Font-Italic.otf, and Font-BoldItalic.otf.  In the past, we just embedded this with unique font-family ids (font-family: “Font-Regular”) and then just bound them via CSS.  This approach becomes a significant problem when starting to work with TLF’s selection management and Text Format.  We are building a simple Rich Text Editor in Flex 4 (since its not available yet in Beta 2) to allow a user to set their text to bold, italic or underline.  Simple enough, right?

Well, its not so simple when you have your font styles spread across font identifiers. The way we started to handle this is that when the user selected some text and applied Bold, we would set the text format’s font family for the selection to “Font-Bold”. To enable the ability to toggle the style, we would ask for the selection ranges format, look to see what the font family is and then toggle it to either bold or normal.  Now, let’s say that the user selects a section of text that mixes bold and normal text.  When you get the text format back, the font family property is set to undefined, letting you know that you have a mixed set.

In the bold/normal case this is easy to solve, but let’s say that you have bold, normal and italic text in the selection.  Because the property is undefined we can’t determine this nor can we just apply the new style across the entire selection because you would remove the italic (in the case of applying bold).  At this point I was getting kind of upset because the solution wasn’t sounding pretty.  We were looking at having to loop through the selection, grabbing the leafs and then looking at the format to determine the correct selection.  I was going to punt on it as a bug for now and move on.

This morning, while making coffee I thought about the fact that the key for the CSS font embed is font-family, and that when using @font-face that you can actually set things such as font-weight.  What I found out is that you can embed different sources under the same name as long as they have different style properties:

@font-face {

    src: url("./assets/fonts/Font-Regular.otf");

    font-family: MyFont;

}

@font-face {

    src: url("./assets/fonts/Font-Bold.otf");

    font-family: MyFont;

    font-weight: bold;

}

@font-face {

    src: url("./assets/fonts/Clean UI/Font-Italic.otf");

    font-family: MyFont;

    font-style: italic;

}

@font-face {

    src: url("./assets/fonts/Font-BoldItalic.otf");

    font-family: MyFont;

    font-weight: bold;

    font-style: italic;

}

Now I can treat the font as the same family and then toggle the style properties, such as font-weight or font-style without having any font conflict.  This fixes the Text Format issue and also allows for a much cleaner/consistent CSS file.  I am sure this is explained somewhere (probably in the documents, clear as day), but I never knew that you could do this… hope it helps!

We are happy to announce the release of Adobe’s newest application: WorkflowLab (public Alpha release). WorkflowLab was built by DevelopmentArc for Adobe and was designed, developed and deployed in under 6 weeks.  This new AIR application allows users to view and construct project workflows to demonstrate how their products, applications, and/or technologies are built using Adobe Technologies. The tool allows user to define project tasks and assign Adobe tools and technologies to those tasks to help illustrate how Adobe’s products and services assisted in completing the project. Inside of the tool Adobe has provided a core set of workflow starting points that can be used to help guide the workflow of new project or as a starting point for your own workflow. Download it here.

Development Process and Technologies

WorkflowLab was built using Adobe’s soon to be released Flex 4 SDK, Flash Builder, and Flash Catalyst technologies.  Taking advantage of the new Flex 4 skinning Component Architecture, DevelopmentArc was able to skin almost all of the application’s components using FXG (MXMLG).  In an upcoming Adobe Developer Center article we will walk you through the entire process from start to finish on how we planned, designed and developed WorkflowLab using these new technologies.

We were lucky to be joined on this project with Chris Stone (http://twitter.com/stony) out of Vancouver BC. Chris is one of the most talented UX designs we have had the privilege to work with. For the project Chris leveraged Adobe InDesign for user workflows and wireframes and Adobe Illustrator for all design comps. I can proudly state that Chris has some of the cleanest design assets out there. Having lean and organized Illustrator files is going to be a key trait of Flex/Flash projects moving forward as Flash Catalyst become a more integral part of the designer/developer workflow. A detailed explanation of how design was part of the overall product workflow is explained in the ADC article linked above.

Community Collaboration

Also launched today is an Adobe Cookbooks site dedicated to WorkflowLab. The site allows user to share their workflows with the community. We encourage you to download Workflow lab, create a new workflow or extend a Workflow Starting Point and share it with the community. There are so many ways to “skin a cat” the more we share the better off our lives will be as developers, designs, product managers, and executives. Start sharing your workflow recipes here.