jump to navigation

Designing Flex 3 skins and styles August 7, 2010

Posted by Tournas Dimitrios in Flex.
trackback

Flex has always provided rich functionality for customizing the appearance of its built-in components. You can start with the default appearance of the components and extensively tweak their properties through CSS styles, or you can completely replace the default appearance by drawing custom vector or bitmap skins using visual design tools, such as the tools in Adobe Creative Suite.
In previous versions of Flex, the Flex Style Explorer and the skin templates in the designing Flex 2 skins article were available to help with skinning and styling. With Flex 3 and Creative Suite 3, Adobe has gone one step further: integrating the skinning and styling processes directly into the Adobe design and development tools. Now you can use Flex Builder 3 to visually style versions of built-in components. If you want to create custom skins, you can draw them using the CS3 tools, import the artwork directly into Flex Builder, and tweak fonts and other styles. No more editing CSS by hand!

This article provides an overview of the CS3 extensions and Flex Builder 3 features that automate the skinning and styling workflow. For more detailed descriptions of how to use the features, I’ll provide links to the appropriate documentation along the way.

Requirements

To create styled versions of built-in components:

To create custom component skins:

Styling or skinning?

When you want to customize the appearance of a Flex component, you have two options. One is to tweak the default appearance of the component using styling. Each Flex component has an extensive set of style properties you can set to change its appearance: the roundness of corners, the colors used for fill gradients, the font, color, and size of text, and so on. Figure 1 shows examples of customized looks you can create purely through styling.

Figure 1.Examples of styled Flex buttons. On the left is the default Flex button appearance; the other two are buttons created by setting style properties.

If you want to explore the styling capabilities of the Flex components, jump ahead to Styling Flex components using CSS Design mode.

If you find that you can’t achieve the look that you want purely through styling, or if you just want to draw the appearance rather than tweaking a bunch of knobs, then you can use Adobe design tools to draw graphical skins for your components. Skins allow you to completely customize the appearance of a component. Figure 2 shows the greater flexibility you have when using graphical skins.

Figure 2.Examples of skinned Flex buttons.

To learn more about skinning Flex components, jump ahead to Designing skins using Creative Suite 3.

Styling Flex components using CSS Design mode :

One of the major new features in Flex Builder 3 is the CSS Design mode. In this mode, you can visually edit the CSS styles that apply to a component. This mode has much of the functionality that was in the original Flex Style Explorer, with the advantage that it directly writes the CSS into your project, eliminating the need to copy and paste code around. This section describes how to get started with CSS Design mode.

Styling Flex components using CSS Design mode

One of the major new features in Flex Builder 3 is the CSS Design mode. In this mode, you can visually edit the CSS styles that apply to a component. This mode has much of the functionality that was in the original Flex Style Explorer, with the advantage that it directly writes the CSS into your project, eliminating the need to copy and paste code around. This section describes how to get started with CSS Design mode.

Creating default component styles

Here’s how to create default styles for Flex components. The default style for a component is applied to every instance of that component in the application by default.

  1. Launch Flex Builder 3.
  2. Create a new project using File > New > Flex Project.
  3. In the Project name: field at the top, type StyleTest.
  4. Click Finish. This will open the main application file for your project, StyleTest.mxml.
  5. Create a new CSS file using File > New > CSS File.
  6. Name the file styles.css and click Finish. This will open the new blank CSS file in an editor window.
  7. In the toolbar at the top of the CSS editor, click the Design button.
  8. Click on the New Style button immediately to the right of the Style dropdown in the toolbar.
  9. In the New Style dialog, choose the component you want to style and click OK.
  10. Use the controls in the Flex Properties panel on the right to edit the component’s styles.

Depending on the component you choose, you might see a single example of the component in the design view, or you might see multiple states of the component. For example, a button has several states: its normal (“up”) state, which is what it looks like when the user isn’t interacting with it; its “over” state, which is what it looks like when the mouse is over it, and so on. Different style properties affect different states of the component, so you’ll need to play around to see how they work.

Testing your styles in an application

Once you’ve created styles for a number of different components, you can see how the styles look in a real application. (Note: these instructions assume you’re using the standalone version of Flex Builder 3.)

  1. While still in the CSS design editor, choose File > Save.
  2. Click on the editor tab for StyleTest.mxml (which opened up automatically in step 4 above).
  3. In the code, immediately below the <mx:Application> tag, type: <mx:Style source=”styles.css”/>
  4. Click on the Design button in the toolbar at the top to switch to MXML Design mode. Several new panels appear.
  5. From the Components panel in the lower left, drag the components you styled into the design area and lay them out as you like. The components should look the same as they did when you styled them in the CSS editor.
  6. Choose Run > Run StyleTest. This will run your application in the browser. As you interact with the components you created, the various states of the components should also look like they did in the CSS editor.

Creating multiple styles for one component

You can use the CSS Design mode to create different kinds of styles. In the examples above, you created styles that applied to all instances of the component you were styling. However, you can also create multiple styles for a single component—for example, if you want to have different button styles in the same application. Here’s how:

  1. Go back to the CSS editor for styles.css
  2. Click New Style.
  3. Select “Specific component with style name”.
  4. Choose a component type as before—for example, Button.
  5. In the “Name:” field, type a name—for example, redButton.
  6. Click OK.
  7. Customize the appearance of the button using the Flex Properties panel as before.
  8. Choose File > Save.
  9. Switch back to the editor tab for StyleTest.mxml (which should still be in Design mode).
  10. Drag a button into the design area. Note that it looks like the default Flex button style (or the button style you created the first time around, if you did so)—it doesn’t look like your new redButton yet.
  11. In the Flex Properties panel on the right, choose “redButton” from the “Style:” dropdown. Your button will now look like the redButton you designed.

Creating CSS styles from an application layout

All these examples started from the CSS editor. However, you might want to start by laying out a screen of your application first and tweaking its appearance there, then creating CSS styles after the fact, so you can reuse them in other areas of your application. The Convert to CSS feature in Flex Builder 3 makes this easy.

  1. Create a new Flex Project using File > New > Flex Project.
  2. Name the project MyApp and click Finish. This opens the main application file, MyApp.mxml.
  3. Click the Design button in the toolbar.
  4. Drag a Button from the Components panel into the design area.
  5. Customize the appearance of the button using the Flex Properties panel. Note that the changes you make here only affect this button. If you drag a couple of other buttons into the design area, you’ll see that they have the default Flex appearance.
  6. When you’ve finished customizing the button, click Convert to CSS… in the Flex Properties panel.
  7. A dialog box appears that looks like the New Style dialog box. However, you have an additional option now for generating a CSS file to create the style in
  8. Click New… and enter a name for the CSS file.
  9. Leave the rest of the values unchanged and click OK to create a default style for Button. The CSS editor will open and show the new CSS style that was created from your original button. The new stylesheet is automatically applied to your main application, so you don’t need to add the <mx:Style> tag manually.
  10. Choose File > Save.
  11. Switch back to MyApp.mxml.

Note that the other buttons you dragged out now look the same as the first button. This is because the style you created became the new default style for Button. If you want to create a specific button style that doesn’t apply to every button in your application, just choose “Specific component with style name” in the Convert to CSS dialog as in the previous section and make up a name for your button style. You can then specify which buttons will use that style using the Style dropdown in the Flex Properties panel as before.

This section has only scratched the surface of what you can do with CSS Design mode. I’ll describe more features in the next section, but for more detail on styling components, refer to the documentation on CSS Design mode.

Designing skins using Creative Suite 3

You’ve tweaked every style property you can find, but you just can’t get that scrollbar to look right. What to do? Just draw it! Using the Adobe Creative Suite 3 design tools, you can fully customize the look of the built-in Flex components with ease.

This section doesn’t go into all the details of creating skins with each design tool; I’ll just provide an overview of the process. For a more detailed description, take a look at the documentation on Importing Skins into Flex Builder.

Which design tool should you choose? Here are some tips to help you decide:

  • If you want to create bitmap skins, use Photoshop or Fireworks.
  • If you want to create vector skins with animation between the states of a component—for example, if you want the background of a button to become lighter over 50 ms when you mouse over it—use Flash.
  • If you want to create vector skins, but you don’t need animation, use Illustrator or Flash.

Before you get started, you’ll need to download and install the CS3 Flex skinning extension for your chosen design tool. You can download them from the Adobe website. Follow the instructions there to install the appropriate extension.

If you’re using Flash, you’ll also need to install the Flex Component Kit for Flash CS3.

Creating skins in Photoshop, Illustrator, or Fireworks

For Photoshop, Illustrator, and Fireworks, the skinning extensions provide two new menu items: New Flex Skin and Export Flex Skin. (In Photoshop and Illustrator, they’re in the File > Scripts submenu; in Fireworks, they’re in the Commands > Flex Skinning menu.) The general process for creating a skin in these tools is as follows:

  1. Choose the New Flex Skin menu item. This brings up a dialog box that lets you choose to create skins for all the Flex components at once or just for a specific component.
  2. A skin template appears, either showing all the components, or the specific component you chose in the first step. The template shows the artwork for the default Flex skin for reference, but you can completely erase and redraw this artwork as you like.
  3. The skin artwork is organized differently depending on the tool:
    1. In Photoshop, the skin artwork is organized into layers with names corresponding to various skin parts and states—for example, the Button skin has four layers named Button_upSkin, Button_overSkin, Button_downSkin, and Button_disabledSkin, corresponding to the different states of the button. (The skin layers are in layer groups with the same names—you can ignore these; just edit the actual layers directly.)
    2. In Fireworks, the artwork is organized into named layer folders.
    3. In Illustrator, the artwork is organized into named symbols.
  4. Edit the layers, layer folders, or symbols to draw your new skin artwork.
  5. When you’ve created all your skins, save the file into a folder of your choice.
  6. From the menu, choose Export Flex Skin. For Photoshop and Fireworks, this will create a folder of PNG images; for Illustrator, this will create a single SWF file containing symbols for the skin parts. In all cases, the resulting skin file(s) will be saved in the same directory as the template file you saved in step 4.

Creating skins in Flash

For Flash, the process is a little different. There are no new menu items; instead, the skinning extension installs the skin templates as document templates in Flash. Also, the skins in Flash are structured differently from the other design tools to allow you to create animations between the different states of a component.

  1. Choose File > New and click the Templates tab.
  2. Choose the Flex Skins category. You can choose a specific component, or choose flex_skins to edit all the components at once.
  3. Note that most components are represented by a single symbol (as opposed to multiple symbols or layers as in the other design tools). The different states of each component (for example, the up, over, down, and disabled states of a Button) are represented in the timeline for the symbol. We’ll explore this by editing and animating a Button skin in the next few steps.
  4. Double-click the Button symbol to edit it.
  5. Look at the timeline for the “states” layer. Note that it has frame labels for the different states. Select the frame containing the “up” label.
  6. Select the “art” layer (making sure you’re still in the “up” frame) and draw your artwork for the up state. (Don’t draw into the “states” layer—it’s just a placeholder for the state labels.)
  7. Select the other labeled frames and edit the artwork so it looks right for those states (making sure you’re still editing the “art” layer). Note that if you want to create animations between the different states, you’ll need to copy and paste the artwork you drew in the “up” frame into the other keyframes and modify the pasted artwork.
  8. Take a look at the “transitions” layer in the timeline. Note that frame 10 is labeled “up-over:start”, and frame 11 is labeled “up-over:end”. These labels represent the start and end of the animation that will play when the button goes from its up state to its over state. However, right now they’re right next to each other, and there are no tweens, so no animation will play.
  9. Drag the “up-over:start” frame label to the left and drop it into frame 2. (You’ll now see the label on the timeline.)
  10. Create an animation in the “art” layer between frame 2 and frame 11 using the standard Flash tweening commands.
  11. Do the same with the other frame labels in the “transitions” layer.
  12. Edit the skins of other components as you like.
  13. Save the file into a folder of your choice.
  14. When you’re done, choose File > Publish. This will automatically create a SWC file containing symbols for the skin parts.

Be sure not to change the names of any of the frame labels for the states or transitions—otherwise the skin won’t work properly in Flex.

By default, transitions are automatically reversed when you go from a later state to an earlier state. For example, if the user moves the mouse pointer over the button, then moves it out, the button goes back from its over state to its up state, and Flex plays the up-to-over transition in reverse. If you want to create a different reverse transition for this case, you’ll need to create another animation somewhere else on the timeline, with the frame label “over-up:start” at the beginning and “over-up:end” at the end.

You can do a lot more with Flash and Flex together than I’ve described here–you can even create fully-functional Flex components in Flash. For more information, take a look at the documentation on the Flex Component Kit for Flash CS3.

Technical notes

Here are a few notes to keep in mind as you create skins in the various design tools.

  • You can adjust the 9-slice scaling grids of the skin symbols directly in Illustrator and Flash. Photoshop and Fireworks don’t support 9-slice editing for layers (Fireworks does have 9-slice support, but it isn’t compatible with this skinning workflow), so you’ll need to edit the 9-slice grids in Flex Builder, as described in Editing skin properties in Flex Builder below.
  • In the Photoshop template, each skin part is represented by the contents of a single named layer (e.g. Button_upSkin) inside a layer group of the same name. Due to a technical limitation of the Photoshop export script, adding extra layers to the layer group containing the skin part layer doesn’t automatically include those layers in the skin—only the individual Button_upSkin layer is exported as the button skin. If you need to use multiple layers to build up a skin part, do the following:
    1. Delete the placeholder content inside the layer for the skin part you want to create (e.g. Button_upSkin). Don’t delete the layer, though!
    2. Create the various layers you want to build up for the skin part. You can create these anywhere, but it’s convenient to put them in the layer group containing the skin part.
    3. Create a selection around the multi-layer artwork.
    4. If your artwork uses transparency, hide the background layer.
    5. Choose Edit > Copy Merged.
    6. Select the original skin part layer (Button_upSkin, in this example) and paste in the content.
  • In Illustrator, be sure to use the Export Flex Skin command rather than using the standard SWF export. Due to a technical issue, Flex skins exported from Illustrator need to be in a Flash Player 8-compatible SWF rather than a Flash Player 9 SWF. The Export Flex Skin command takes care of this detail for you.
  • The New Flex Skin dialog lets you create multiple skins for the same component—for example, if you want to create different variations of a Button. For more information on this, see the documentation on Importing Skins into Flex Builder.

Importing skins into Flex Builder

Regardless of the design tool you used to create the skins, the next step is to use Flex Builder to import the skins into a Flex application.

  1. In Flex Builder, open an existing project, or create a new project using File > New Project.
  2. Choose File > Import > Skin Artwork…
  3. Browse to the skin artwork you created.
    1. If you used Photoshop or Fireworks to create your skins, then choose “Folder of images:” and browse to the folder that was created by Export Flex Skin…
    2. If you used Illustrator or Flash to create your skins, then choose “SWC or SWF file:” and browse to the Illustrator SWF or Flash SWC that was created. (If you used Flash, be sure to choose the SWC file that it published, not the SWF file that also gets created during the publish step.)
  4. Make sure your project from step 1 is selected in the project tree.
  5. Click Next. The dialog will show a list of all the symbols or bitmaps in the file or folder you chose. Based on the name of each symbol or bitmap, the dialog will guess which component and state or part it represents. For example, it will assume an image named “Button_upSkin.png” represents the up state of the Button component. If you used the Flex Skin Design Extensions as described here, everything on this page will be automatically set up correctly.
  6. Verify that all the symbols or bitmaps are correctly mapped and click Finish. Flex Builder creates a new CSS file referring to all the skins you imported, and displays the file in CSS Design mode. It also automatically attaches the new CSS file to your main application.

Editing skin properties in Flex Builder

At this point, your Flex project is now using the skins you imported, so if you add components to your main application file, you’ll see the skins you created. However, there are a couple of things you may want to tweak before you do this.

9-slice scaling grids. If you created your artwork in Photoshop or Fireworks, you’ll need to adjust the 9-slice scaling grids on your bitmaps. Here’s how:

  1. Make sure you’re in the CSS Design mode for the skin CSS file created during import. If you’re not, open the skin CSS file and click the Design button in the toolbar.
  2. From the Style dropdown in the toolbar, choose a component for which you want to edit the scale grid.
  3. In the upper-right corner of the CSS Design mode, click the Edit Scale Grid button. The design area switches to show the scale grid overlaid on each skin part you imported for that component.
  4. Drag the dashed lines to adjust the scale grid. Note that the same scale grid is used for all the skin parts for a given component.
  5. When you’re done, click the Edit Scale Grid button again to switch back to the normal view.
  6. Save the file.

Text styles. When editing the skins for components like Button, you may have noticed that the skins didn’t have text in them. Text styles like font, color, and size are set through CSS in Flex, not through the skin.

  1. Make sure you’re in CSS Design mode for the skin CSS file as above.
  2. Decide whether you want to set text styles for all components, or for a specific component.
    • If you want to use one font for your whole application, click the New Style button, choose “All components (global)”, and click OK. Another dialog will appear asking which component you want to preview the global style as (since the global style applies to all components, Flex Builder needs to know which one you want to look at while you’re tweaking its style properties). Choose Label and click OK.
    • If you want to set a font for a specific component, just choose the component from the dropdown.
  3. In the Flex Properties panel on the right, use the controls in the Text section to change the text. You can also tweak some other styles, such as the padding of the label within the control.
  4. Save the file.

Note that you can mix and match global and per-component text styles. For example, if you want all your controls to use Myriad Pro, and you want most controls to use a 10pt size, but a few need to use a 12pt size, create a global style that specifies Myriad Pro 10pt as the font, then select the specific components that need to be different and set them to 12pt.

Other style properties. If you went through the styling section of this article, you might notice that a lot of the style properties that were available to you while styling aren’t shown when you’re editing a skinned component. That’s because these style properties are only tweakable when you use the default skin of the component. When you replace the skin with your own artwork, Flex doesn’t know how to do things like change the corner radius or the background color of the artwork, so those style properties no longer have any effect.

Testing your skins

Once you’ve done all your tweaking, you might want to test your skins out in a real application, so you can see how they respond to different component sizes. Jump back to the section on Testing your styles in an application to see how to do this. (Note that you won’t need to type in the <mx:Style> tag mentioned there, as the skin importer will already have added that tag for you.)

Where to go from here

If you’re ready to dive in and start styling and skinning, take a look at the extensive online documentation on CSS Design mode and Importing Skins into Flex Builder. If you’re a Flash designer/developer interested in creating fully-functional custom components that work in Flex, read the documentation on the Flex Component Kit for Flash CS3.

Advertisements

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s