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.

Inspired by Ted Patrick’s OSX tip I thought I’d share one that I find particularly handy. By holding down the command key and clicking on a window’s title you can display the file path of an open document or finder window. When you select and release on an item in the displayed path it will open the selected location. This is something you were able to do in OS9 and it carried over to OSX. I use it all the time.

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.

Recently I was presented with the challenge of creating overlapping Tabs and when clicked, the selected Tab should come to the foreground. No problem I thought. I’ll just set the horizontalGap of the TabBar to a negative value to get the overlap and, um, wait a second. How do I get the selected Tab to come to the foreground when it’s clicked? It doesn’t do that by default. A selected Tab stays at it’s itnitially rendered depth.

I tackled this challenge graphically by modifying my Tab skins by slicing them up like and putting the “overlapped” portion of the Tab with part of the Tab skin next to it. This is pretty similar tactics to creating overlapping tabs fot HTML sites using CSS. This is how my skin graphics looked:

Which gave me a TabBar with Tabs that looked like this:

I then ended up adding some gradients to smooth out the juncture of where one Tab skin met the next to prevent any hard edges. Subtle stuff, but it makes a difference. Adding those gradients gave me a TabBar with Tabs that looked like this:

The final step was pointing to my CSS file for the styling of the TabBar and Tabs. With the styling in place, this technique creates the illusion of overlapping Tabs in a TabBar.

View Sample and with Source (FLA file included)

Of course there are downsides to this technique. The most flexible solution would be tweaking the TabBar to bring the selected child/tab to the foreground. Doing so would mean there’d be no need to mess with slicing up images and all you’d have to do is set the horizontalGap on a TabBar to a negative value like I initially tried to do. Hopefully there wasn’t an allowTabOverlap property, or something, I missed.