The beta of Flash Player 10, code named Astro, is now available on Adobe Labs. This will bring all the features that were demoed at MAX including:
Adobe Labs provides demos and more information or check out the press release: Flash Player 10 Delivers…
Tomorrow I’ll be giving a presentation on Degrafa at the Rocky Mountain Adobe User Group (RMAUG). The user group is in Denver, CO, but if you can’t be there in person, the whole thing will be “broadcast live” via Adobe Connect. If you can’t make it at all I think it’s going to be recorded, so you can replay my lack of typing skills and those things that always seem to go wrong during a presentation.
If you haven’t heard of Degrafa, it’s an open-source framework for defining graphics programatically through MXML. It greatly simplifies the process of creating dynamic graphics, skins, data visualizations, etc. Features include a library of shapes, fills, strokes, advanced CSS, focus on code reuse and much more. I use Degrafa in every Flex project I’m get my hands on.
I’m glad to finally be able to do something like this. There has been a lot of expressed interest in Degrafa, particularly in a Connect Session. I plan on going in depth on the features Degrafa has to offer, what people are doing with it, running through some sample code and talking about what plans we have for the next release. There will also be more of a hands-on session, which I’m not quite sure how that will work for those following via Connect.
If you’re interested in Degrafa I think this will be a great way to get up to speed with the framework, get some questions answered or just another way to heckle me. 
I’ll also be listening for feature requests, although my answer usually always is, “We’re working on it.”
Degrafa links:
Degrafa Website, Samples, Community Showcase, Documentation, Discussion Group, Code Repository and Degrafa on Twitter.
I’m excited to say that Maikel Sibbald has joined the EffectiveUI team. I’ve been following Maikel’s work for a while now via his blog and have featured some of it in the ScaleNine showcase area. Maikel brings knowledge of Flex and AS3, but I’m most excited about his experience in the area of 3D. He has extensive experience using 3D engines for Flash like Away 3D and this comes across on his blog. Maikel’s expertise in this area will help us as more attention is being placed on effective use of 3D in RIAs.
So, welcome to EffectiveUI Maikel! I look forward to collaborating with you.
The phrase “Designer/Developer Workflow” has rapidly become the second most spoken buzzword in the RIA space (besides RIA). At EffectiveUI we’ve put our own processes into place in order to make sure nothing is lost in translation as designers and developers collaborate to create a common vision. Of course, processes can only go so far with the available tools that currently exist, particularly on the design side. Throw in some tight deadlines, budgets, and client agendas and sometimes you have to compromise on some things, but the end goal is to create something the client and we are happy with.
I’m working in Flex pretty much everyday (I do have to sleep sometimes) and tools play a huge role in the way you operate throughout your day. From a design perspective, I’ve been trying to work in different Adobe applications, like Flash, Illustrator and Fireworks to create application designs from start to finish. This includes every part of the process, from wire frames, icons, “story boards” and all the way through to the final design.
What I’ve found is that none of the applications I work with provide the most optimal solution. There’s things in Fireworks that I want in Flash, things in Flash I want in Illustrator, etc. What ends up happening is I use 2-3 design applications to achieve the final result. I understand that each application has it’s own specialties, and that’s fine, but it really cuts into production time and how quickly you can iterate through application designs. Of course, that’s just the design phase.
After getting the design where I want it, I then have to bring that all into Flex. With the Skin Design Extensions and the Skin Import feature in Flex Builder the process is quickened. However, those solutions only get me 60% of the way there. There are additional skinning nuances that aren’t represented directly in Flex, there are still effects and transitions to be implemented and a slew of other things that I have to do to get the app looking and “acting” the way I want. In my case, I can play both roles to a certain extent, but this process is magnified when there is a hand-off from designer to developer.
Stories like mine aren’t anything new. In fact, I read emails, blogs and threads about these same frustrations. The good thing is that all players in the RIA space are pushing for a solution. We’ve all heard about the problems Adobe Thermo and the prospects of Flex 4 are going to address, but Microsoft is also addressing these same issues.
A while ago, a white-paper called “The New Iteration” landed on my desk. It basically outlines how XAML and Microsoft tools help facilitate a tighter collaboration between designers and developers. A little later, I read a blog post by Ethan Eismann, Design Lead on Thermo, that addresses some of the exact same things. Both use different terminology, but it all points to a common goal. In fact, as I was reading “The New Iteration” I tried swapping XAML out for MXML, Thermo out for Expression Blend, and Flex Builder for Visual Studio, and it still made sense.
At this point, there is still a lot of refinement going on. I don’t think anyone has the perfect solution yet, but the good thing is that we’re moving closer to it. I can’t wait until I can design applications for mobile, desktop and browser in one application and have it “seamlessly” translate into a development environment without loss of fidelity and not having the headaches to deal with when I have to make design changes. Less time needed for implementation of designs means more time to spend innovating, integrating usability testing, and further refining the processes we use. The result is an escalation in the number of ground-breaking user experiences.
I can live with that 
I’ve mentioned how important a color scheme can be in an application and some places where you can get some inspiration, but every one in a while you may need a pattern. One site I’ve started frequenting for inspiration and ideas for Degrafa samples is COLOURlovers. They have hundreds of thousands of community generated colors, color palettes and contributed patterns as well. I can’t tell you how many times I’ve had people ask me, “Where can I get some sweet repeating patterns?”
Not only is COLOURlovers a great site, but they just launched a public API you can leverage in your own applications. I just recently came across a sweet little AIR app, created by Levi McCallum of Futon Media, that leverages that API to bring some color and pattern goodness to your desktop.
Check out the COLOURlovers site or the COLOURlovers AIR app.
Sven-Olav Paavel has created a theme for Flex 3/AIR that mimics the look of Windows Classic. Not every situation calls for duplicating the exact look of an OS, but there have been requests for this type of theme. Most of the time people want an OS theme for doing demonstrations of how something might work in the actual operating system of choice.
It looks like Sven spent a lot of time making sure the skins represented the Windows Classic OS as closely as possible. If you’re one of the people asking for a Windows Classic theme, it looks like Sven is your guy. Nice work!
You can view or download out the Windows Classic theme. It has also been added to the growing ScaleNine themes page of skins for Flex/AIR that are available out there.
A big focus of Degrafa is the ability to use graphics in almost situation. User interfaces, data visualization, mapping, flow charts, backgrounds, etc. It seems to be so flexible that people are using it for all kinds of things and a lot of the examples we’ve seen have gone beyond expectations.
Part of that flexibility is allowing users to convert different formats to Degrafa so they don’t have to recreate the wheel. We’ve mentioned we’re working on converting SVG and XAML to Degrafa markup as there are a lot of similarities. However, there are other formats we’re experimenting/focusing on converting to Degrafa, like SWF, TTF, AI, and others.
Based on some preliminary research, I got to thinking, “Wouldn’t it be great if Adobe file formats all had some kind of Common Graphics Language?” A big part of what they do is graphics, right? Granted each application has different requirements and it’d be a whole different scenario to describe bitmaps versus vector graphics, but if there was some sort of common base there would be less of a need to import/export or convert files.
This would almost certainly be a full merger of Adobe and Macromedia formats. With projects like Mars being developed for PDF, MXML-G being used for Flex, MotionXML in Flash, etc. it’s not hard to imagine. This would mean graphics/documents being able to meander across media and device, from print, web, desktop, mobile, etc.
During Deepa’s talk at 360|Flex someone asked about converting/saving Illustrator files to MXML-G and the response was, “Maybe.” What if went further than. What if an Illustrator file used a common language as MXML-G (or was MXML-G?) and you could open it right inside Thermo as if in Illustrator. Or, one feature I’ve seen people use a lot in Photoshop, where you can opt to edit a Smart Object and it opens in Illustrator. You can save that Smart Object and the changes get reflected in the initial Photoshop document.
I know each application serves different purposes and thus each file needs to support the features. However, what if there was a core language and each application just expanded on that core. Then, maybe each application could have the ability to read or not read some of those expanded areas. At the very minimum every application could render the core elements, but depending on the type of application, parts that extend beyond that core would be compatible where it made the most sense. Unless every application could read files from any other application and render them flawlessly
Of course I’m not pretending to know what it would take to implement something like that, nor if it’s even feasible, but my guess is it would take a long time to implement. Part of what spurred all this was realizing some of the disconnects going between different applications and media. It’s doable right now, but it could be smoother. Adobe is already addressing a lot of these things.
With talks of taking Flex mobile and getting ever closer to the Adobe Engagement Platform, there’s are going to be a growing need to bring a lot of the tool sets to a common ground. When we start seeing that happen, traversing across media and device is going to get really easy and very interesting.
With Flex 3 there are a lot of great new features to help streamline the implementation of your custom skins into your Flex or AIR application. One of them is the Flex Skin Design Extensions (SDE) for Flash, Illustrator, Photoshop and Fireworks. These were available during the beta releases of Flex 3, so you may already be familiar with it. However, since the full release of Flex 3 there have been some updates to the extensions and I wanted to point out a few tricks that may help streamline your skinning workflow a bit further. Also, if you’re new to skinning Flex apps, check out Narciso Jaramillo’s updated article about creating skins for Flex using Adobe Creative Suite 3.
If you look at the skin templates that come with the Flex SDE you’ll notice that each skin is named in a particular way. The naming convention works by specifying the component name, an underscore “_”, then the component skin part. For example, Button_upSkin, Button_overSkin, etc. They are named this way so when you import the skin through Flex Builder’s Skin Import Wizard the combo boxes that allow you to assign a skin state for each skin are “automagically” assigned to the skin state you specified in the skin template. This is good to know because you can use the same naming conventions when you’re making your own custom skins that may be created without using the templates provided. I typically make a single file with all my skins in it and use this naming convention frequently.
This method will work for a variety of scenarios. For example, if you need to add a background image to a certain container, you could use myVbox_backgroundImage and it will go through the Skin Import Wizard very easily. This will work for other “skinnable” parts, like borderSkin, upIcon, etc. Easy enough, right?
The other nice thing you can do with adhering to these naming conventions is skin “sub-components”. For example, the DateField component allows you to specify a textInputStyleName. You can assign skins to that text input by specifying the component name, adding a hypen “-” (Illustrator, Fireworks, Illustrator) or dollar sign “$” (Flash) with the sub-component name, then and underscore “_” and the sub-component skin part. So, in the case of the DateField, you could specify the borderSkin for the text input like this:
DateField-textInput_borderSkin (Illustrator, Fireworks, Photoshop) or DateField$textInput_borderSkin (Flash)
Notice I just used “textInput” and not “textInputStyleName”. This is because “StyleName” is appended to the sub-component name during the Skin Import process in Flex. For example, naming a skin asset in Flash “ComboBox$dropdown_backgroundImage”, publishing it and importing it using the Skin Import Wizard would produce the following CSS (Note: You’d have to add backgroundSize: ‘100%’ for the image to stretch.):
ComboBox
{
dropdownStyleName: “comboBoxDropdown“;
}
.comboBoxDropdown
{
backgroundImage: Embed(skinClass=“ComboBox$dropdown_backgroundImage“);
}
If you look at the skin template for the application your using you should see this naming convention used for the tab skins. You can use this same naming convention for other sub-components, like dropdown, verticalScrollBar, etc. Just naming your skin assets a certain way can really streamline the the skin production process.
Another new feature in Flex 3 is CSS Design Mode. While viewing CSS you can click on the “Design” mode button to see what your CSS looks like applied to a particular component. However, if you were to create a style class and switch to CSS Design Mode you won’t get an immediate preview. This is because you have to specify a component to preview the CSS against. A way to forego this step is to add the type of component you want the styling applied to to the class name. For example, if I had a class name of “blueButton” I could preview it as a Button component in CSS Design Mode by adding “Button” to the class name keeping the dot “.” of the class name like this:
Button.myButton
{
fillAlphas: 1.0, 1.0;
fillColors: #84B1F4, #1D4888;
borderColor: #07314F;
color: #FFFFFF;
}
This will work for pretty much any component, provide a quick way to preview the CSS styling on a component without having to specify it in CSS Design Mode and make your CSS a bit more descriptive. If you use the same styling across multiple components you may want to leave class names void of component specifications.
Designing Flex 3 skins and styles using Creative Suite 3 and Flex Builder 3
Flex 3 CSS Design Mode in LiveDocs
The Webmaniacs Conference is coming up in May and I’ll be speaking during the FlexManiacs portion of it, which is May 21-23. My topic will be on Degrafa and the advancements we have made (or will have made). We’ve made a lot of progress for a group of devs working on it as a side project. Degrafa has been well received and we want to make sure we keep progressing as much as possible. There’s a lot of things we’ve talked about that we want to do with the framework and we hope to have as much of those to show in May as possible.
Looking at the schedule it looks like there may be enough speakers coming from Denver to have a conference on the plane (Maybe the inAIR Conference ). Some of my buddies from EffectiveUI will also be speaking, including:
Tony Hillerson: Flex w/Ruby on Rails
Jim Cheng: Understanding Flex Automation
It’s my first time at Webmaniacs, but the range of topics looks very promising. I’ve got my eye on a bunch I want to check out, so maybe I’ll see you there.
What a week! 360|Flex was a blast and it seems to get better at each conference. I saw a lot of familiar faces and it was a huge mix of people all interested in Flex. It’s really cool to see the way the community is progressing. It was also a great experience being an employee of EffectiveUI rather than flying solo. I was able to hang out at the EffectiveUI booth to talk about our current projects and help some trouble-shoot issues with their own projects, as well as hand out some Degrafa shirts.
The 360|Flex conference definitely had an open-source tone to it. With talk of projects like Open Flux, Merapi, FlexLib and Degrafa, it was exciting to hear how developers are grouping together to push Flex in the direction they’d like to see it go. I sat in on a session surrounding the topic of open-source projects to talk about Degrafa, as well as listen in on what others are working on.
Doug McCune and I were also able to fill in for Jesse Warden to discuss “Making it big as an independent Flex developer.” This was a great session where Doug and I just shared our experiences and thoughts on the Flex market, branding yourself, etc. I’ve never been without a full-time job, but I have done consulting work simultaneously. I think it was helpful for people to hear that you don’t have to quit your full-time job to make it. Jeffry Houser also offered up his insights, as did others. It pretty much boils down to working your ass off.
For me, Wednesday was the most exciting day of the conference. Probably because I got to attend the most sessions on that day. The day kicked off with some time where members of the community got to share what they were working on. Again, there was a few open-source projects mentioned, I got to plug my session on Degrafa, and we all got a sneak peek at what other’s were working on.
By my session, on the last day and time, I was pretty fried, but I was excited to share Degrafa with those who hadn’t heard of it and discuss some of the new features in the new beta release. Ben Stucki and Pavan Podila were there to field technical questions and comment on some of the new features. I was able to hang out a bit after my session to answer more questions, but then headed to the airport in a hurry.
So, 360|Flex rocked! The very next day I left in a car for Colorado and am now officially in downtown Denver, a couple miles from the EffectiveUI offices. Needless to say, it’s been a hectic and exciting week.
Here’s the slides from my session. The examples I showed will be available soon as samples on the Degrafa site.
Entries
Dreamhost