Patrick Hansen.com

Greg Owen posted a nice follow up on the EffectiveUI blog.

We worked with Adobe to see if we could work on something to help alleviate this issue, but even with a custom UIMovieCip Class Adobe provided, we still saw large CPU hit.

So, again, at this point, for larger applications, it is probably best to stick with stateless skins if you are going the graphical approach.

Read more on the post here:
EffectiveUI Blog

I just wrote a post about stateless vs. stateful graphical skins with Flash and Flex. We discovered there are some big performance issues with using stateful skins created in Flash (swc).

Greg Owen, a fellow coworker and lead developer at EffectiveUI, help me create a test app for this. The app is a Flex app wrapped in AIR, and has 3 style sheets which you can swap out to test the various skin options for a CheckBox which is being instantiated 500 times. (if you download the source, you can alter this value). This provides enough load to actually see the CPU hit.

I had a recent comment about using Degrafa and the comparisons, so with the help of Juan Sanchez, I was able to add a skin that is created in Degrafa programmatically and is a very close resemblance to the other skins being used in regards to colors and appearance of states.

We ran some tests today using 500 CheckBoxes and these were the results:

No skin/CSS – CPU = 13.5%
Stateless – CPU = 13.5% to 14%
Stateful – CPU = 47% to 50% Whoa!
Degrafa – CPU = 13.5% to 14.2%

So, it looks like Degrafa does not have that large of a hit on the performance and if you are using it to skin yoru Flex apps, then you should be good to go!

(results are on a MacBook Pro 2.33GHZ Intel Core 2 Duo 2GB RAM.
Please note, to get a true reading, the app should be in focus)

Download the source here:

http://www.patrickhansen.com/demos/flex/SkinningTest_v2.zip

Adam Kinney wrote a post about Project Rosetta, which seems pretty cool. Project Rosetta is a resource aimed at providing developers from the Flash realm, resources and tutorials on how to take those skills to Silverlight and WPF.

Project Rosetta

It seems like they realize how much Silverlight & WPF parallels with Flash not only in applications, but the developers and designers who will be working with it.

More info here too:

http://channel9.msdn.com/shows/Continuum/ProjectRosetta/

If you’re in the interactive/web industry, you probably already are well aware of Flash Player 10 (code-named Astro). It recently came out and of course has some great new features.

Here is a brief summary of them:

• 3D Effects

• Custom Filters and Effects

• Advanced Text Layout

• Enhanced Drawing API

• Visual Performance Improvements

I’m not going to reiterate the details that are posted on Adobe’s site.
For more, you can just visit: http://labs.adobe.com/technologies/flashplayer10/
I’m anxious to check out the advanced text layout, since Flash is not my best friend for text formatting right now.

When working on a prototype, you must first define what type of prototype it will be. There are several types, simple static pages that you can just walk through, minimal functioning prototyping which actually has some interaction and logic behind it, even paper prototypes. Now the question of what is the best application to develop a prototype in? Well, you must define your needs and requirements, then define your resources.

It is obviously easier for a Flex developer to create it in Flex. It is easier for a designer to create it a design application and make static or simple clickable prototypes. (i.e. Using Fireworks preview in Browser mode). Flash designer/Developer in Flash and so on.

In this post, I’m going to go over a Flash vs. Flex comparison with a designer who has minimal development knowledge in AS and Flex MXML.

I recently have been working on a rapid prototype for one of our clients. It was a hand off which had over a week into it designed and developed in Flash with some AS 2.0 by another fellow designer.

Flash is great for prototyping, especially for a designer or someone who is not very familiar with coding. You can get by with tweens and simple gotoAndPlay(); & stop(); scripting. As long as you do not need to show what’s under the hood, Flash can provide a very close representation of the final product with not much development. Prototypes are usually done early on, so design is usually not finalized, meaning the designer can do on-the-fly design while creating the prototype. Some prototypes call for some more functionality which you cannot get out of linear design. As of right now, this prototype is pretty hacked together, and if another designer had to go into it, they would be on a code safari. You do get great design, you can make some unique animations, effects, and transitions, but it is not scalable. One slight change request, could cause a major chain reaction. I have stepped up and attempted to built this as dynamically as possible, for I remember the early days of Flash where I was digging 4 levels deep to make changes, or simply redesigning the whole component. This was built a little better than anticipated.

What am I getting at?
Well, is Flash the best for prototyping applications? That’s a pretty relative question. In some cases yes. In this case, where there is more functionality required, dependent and logic driven components, then it is a pain. Also, if your design calls for some type of component that already exist in Flex, then why waste your time.

I sat down with a fellow developer and he recommended doing it in Flex. This was my initial approach as well, but I have limited Flex experience so far. We are on a very tight deadline with this project (when aren’t we?), so making the decision to go into Flex or Flash was more driven by time, my experience and what had already been accomplished in Flash. Although, I did begin in Flex and spent a brief hour and a half laying it out. I learned a lot and especially since one of very talented developers was at my side for guidance.

My beginner knowledge of Flex allowed me to acknowledge that Flex had a lot of what I needed already in the framework. It was a matter of me knowing how to implement it and key thing is make it LOOK GOOD. I am very familiar with skinning, but developing, skinning and fine tuning with minor experience could take some time and reserve my comfort level.

I’ve been in this Flash file for over a week, and it does serve its purpose as a prototype. The only thing is, it does not behave exactly how it should (As I intended), and it took quit a bit of time to code up some of the functionality I needed (bit rusty), when Flex already had it there. If I needed a uniquely skinned component or custom behavior, I could just create that in Flash and make it a Flex component/container and take it from there. You can also export your animations and tweening into AS 3.0 which you can implement into Flex if desired.

My Summary:
I’m making it a point to learn Flex (MXML, AS 3.0) as much as possible to at least get my level up to prototype. I cannot wait until Thermo is released, so I’m going to get into a Flex bootcamp with some fellow developers and see where I can get. The frustrations and struggles I had in Flash were not very pleasing lately; scope issues, slight changes from AS languages, customizing components or behaviors from scratch…etc. Flash does have its place in the industry, but for application development and prototyping, Flex comes out on top in my book. When I start learning Degrafa, that should open some doors and bring design in Flex to a whole other level.

If you are designing in Flash, especially for skinning Flex components, I highly recommend NOT using strokes.

Solution:
Use complete shape fills or turn your stroke into a fill by selecting the stroke, then going to the menu Modify>Shape>Convert Lines to Fills
*note: You will have to realign your object after doing this

Explanation:
For one, strokes in Flash are centered relative to the edge of the shape they are outlining. This means that if you are using hairline or 1 px stroke, then it is centered and .5 px will be inset and .5px will be outset.

This shot shows the stroke with the right edge deleted. You can see how the strokes sits on top of the shape fill.

A shape(fill) that is 50px w with a 1 px stroke will actually be 51px w, but only measure 50px w in the properties panel.

In my examples, the red shape is a fill with no stroke and is 50px w (aligned 0,0). The blue shape with green outline is also 50px (aligned 0, 10) and measures 50px w in the properties panel, because it doesn’t account for the stroke. (The stroke is actually a separate object in Flash)

What happens? If you are dealing with an object with strokes and do not account for this, then your placement of these items will be slightly off. Some would say it’s only a half a pixel, is that such as big deal? Yes it is. Especially if you will be dealing with multiple items and relative binding or anchoring. A half a pixel can cause a 10px shift in a list of 10 items.

Another major issue is how your shape will be displayed. Fractional alignments on shapes and/or strokes, causes a bad visual display of that object. You can really see this on rounded corners. You may not see it until you compile, but I always ensure my shapes are on whole pixels and I design with solid shapes not strokes. This is relative to your shape dimensions and pixel width, as even pixel stroke widths do make it easier, but I still convert them.

(These shots are exaggerated to better represent the issue)
The top rectangle appears in the property panel that it is on a whole pixel x =50 , y= 125 and it is 280px x 160px. If it had a 1 pixel stroke, in actuality, it would be 281px x 161px and its alignment would be 50.5, 125.5.

You can also see the slight distortion of the corners. It is usually more noticeable on the left side of a shape with rounded corners. You can see in the bottom image (red rectangles) that the top rectangle’s corners appear distorted and the bottom one has been converted to fills and aligned on whole pixels.

I have adapted this into my Fireworks designing as well, because I usually carry my Fireworks vector shapes right into Flash for skinning.

Fireworks handles pixel alignment in a strange way as well. You can draw a shape at 0, 0 and it may display this in the properties panel, but sometimes Fireworks does not really draw it at that location. To make sure, click in the x or y input in the properties panel and press “enter.” If your shape was off, you will see a minor re-alignment. If not, then you won’t see anything.

This also affects the shape when copying, create a new file, then pasting. (which, most design apps will naturally create a new file with a canvas size equal to that of the copied object.) A fellow coworker of mine experienced this recently on an object that was 9px x 9px. It as just like another object , but just a different color. They both measured 9px x 9px, but when he copied and created a new file, it created a 11px x 9px canvas. We aligned it properly and this fixed the issue.

I have some friends on the team for Degrafa.

What is it?

“The focus behind the Declarative Graphics Framework (Degrafa) is to bring the graphics classes up a level to provide a common ground between developer and designer within Flex, and enable the graphics classes to become first class citizens within the Flex framework.”

I have yet to play with this, but I’m really excited. Ironically, when I had a chance to install it and give it a test run, I started Flex and my license expired. Had to try track it down and then by the time I got everything prepared, meeting time!

I highly suggest looking into this if you plan on working with Flex, skinning, designing, even if you are a developer who wants to test out your design skills.