Foundation Flex for Designers excerpt: Flex with Photoshop and Illustrator
Created
7 July 2008
Requirements
Prerequisite knowledge
Some knowledge of Flex, Photoshop, and Illustrator.
User Level
Intermediate
Required products
- Flex Builder (Download trial)
- Illustrator (Download trial)
- Photoshop (Download trial)
Sample files
- flex_photoshop_illustrator.zip (1583 KB)
Additional Requirements
Read the complete chapter
- Chapter 5: Flex with Photoshop and Illustrator (PDF, 983K)
We have looked at using CSS to control the visual look of your applications. Using CSS is the most effective and quickest way to have an impact, and there are many changes you can make through CSS. But there will always come a point where you want a more dramatic change—a point where you want to control not just the color and rounding of a button but also its shape and texture.
That is where skinning comes in. In a nutshell, skinning within Flex involves replacing the look of a component with an image. The idea is simple, but to execute it effectively often takes quite a bit of tweaking as each component is created by a series of smaller pieces or a representation for each state. The results can be very compelling, allowing you to create a distinct visual for your application.
This chapter covers the following topics:
- Building skins in Photoshop
- Connecting Photoshop skins
- Scale 9
- Using the CSS Design view
- Skinning Flex components in Illustrator using SWF files
- Importing the Illustrator skins into Flex Builder
More Like This
- Localization in Flex – Part 2: Loading resources at runtime
- Creating drawing shapes for Top Drawer with ActionScript 3.0 – Part 2
- Creating drawing shapes for Top Drawer with ActionScript 3.0 – Part 1
- Creating drawing shapes for Top Drawer with ActionScript 3.0 – Part 3
- Localization in Flex – Part 1: Compiling resources into an application
- Flex 3 in Action book excerpt: Introduction to pop-ups
- Using Flex styles
- Defining and using new skin parts in a Spark skin
- Effects in Adobe Flex 4 – Part 2: Advanced graphical effects
- Effects in Adobe Flex 4 – Part 1: Basic effects
