ScaleNine

Today I came across something interesting while trouble-shooting an issue with Patrick Hansen, a designer/developer at EffectiveUI. Patrick was creating skins for a Flex application using Flash. One Button skin had some very intricate and rich animated artwork that extended beyond the “actual” bounds of the skin. That is, the animation had artwork that was masked so it would only appear within the viewable area of the Button skin. Below is a simple example I made to illustrate what I mean.

Button skin artwork that extends beyond the bounds. Unmasked and masked.

The animation appeared fine in Flash, but when it was applied as a skin to a Button the skin shrank in size (see image below). This was because the Button took into account the artwork that was masked in Flash. This made total sense. To fix it I thought, “Well, we could just use the bounding box technique that has been outlined in several Flex Component Kit Tutorials.” Easy enough.

Button skin without a bounding box. The red is the “actual” bounds of the Button component.

If you’re not familiar with using a bounding box in Flash to define the bounds you’d like your Flash artwork to adhere too, the concept is simple. Basically, you create a box, make it a MovieClip (called “BoundingBox” or something), give it an instance name of “boundingBox” when it’s on the Stage and then use it to define bounds of the Flash content. Kinda like this:

Button skin with bounding box (red) applied.

We did all that without any issues. However, we hit a snag when we tried to apply the Button skin that had this bounding box to an actual Flex Button component. We were trying to apply the skin by embedding a skinClass through CSS like this:


Button
{
skin: Embed(skinClass="Button_skin");
}


The Flex application would just hang. The trick to getting it to work was to just use a ClassReference like this:


Button
{
skin: ClassReference("Button_skin");
}


Everything compiled fine when using ClassReference. The skin looked exactly as it did in Flash and used the bounding box correctly. Cool!

The scary thing is that “Skin Import Wizard” in Flex automatically uses skinClass and most designers who use Flash are probably used to working with masks and artwork that extends “beyond the bounds”. The thing is that to a designer or developer it could appear that the skin is the issue, but in fact it was just a matter of switching the Skin Import Wizard default of skinClass to use ClassReference.

Just to make sure it wasn’t a fluke I made a quick test (view source enabled). If you wanna make the app break, just switch ClassReference to skinClass as shown above. Am I just doing something wrong?

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.

Naming Conventions

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.

Naming for CSS Design Mode Previews

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.

Other Resources

Designing Flex 3 skins and styles using Creative Suite 3 and Flex Builder 3
Flex 3 CSS Design Mode in LiveDocs

At MAX Peter Flynn of Adobe demoed how to make skins with transitions using Flash CS3 and some pre-created templates. For those who didn’t get to see the walk-through, or even for those who have, I thought I’d put together a little walk-through of my own.

What you need to get going is Flash CS3 and the Flex Skin Design Extension for Flash, which includes the templates. Download the Flex Skin Design Extension for Flash and install it. Once installed, fire up Flash CS3. You should see a “Flex Skins” option under the “Create from Template” column in the Getting Started window.

When you click on the “Flex Skins” option you’ll get a window with a list of available Flex Component skins. For this example I’ll select the Button skin.

When you first open the file you’ll see 4 layers: information, symbols, labels, background. Double-click on the Button symbol to reveal the timeline within.

If you scrub through the timeline you’ll notice the artwork changes to reflect the different states. This coincides with the frame labels: up, over, down, disabled. These frame labels match the state names for this Button component. Each of the other component skins may have different frame labels.

You may also notice the other frames with labels that are right next to each other. These are the transition starting and ending frames. The reason they are right next to each other is to prevent a time delay between the states. So, the first thing you want to do is spread those frames apart. For this example I’ll be working with the up-over transition.

If you look at the frame labels for that particular transition you’ll notice they’re named up-over:start and up-over:end. This is necessary for the transition to work properly in Flex.

With the frames spread apart I’ll create an under-glow transition where the Button will appear to be lit from the bottom as the user rolls over. Here’s a snapshot of the work area after I’ve created my transition:

I’ve got my skin all set up, so now I’ll export it for use in Flex. For this example I’ll just publish the SWF/SWC to my Desktop.

Once those are published I switch over to Flex Builder 3. In Flex Builder I’ll create a new Flex Project called “ButtonTransitionSkin”. Now it’s time to bring in my Button skin.

To bring in the Button skin got up to the File > Import > Skin Artwork menu item in Flex Builder. When you select “Skin Artwork” there are a few options. At the top select the “SWC or SWF file” radio button and then browse for the SWC that was published. I had put mine on my Desktop. Make sure you select the SWC and not the SWF.

I’ll change the default CSS entry for “Create skin style rules in:” to style.css and just leave the default selection for the “Attach style sheet to application:” option. Usually I’ll put my skin assets into a subfolder called something like “style” or “skins”, but in this case I’m not. After doing that the window looks like this:

When I hit the “Next” button I get a list of check box items to select the skins I want to include in my style sheet. I’ll leave “Button_skin” checked and click “Finish”. When I do that the style.css file is created and the skin is assigned to that component.

Now all that’s left is to add a Button to my Application layout and I get something like this:

Click here to view in new window (View Source enabled). Or download the project (including FLA) here.

If you’re looking for another method of creating “stateful” skins without using Flash, check out a post Nahuel of AsFusion wrote.

Going back and forth between Flex 2 and the new Flex 3 Beta 2, there are a few things I’ve immediately noticed that have changed. This may result in former styling/skinning properties not appearing or possibly errors showing up. Another thing to note is that there are some styling/skinning properties that have been added. Here’s a list of a few things I’ve noticed so far:

Combo Box
Padding for top and bottom can be set on a ComboBox: paddingTop, paddingBottom. Option to specify a color for the arrow icon: iconColor.

Data Grid
A skin can be specified for a DataGrid header: headerBackgroundSkin.

Effects
You can now specify effects for data items in a List and TileList. There are effects for instances of data changing: dataChangeEffect. This works with the added DefaultListEffect and DefaultTileListEffect (part of effects like ResizeEffect, MoveEffect, etc.). A property has also been added that allows for the creation of itemRenderers when the effect is played: offscreenExtraRowsOrColumns.

PopUpButton
Skin states that were called overRightSkin and downRightSkin are now called popUpOverSkin and popUpDownSkin. Skin states overLeftSkin and downLeftSkin are just overSkin and downSkin.

In Flex 3 you can now replace the arrow icon by specifying a graphic for popUpIcon. You can also specify a color for the default arrow icon.

Some of these things may or may not affect some of the previously released ScaleNine themes. Moving forward, the themes I create will be built for use in Flex 3. I’ll try to add to this list as I notice more things or as others let me know of what changes they’ve noticed. Be sure to check out Narciso Jaramillo’s post on some other workflow features that are available along with the new Flex Builder 3 Beta 2.

For now, I’m referring to the new and improved Live Docs for Flex 3 Beta 2 for anything I run into.

One of the things I often talk about is trying to separate any styling from MXML. What I mean is preventing the need to go into the MXML to change styling and doing as much as possible from an external CSS file.

Typically I might assign a style to a Button by assigning a class selector for the styleName:

<mx:Button styleName=”blueButton”/>

That works just fine, but let’s say I want to change the Button to use a class selector called “redButton” instead. That is, to make the Button have red styling instead of blue. One option would be to change the styleName above to a “redButton” class selector I create. Or reassign the styling properties in my CSS file for “blueButton”, which could cause confusion.

Another scenario might be using a “task specific” class selector for the styleName. For example, loginButton, addButton, emailButton, etc. However, I may run into an issue if a slight variation is needed in another part of the user interface. Or if the class selector name of “uploadButton” no longer makes sense. Then I’d have to go into the MXML and change the class selector for the styleName.

A great way to avoid having to go into the MXML is using the getStyle method inside of the assignment of the styleName. The MXML for a Button in a Login component might look like this:

<mx:Button label=”Login” styleName=”{getStyle(’loginButtonStyleName’)}”/>

And in my CSS file I have the following:

Login
{
loginButtonStyleName: ‘blueButton’;
}

.blueButton
{
fillColors: #A9DBFF, #0095C6;
fillAlphas: 1,1;
}

With this implemented I can change the style of the login button without having to go into the MXML. For example, if I decide I want the login button to now be grey, I just create a new class selector and assign it to the loginButtonStyleName. Like this:

Login
{
loginButtonStyleName: ‘greyButton’;
}

.greyButton
{
fillColors: #EEEEEE, #AAAAAA;
fillAlphas: 1,1;
}

.blueButton
{
fillColors: #A9DBFF, #0095C6;
fillAlphas: 1,1;
}

If you’re tied to the Design View, this technique may take some getting used to because you’ll only see the results at compile time. One way to get around that might be to do the styling inline and then once you get things looking the way you want to, go and externalize the styling. Then again, the Design View doesn’t really offer as much as it could.

I don’t always use this technique, because it can be a bit overkill for some instances. I use it wherever I think it makes sense and I know it will come in handy in the long run. There’s a few other techniques that I use as well that I’ll try to share. Thanks to Andy McIntosh for sharing the power of this use of the getStyle method.

I’ve been using the AnimateProperty effect a lot lately for creating single or compound effects in Flex, so I thought I’d share a few simple examples. The AnimateProperty effect not only allows you to animate a property like width, height, etc., but it also allows you to animate a style property as well, so you can really get into the details of how you want a component to animate. Here’s some quick examples:

You can recreate the Resize, Fade, and Move effects by using the AnimateProperty effect and animating size, position and alpha:

Click here to view source

With the AnimateProperty effect you can also animate certain styles by setting isStyle=”true” in the effect properties. This allows you to do things like animate the cornerRadius and fontSize of a Button:

Click here to view source

Like I said, these are simple examples, but with a little experimentation you can add another level of detail to any effect you might be trying to create and it some cases have a bit more control.

Part of our 360Flex Presentation was supposed to include some tips & tricks, but we ran out of time. Here’s a couple simple things I might do when creating a set of skins or a theme for a Flex project.

Tip #1

When using SWFs for skinning, add the symbol name as a selectable text object to allow for quick copy and paste reference. I find this really helpful when handing a SWF over to developers, because it saves them time from having to open the FLA or manually type in the names of symbols.

It’s really easy to do. If you’re using Flash, just add text next to a symbol and fill in the name. When the text is added it will default to Static Text, which is fine. To make it selectable, just click on the selectable text toggle button.

When you publish your SWF all the text you made selectable can now be easily copied and pasted from the opened SWF. Here’s a screenshot of an example I did for Shilliber :

Screenshot of missing slide

Tip #2

Another thing I’ll do is create a set of skins just for use as backgrounds. I usually create a background as a 30 x 30 pixel square and then set 9-slice grids to allow it to stretch correctly.

Then in my CSS file I create the background classes like this:

/*
//——————————
// Backgrounds
//——————————
*/
.lightGreyBg
{
backgroundImage: Embed(source=”darkroom.swf”, symbol=”lightGrey_Bg”);
backgroundSize: “100%”;
borderStyle:none;
}
.darkGreyBg
{
backgroundImage: Embed(source=”darkroom.swf”, symbol=”darkGreyShadow_Bg”);
backgroundSize: “100%”;
borderStyle:none;
}
.linesBg
{
backgroundImage: Embed(source=”darkroom.swf”, symbol=”lines_Bg”);
backgroundSize: “100%”;
borderStyle:none;
}
.centerLightGreyBg
{
backgroundImage: Embed(source=”darkroom.swf”, symbol=”centerLightGrey_Bg”);
backgroundSize: “100%”;
borderStyle:none;
}

Depending on the use of the background skin I’ll use either the backgroundImage or borderSkin style properties. This works great for backgrounds of VBox, HBox, Canvas, etc.

Screenshot of missing slide

Tip #3

When working on a project I try to keep my CSS file as clean as possible. The less scrolling and edits I have to make, the better. One trick I use is something I got from working with CSS for HTML, grouping items with common properties using comma delimitation.

For example, let’s say you have a group of 4 Buttons. All have the same fillColors, fillAlphas, fontFamily, borderColor, cornerRadius, etc. The only difference between them is they each have a different icon.

You could do it like this:

/*
//——————————
// Blue Buttons
//——————————
*/
.arrowBttn, .starBttn, .checkBttn, .xBttn {
cornerRadius: 12;
fillColors: #4A617E, #FFFFFF, #0066ff, #0066cc;
fillAlphas: 1,1,1,1;
color: #000000;
borderColor: #006699;
}
.arrowBttn {
upIcon: Embed(source=’images/arrowUp.png’);
cornerRadius: 12;
fillColors: #4A617E, #FFFFFF, #0066ff, #0066cc;
fillAlphas: 1,1,1,1;
color: #000000;
borderColor: #006699;
}
.starBttn {
upIcon: Embed(source=’images/star.png’);
cornerRadius: 12;
fillColors: #4A617E, #FFFFFF, #0066ff, #0066cc;
fillAlphas: 1,1,1,1;
color: #000000;
borderColor: #006699;
}
.checkBttn {
upIcon: Embed(source=’images/check.png’);
cornerRadius: 12;
fillColors: #4A617E, #FFFFFF, #0066ff, #0066cc;
fillAlphas: 1,1,1,1;
color: #000000;
borderColor: #006699;
}
.xBttn {
upIcon: Embed(source=’images/x.png’);
cornerRadius: 12;
fillColors: #4A617E, #FFFFFF, #0066ff, #0066cc;
fillAlphas: 1,1,1,1;
color: #000000;
borderColor: #006699;
}

That can create a pretty bloated CSS file over time. Rather than specify the same common properties for each Button 4 times, you can group the common properties together under the applicable style classes and then re-specify each class separately for properties that are not common. Like this:

/*
//——————————
// Blue Buttons
//——————————
*/
.arrowBttn, .starBttn, .checkBttn, .xBttn {
cornerRadius: 12;
fillColors: #4A617E, #FFFFFF, #0066ff, #0066cc;
fillAlphas: 1,1,1,1;
color: #000000;
borderColor: #006699;
}
.arrowBttn {
upIcon: Embed(source=’images/arrowUp.png’);
}
.starBttn {
upIcon: Embed(source=’images/star.png’);
}
.checkBttn {
upIcon: Embed(source=’images/check.png’);
}
.xBttn {
upIcon: Embed(source=’images/x.png’);
}

Not only have you eliminated 20 lines of code, but if you ever want to change a property of your Buttons, you only have to do it in one place. This is something that could have been easily used with Tip #2.

Screenshot of missing slide

If anyone else has any tips to share, let me know.

If you’re looking for some fire, smoke and water effects, check out Doug McCune’s blog. As a self-proclaimed Flex Machine, he’s also got some great components put together which you can also find over at flexlib.net. Good stuff.

A recent blog post I came across brought up some questions regarding the UI design workflow and bringing those designs into Flex 2. I replied to the post outlining my experiences and I thought it might be worth sharing that information here.

Initially, when I first got started with Flex 2 I spent time just getting to understand the default components and what attributes could be skinned. The Component Explorer helped a lot, as did the Style Explorer to begin understanding what could be done with just CSS.

With that knowledge I just jumped in and started experimenting and learning how to write MXML to get the layout I wanted. I made up some projects to give myself a direction/goal. I used XML files to populate all my data driven components. Sure, nothing really ended up being completely functional, but it looked nice and this knowledge would prove to be quite helpful.

Now, the first thing I do is create a design and get approvals. I create the initial vector art in Adobe Illustrator. Yes, Adobe Illustrator. Why not Photoshop or Flash you might be asking. Well, basically it’s just in case I ever need the icons, buttons, etc. for printed pieces. I’ve run into numerous occasions where a client has needed some graphic I created for the web to be scaled up to 5 times it’s original size and placed in some corporate documentation or instruction manual.

From Illustrator I’ll either go into Photoshop or right into Flash. I use Flash to hold all my graphical assets for buttons, backgrounds, drop downs, etc. in one SWF. It’s really easy to define the 9-slice or scale9 characteristics for scaling purposes. Also, it’s nice just to have everything in one place to insure design consistency. If file size becomes an issue, I’ll split things up.

After I have enough graphics to get going, I fire up Flex Builder. By this time I have a layout going. I create a new CSS file if I don’t have one already and start defining CSS styling globally (including embedded fonts, and embedded images/swfs) for components and CSS styling for other design variations (ie. .blueButtoon, .orangeButton). If there are single instances of a component that need certain styling I’ll do it in the MXML.

As I mentioned above, I use XML files to get data populating my components. If I need any Item Renderers or Item Editors I’ll create those and skin them. Basically create a visual prototype since sometimes it’s easier to show someone than explain it and Flex makes it easy to do that.

This is great for the programmers ’cause when they come in they’ve got the initial structure. They ditch my XML files and hook the components up to a database. They also implement everything else that I’m not able to do, like build custom Action Script components. Then it’s just me going back and forth with the programmers to get everything looking the way it should.

This is the way I have been working, but by no means am I saying it’s best practices. The worflow has worked great so far, but if anyone has any suggestions on how to improve it I, and I’m sure others, would love to hear about it.

This process will get easier and more simple as new releases and versions of Adobe software become available. So until then, if you can get designers to learn MXML and a little XML it can definitely speed up the work flow. There’s a bit of a learning curve to be sure, but it can be worth it.

I thought I’d put together some solid instructions for installing the ScaleNine themes since the link I have on the homepage seemed to be a little vague and there are recurring questions regarding the topic. Please forgive the lack of screenshots, my Flex Builder trial ran out and I’ve switched to using the free Flex 2 SDK.

Installing any of the ScaleNine themes is pretty easy depending on it’s use and on your knowledge of Flex 2. Either way, it is still pretty easy. There is also a slight difference in installing a pure CSS theme and a graphical theme.

Installing a CSS Theme

Download and unzip the provided source files. Usually it will contain a CSS file and maybe a background image. You can drop these files anywhere in your Flex Project folder. Now, in your Application’s MXML create an mx:Style tag and specify the path of where you dropped the CSS and supporting files. Like this:

<mx:Style source=”/yourFilePath/CSSFile.css”/>

If your in Flex Builder you can hit the “Refresh View” button in the Design View and if the theme was set up correctly you should see the appearance of your app change to reflect the specified CSS.

It’s that easy. Once installed you can change the CSS to suit your needs or make style changes in your MXML to alter the installed CSS theme for certain components.

If things don’t seem to be working you can always refer to the source of the CSS themes on the ScaleNine homepage.

Installing a Graphical Theme

Installing one of the ScaleNine graphical themes is pretty much the same as the instructions above. The only difference is that your dealing with another asset, a SWF.

When you unzip the provided source files you should see a SWF, CSS file, and a background image inside a style folder. Drop that folder into the top level of your Flex Project. Then, in your Application’s MXML create an mx:Style tag and specify the path of where you dropped the CSS and supporting files. Like this:

<mx:Style source=”/yourFilePath/CSSFile.css”/>

If your in Flex Builder you can hit the “Refresh View” button in the Design View and if the theme was set up correctly you should see the appearance of your app change to reflect the specified CSS. You may also see what look to be purple boxes (embedded SWF symbols) if you’re in the Design View.

If you put the provided CSS file in one place and the SWF in another, that’s where things change a little. In the CSS file there is a path defined for the SWF file. So, if you move the SWF file just do a “Find and Replace” in the CSS and switch the old path to the new location of the SWF file.

As a side note, if you’re using the ThemeSwapper source or doing any Runtime CSS stuff, make sure you right click on any CSS files and select “Compile CSS to SWF”. Otherwise you’ll get an error stating that a specified SWF can’t be found.

Hope this information helps. For more information using external style sheets check out these links:

Applying CSS Styles to components , Using external Style Sheets , Graphical Skinning