Creating skins in Adobe Illustrator CS3 for Flex

Posted on October 26, 2010 | Comments Off on Creating skins in Adobe Illustrator CS3 for Flex

Adobe Illustrator lets you create vector artwork for Flex skins. Some features of Illustrator are not supported when
you export skins to a SWF file. For example, blend modes and effects, including drop shadows, may not display
correctly. If you want to use these or other advanced Illustrator features, first test them with a single skin.

Install the Flex skins for Illustrator CS3
1 Download the Flex skins and extensions for Illustrator CS3 from http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins
2 Double-click the downloaded .zip file and extract its contents to a temporary directory.
3 In the temporary directory, navigate to the FlexSkinning/Scripts directory.
4 Copy the Flex Skin directory to Illustrator_install_dir/Presets/Scripts, where Illustrator_install_dir is the installation
directory of Illustrator CS3.
5 In the temporary directory, navigate to the Templates directory.
6 Copy the FlexSkins directory to Illustrator_install_dir/Cool Extras/Templates.
Create a skin in Illustrator CS3
1 Start Illustrator.
2 Set grid and snap preferences.
Your skins look best in Flex if all items are “on-pixel”, meaning their x, y, width and height values are integers,
with no fractional part, and you set snap to a one-pixel grid. All symbol instances in the skin template are already
placed on-pixel.
a Choose Edit > Preferences > Guides and Grid.
b Under Grid, change Gridline every: to 10 px, and Subdivisions to 10.
c make sure that the View > Snap to Grid option has been selected.
3 Select File -> Scripts -> Flex Skin -> Create Flex Skin.
4 In the New Flex Skin dialog box, choose Multiple Flex Components to edit all Flex skins, or choose a specific
component to skin. If you choose Multiple Flex Components, Illustrator opens a file containing all of the Flex skins.
5 Modify the skins as necessary.
a Double-click the skin part to edit it in place. (You can also find and open the symbol from the Symbols
palette.)
b Modify the existing skin, or delete it and draw your own.
c Some symbols have a 9-slice scaling grid, represented by dotted lines crisscrossing the symbol. If the shape
of your artwork is substantially different from the original artwork, for example your corners are more rounded
or you made the skin part larger, then drag the dotted lines to specify which parts should be scaled in which
directions.
Note: Flex expects Buy Amoxil each skin symbol to have its registration point set at its upper left corner. All of the symbols in the
skin template are preset with the correct registration point; if you create new skins, make sure to set “Flash Registration”
to the upper left corner in the New Symbol or Symbol Properties dialog.
6 Save the .ai file
7 Select File -> Scripts -> Flex Skin -> Export Flex Skin and specify the name of a SWF file name to hold your
custom skins.

• Tweet

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.

Comments