Patrick Hansen.com

Juan Sanchez from Scalenine.com, just announced the Scalenine Skin to Win Challenge, sponsored by: EffectiveUI and Adobe. This is such a good idea and I think it is great that Scalenine, Adobe and EffectiveUI are supporting this event. A great chance to see how design and development can come together with Flex and the Adobe design tools.

I created the logo below for the contest. I would like to thank Juan Sanchez for the design request, it’s definitely fun to get into design mode for a concept like this. A nice deviation from UI design.

Typically I would normally do this type of graphic in Adobe Illustrator, but I wanted to see how far I could go with it in Fireworks. I’ve been using Fireworks for UI design religiously lately, as I feel that it is very optimized for that type of design work. I have done several detailed icon illustrations in FW with no major issues or lack of tools, although a gradient mesh tool would be very welcomed. FW has become one of my favorite design tools out of the suite, rising up from the least favored a couple years ago. As for the motivation behind the design, I wanted to capture some aspects and elements of skinning a Flex app(ScrollBar, ComboBox, CheckBox), plus I wanted to make it energetic with some added depth to a very two dimensional realm. I mocked all of the 3D elements in FW manually, since I suck at Maya, . I even thought about using Ai for its simulated 3D tools, but they didn’t provide me the shaping and sculpting control that this design required. I could have accomplished this in Ai with minimal compromises if any at all, so don’t take this as a dis to Ai.

Hope you enjoy it and get in on the contest! I’m a judge, so I can’t enter :’( !

To compete in the contest, all you have to do is create the BEST Flex theme ever! This is an awesome contest to either hone your skinning skills for Flex, or for even getting introduced to skinning for Flex. You don’t have to be a pro to contend, with some research and effort, a novice could utilize the tools and tutorials available online (see scalenine for details), and still produce an awesome theme. It is a really excellent learning experience to create a whole theme, and even if you can’t get in on this event due to time or experience, it is still worth the effort. It won’t only up your skills for Flex design/development, it can also provide you with some knowledge and skills for skinning on a variety of platforms.

There are some awesome prizes out there too, like a MacBook Air, Adobe MAX tickets, and Adobe software. There will be some special recognitions and some possible copies of Flex Builder thrown out there as well. This is sure to be an amazing challenge and I can’t wait to see the entries!

For more details, vist: scalenine.com

I have been working with Degrafa in my spare time… all of that spare time that I have.

I am quite impressed. Not only by the framework and how scalable, flexible, and powerful it is, but also by its ease of use for even a designer such as myself. It does have some complicated aspects, but for the most part, it is fairy easy to grasp once you get your feet wet.

My first implementation was some additive work to Juan Sanchez’s scrollBar track to Discovery Live Earth that he helped me out with. That wasn’t much, as I just looked at what Juan had written and made some slight adjustments and color changes.

Now, I’m attempting to create a whole Flex theme using Degrafa. It has been challenging, but it is a great way to gain insight about Degrafa and skinning for Flex.

I highly recommend creating a complete theme for Flex to learn some of the basics and advance aspects of skinning. If you have the ability to, then you should also build a test application in Flex to test the skins and most importantly, to review the states of the components. I will post the code for a test application soon, as I made one for my own use.

You do not have to use Degrafa, you can use one of the many forms of skinning, from vector swfs in Flash or Illustrator, to bitmaps in Photoshop or Fireworks, and if you want, you can make a simple CSS based one rather quickly using one of the Flex Style Explorer.
Click Here is the Flex 3 Style Explorer
(please note that Adobe still hasn’t updated the title in the html page from Flex 2)
An easy way to get into skinning for Flex, is to download the Flex Skinning Extensions. You will need an Adobe account, which is FREE.
Click Here to get Extensions!

Keep in mind, that there are a couple techniques which are slightly more optimal and what I favor. I prefer to use stateful skins using Flash. By using stateful skins, you can create all of the states of your skin within one symbol (MovieClip), so it is self contained and easier to manage. You can even add animations and transitions to give it a little more flavor.

Not only are stateful skins great to work with for those reasons, but since it is in Flash, you can make them vector. Very optimal for performance, and scaling with scale9 enabled on your symbols. One other minor detail to keep in mind, which could pose problems, nested MovieClips will NOT scale 9 properly. This means you will not be able to use filters such as drop shadows, glows within a MovieClip that may require scale 9 like rounded rectangles.
(you must create a MovieClip in order to apply a filter in Flash)

To accomplish those effects on a scale 9 symbol, you can mock the shadows and filters with vector art, or you can apply the filter/effect in Flex. Based on some rumors, CS4 should fix this issue, as it is a problem within Flash and not Flex. Also, you can apply the scale 9 grid within the CSS for some skins like Bitmaps.
Here is a post for Flex 2 and scale 9 grid in CSS
Adobe DevNet

Alright. Well, this is my first attempt at re-skinning this blog.

Just calling it simple Dark Dawn… and I must thank the designer behind the miami blue theme in which I used as my foundation and customized it from there. I’ll probably experiment with more later, but this will do the trick for now. I just got this blog up and running and I just wanted it to change the style up from the existing themes.

I removed the other skins (themes) from the library, so unfortunately, you will not be able to compare or reference the other ones unless you visit the b2evolution site. That means this little posts doesn’t mean crap to most of you.

*By the way, I just found this gallery of a lot of really nice skins for b2evo. Wish I would’ve saw this before I made Dark Dawn, but it just opened a lot more doors! http://skins.b2evolution.net/

Here are some small screen shots of the miami blue theme and the first attempt Dark Dawn theme:

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.

Now I just need to skin this thing. No offense to anyone who created these themes, as I know that they are not the easiest things to deal with, but none of them are really in my favor. This miami blue theme is pretty nice, but not ideal, although, I’ll probably extend on it. I like the grey theme in color, but the layout is not to my taste.

Give me a few days and I’ll see what I can come up with.

p.s.
I just found http://skins.b2evolution.net/. This is a gallery of skins for the b2evolution blog. I did not see this previously to writing my re-skinning posts. I was under the impression that there were only the few that download with the system. There are actually some really nice skins in this gallery. If I had seen them earlier, I may have just selected one of these to go from. I still may, as some of these have some layouts that are slightly more ideal.