Flex

With a little less than a month until 360|Flex I thought I would sit down and write a long over due post about the conference.  360|Flex is known in the community as one of those “hard core” conferences where the expectation is to leave sessions with your Flex and Flash IQ increased by a couple digits.

Unfortunately until now, James and I have had to experience the conference through other people’s stories.  For some reason or another the last few years have been pretty hectic, but we made it a mission in 2010 to attend and speak at more events, with 360|Flex being the first on the list.

Session
In our session “Flex 4 Component LifeCycle Best Practices” our goal is to walk folks through the three stages of the Flex lifecycle (birth, mature, death) and discuss what methods can be used to help build efficient and high performance Flex applications following that Flex component design methodology. With the reengineering of the skinning architecture in Flex 4, a few methods have been introduced and others have been more or less deprecated in importance. We will discuss these changes in detail and how you will want to change your development practices. We are extremely excited to share our year long research that began with our widely popular white paper on the Flex 3 lifecycle. Soon after the conference and session, we plan on updating the paper to Flex 4 and will share it with the community.

Attending
As much of an honor it is to speak at 360|Flex what is really exciting us is attending some of the other session and diving deeper into topics we have not had the time to investigate. James and I have been debating our schedule for a few weeks now so far we have compiled a “must-see” list that we have listed below to share with everyone.

Aaron & James’ Must See!

Going deep w/OSMF - OMG!
Level 300
By David Hassoun

RobotLegs on Top of Gaia Flash Framework
Level 100
By Jesse Warden

Building Applications using Test Driven Development (TDD)
By Elad Elrom

Dramatic Effect of Flex Library Linkage
Level 300
By Yakov Fai

Reflex: Rethinking Component Design
Level 300
By Jacob and Tyler Wright

Social Activity
We will be both tweeting as much as we can from the conference and sessions. Hit us up if you would like to discuss our session or any other session in more details. We love meeting new techies!

Aaron Pedersen - @aaronpedersen
James Polanco - @jamespolanco

Also don’t forget to follow 360|Flex for news and updates as we approach the and throughout the conference.

360|Flex - @360flex

Wrap Up
If you are thinking about attending 360|Flex you should book your tickets soon. Last time the conference was held in San Jose it was sold out. This year the conference has parties every night giving you a chance to mingle with the community at large. There are over 40 sessions, 2 panels, and your ticket includes hands on training sessions for all levels on the Sunday before the conference begins. Also, if you are new to Flex, you can take an all day Flex 101 course (one of the hands on training sessions) and be ready for regular sessions on Monday.

Speakers include a wide assortment of Adobe engineers and communities leaders. For a full list check out the following site http://www.360flex.com/blog/category/the-speakers.

Register here. We hope to see you there!

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.

This year James and I will be involved in three separate sessions at the Adobe Max conference in LA.   Adobe Max provides a collaborative arena for the communities of designers, developers, project managers, executives and any other project participators to gather and  share ideas, real-life experiences, theories, secrets, and best practices.  Over the past year DevelopmentArc has been involved in a wide variety of projects and we are excited to share our  experience with the community the best we can.   Below is breakdown of the three sessions we are involved in. Two involve a secret (shhhh) project that is to be released next Monday.  Follow James (@jamespolanco) or I (@aaronpedersen) on twitter and we will share as soon as we can.

Delivering Successful Flash Platform Projects (Monday, Oct 5th 11:30am - #adobemax181)

In this session we will be joined by co-author Doug Winnie of Adobe to discuss how during any project the planning phase is often times the most over looked and in most cases the most valuable.  We take you through a fictitious story of two companies as they collaborate on a project.  We plan to highlight exactly why planning when not overlooked, can start a project off on the right foot and actually cost the development team less time, money and resources to complete.

Workflows for the Flash Platform (Monday, Oct 5th 5pm - #adobemax286)

We are joining Doug Winnie again to discuss Flash Platform Workflows. Doug is an expert on the subject and spends most of his days working with various product teams within Adobe trying to enhance the workflow process between applications.  Doug will breakdown the workflow process and demonstrate some very cool and new technologies.

Bird of a Feather (Wednesday, Oct 7th 12:oopm - 1:30pm)

Again joining Mr. Winnie, James and I will be sharing our experiences with whom ever will listen.  We will explain, answer questions about the workflow we used in developing the secret application using Adobe’s soon-to-be released Flex 4 SDK, Flash Builder 4, and Flash Catalyst technologies.  The project had a quick turn around and a small team.  Because of these constraints we employed a modified workflow that leverages Flex 4’s Spark Skinning Architecture along with an unconventional use of Flash Catalyst to enhance a developer-drive workflow. Come by and say hi.

This quarter’s new Adobe Edge is now live on their site and DevelopmentArc has two features this release.  Aaron sat down and wrote up a great introduction to Flash Catalyst round-tripping called “Roundtripping between Adobe Flash Catalyst and Adobe Creative Suite 4“.  He takes a look at how it works and a proposed workflow that designers and Catalyst users (maybe the same person, maybe not) can use to make iterative updates to the UI.

I (James) sat down and examined the new MXML Graphics and FXG formats in the article “Understanding FXG, a primer on Adobe’s new graphics file format“.  These are exciting additions to the Flash Platform allowing both easier to read design content and inter-interoperability between tools.  If you are a Flex developer who uses Degrafa, then the concepts of MXML Graphics are going to make a lot of sense.  Let us know what you all think!

I know we have been really quiet on the blog front for a while.  We have been swamped with work, which is a great thing.  Anyway, we saw Ryan’s post today about the newly updated Fireworks FXG updater on Labs.   This is one of the cooler things about Adobe (and Macromedia) technology.  The FXG exporter is just an Extend Script file that did the FXG conversion by parsing the structure of the file and converting it to a corresponding FXG structure.

If you think about it, this is really an amazing and interesting concept.  Since FXG is just XML output you can use a script (or tool) to do conversion.  We are definitely spending some time thinking about this idea over here at DevArc.  It could lead to some interesting workflows and experiments…

The second of our five part series focusing on Flash Catalyst has been released on Peachpit.com blog.  In this post we focus on where Flash Catalyst fits inside of the larger Adobe Flash Platform.  We review the upcoming changes to Flex 4 that were required to facilitate Catalyst and the workflow it brings to the Platform. For the designer, Flash Catalyst has long been sought  to help extend their static design vision into the world of interactive features. We explore this new workflow as well.   Read the post here

We are proud to announce that we are beginning work on a new book for Adobe Press that focuses on Flash Catalyst, Flash Builder and Creative Suite based projects and the development workflows these tools enable.  Our good friend, Doug Winnie (Group Project Manager at Adobe and web workflow expert), will be co-authoring the book with Aaron and myself.  As we write the book we will be making updates here on our blog about our progress and research.

In the meantime, Peachpit.com asked us to guest author a weekly series on Flash Catalyst.  Our first post, Adobe Flash Catalyst: Under the Hood—Part 1 Introduction is now on their site.  Make sure to subscribe, because each Monday a new post will be available.

With the release of Adobe’s Flash Catalyst and Flash Builder public betas the Twitter-realm and Blog-o-sphere have been all a buzz with excitement, skepticism and of course questions, questions, questions.  One issue that seems to be the hot topic for the day is the idea that Fireworks CS4 is being treated as a second-class citizen in the new Flash Catalyst world.  The root of this assumption starts with first screen you see in Catalyst, note that Fireworks is no where to be seen:

This apparent abandonment by the Flash Catalyst development team is being exacerbated by the fact that Fireworks is often mistaken for a Photoshop wannabe.  Non-Fireworks users assume that Fireworks is some kinds of ImageReady, not understanding how great, powerful, intuitive and useful the tool really is.  Because of this historical treatment, the Fireworks community is up in arms about how, once again, Fireworks is kicked to the curb in place of the 800 lb. Gorilla that is Photoshop.

The good news is that in reality, Fireworks has exactly the same support and workflow Photoshop does inside Catalyst. The first thing we need to do is get over the fact that just because Photoshop has an icon and import option that it has better support.  One of the file options for import is the FXG file format.  FXG is Adobe’s new XML based graphical description language that enables easier tooling, development and transport between applications.

Fireworks CS4 has the ability to export its content to the FXG format and this means that designers can easily import their design into Catalyst by, using Commands > Export to FXG.

This converts the file into the new format and then Catalyst can open the design and be used to create Flex based content.

Now, the current argument is that this extra step is a worse workflow then creating a PSD and just opening it in Catalyst. Let’s look at an example.  I create my design in Photoshop and then open the PSD in Catalyst and start working on my application.  I realize that the design is not quite right or needs to be seriously re-done.  I have to go back to Photoshop, using the original PSD, make the changes that are required, and then go back to the Catalyst project and choose File > Import Artwork.  At that point, I have to update the component linkage, skins, etc. in the project.

The Fireworks workflow is exactly the same.  If I need to make a change, I go into Fireworks, update the design, save as FXG and then import into Catalyst.  So, in reality Photoshop and Fireworks are on even footing, PSDs just gets a pretty icon Welcome screen of Catalyst. Yet, Fireworks support of FXG actually adds some interesting benefits.

First off, A few of you may note that Photoshop also has the ability to export its files as FXG.  In truth, Fireworks FXG export engine is far and away more superior then Photoshops.  For example, go into both tools, create a few basic shapes, slap on some gradients and then export the files as FXG.  In my example I named the files Fwks.FXG and PSD.FXG.

Go to the exported file directory and take a look.  First you will see two asset folders, in my case: PSD.assets and Fwks.assets.  These folders are generated to hold any bitmap or other exported non-vector based files created during the conversion process.  Take a look inside the directories and note that in the Fwks.assets is empty, yet in PSD.assets there are multiple images.

What is happening here is that Fireworks is able to covert its vector shapes into pure FXG code but Photoshop can only export them as bitmap images.  Right there, Fireworks wins.  We are deploying our content to the Flash Player, which is a very powerful vector rendering engine.  If we are creating vector content, shouldn’t we be able to leverage it?

This also means that since the layout is all vector for Fireworks we can hand the FXG to a Flex developer and they can easily import, update and also manipulate the FXG inside Flex. This support actually makes Fireworks a superior tool over Photoshop for generating designs and assets for Flex 4 and/or Flash Catalyst based projects.

Its unfortunate that Adobe didn’t do as good a job promoting this support in the initial launch, but we should give a lot of kudos to the Fireworks development team for creating such a powerful export engine for a “future” file format.

Tomorrow (May 29th 2009), Adobe is holding their sold-out FlashCamp event at their headquarters in San Francisco.  Aaron and I are both going to be attendence and we are really looking forward to catching up with everyone there.  If you are going to be there, let us know so that we can meet up!