Creating skins in Adobe Flash CS3 for Flex
Posted on October 26, 2010 | Comments Off on Creating skins in Adobe Flash CS3 for Flex
You can use Flash CS3 to create vector graphics for Flex skins. Before you can create Flex skins in Flash CS3, you
must install the Flex Component Kit for Flash CS3. The Flex Component Kit installs the SWC file that contains the
classes necessary to create assets compatible with Flex.
Install the Flex Component Kit for Flash CS3
Download the from http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins
About Flex skin templates
The Flex Skin Design Extension for Flash CS3 contains skinning templates that allow you to easily create, edit, and
export skins. The following procedure shows you how to create Flex skins in Flash for a Button component. The
procedure for creating Flex skins for other Flex components is similar to the procedure for the Button component.
Create a Button skin from the Flex skin Button template
1 Launch Flash CS3.
2 Select File > New.
3 Select the Templates tab in the New Document dialog box.
4 Double-click Button in the list of template categories.
Note: You could also select flex_skins to open the complete set of Flex skinning templates, and select the Button
skinning template from within the complete set.
5 Double-click the Button skin in the template to edit the skin in place.
The Button skin contains three layers on the timeline:
• States Defines the frames on the timeline corresponding to each state of the component.
• Transitions Defines portions of the timeline that animate between states of the component.
• Art Contains artwork for each state of the component. Use this layer to draw the customized art for your
component skins.
6 Draw the artwork for each state of the component:
a In the Art layer select the keyframe for the Up state of the component.
b Modify the existing artwork for the Up state of the component. Typically, you delete the existing artwork and
create your own.
c Copy the artwork from the Up state and paste it into each of the other states of the component. Modify the
artwork for each state.
Note: When editing a symbol, make sure that you are aware of the registration point (the + sign in the upper-left
corner of the symbol). Flex always aligns the registration point with the upper-left corner of the component.
Therefore, make sure your skin’s upper-left point is at the + sign, except for scrollbar thumbs, which need to be offset
one pixel to the right.
7 If the shape of your custom skin is substantially different from the original skin (for example, your corners are
more rounded or you made the skin larger) you might have to edit the 9-slice scaling grid.
a Right-click on the skin on the Stage and choose Edit. This opens a view that shows just the symbol you
selected.
• If you do not see dashed lines, then the symbol does not use a 9-slice scaling grid.
• If you see dashed lines, they represent the 9-slice scaling grid. Drag the lines to specify how the skin
should be scaled in each direction. For example, if you have rounded corners, make how do i buy viagra online sure that they are fully
contained in the corner quadrants of the 9-slice scaling grid.
b When you’re done adjusting the 9-slice scaling, click on the back button in the upper-left corner of the
document window to return to the main Stage.
8 (Optional) Create animations for each state of the component.
a For each state of the component, the last two frames in the Transitions layer for that state have labels that
indicate the beginning brand viagra and end of an animation.
• up-over:start
• up-over:end
b In the Up state of the Button component, select the up-over:start frame in the Transitions layer and drag it
to frame 2. The label is now visible on the timeline.
c In the Art layer for the Up state, create the artwork for the Up state animation and define keyframes and
tweens as needed.
d Repeat the procedure for the other states of the Button component.
Note: Do not change the name of any labels in the Flex skinning template. If you change the name of a label, the
skins will not work properly in Flex.
9 Save your skins as a .fla file.
10 Select File > Publish to publish your skin as a SWC file in the same directory as the .fla file.
Create a new skin in Flash CS3
If you install the Flex Component Kit for Flash CS3, you can create new skins in Flash CS3. The basic workflow is as
follows:
1 In Flash CS3, select File > New to open the New Document dialog box.
2 Select Flash File (ActionScript 3.0) as the file type.
3 Create the skin.
4 Select the skin in the Library panel.
5 Select Command > Convert Symbol to Flex Component.
6 Save the .fla file
7 Select File > Publish to publish your skin as a SWC file in the same directory as the .fla file.
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Sameera at LinkedIn
