Import skins into Flex Builder
Posted on October 26, 2010 by Sameera Thilakasiri
1 Start Flex Builder.
2 Select the project that uses your custom skins.
3 Select File > Import > Skin Artwork to open the Import Skin Artwork dialog box.
4 Under Import skins from, select Folder or bitmaps.
5 Browse to the directory that contains your skins as .png files.
6 When you select the assets directory, Flex Builder automatically creates a CSS file with the same name as the
directory that contains the .png files. You can rename this file by entering a different file name in the Create skin style
rules in field.
7 Select Next to open the Import Skin Artwork dialog box.
8 Choose the Flex components that you want to skin.
Remember that skins use the following naming convention Style_Selector_Part. By default, Flex Builder
assigns skins to components based on the skin names. You can optionally use Style Selector and Skin Part in the
Import Skin Artwork dialog box to explicitly assign a skin to a component. For more information on skin names,
see “Naming skin assets” on page 3.
9 Select Finish. Flex Builder adds the SWF and CSS files where do you buy viagra | buy cialis phentermine | cheap levitra online to your project, and adds an
application file. You can edit the CSS file as necessary for your application.
10 Save, then run your application to see your custom skins, or view them in Design View in Flex Builder.
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.
Creating skins in Adobe Fireworks CS3 for Flex
Posted on October 26, 2010 by Sameera Thilakasiri
If you’re using Fireworks to create Flex component skins, you’ll be creating bitmap graphics instead of vector
graphics. When using bitmap graphics for skinning, there are a few issues you should be aware of:
• Gradients in bitmaps only scale well in one direction. If you need to create artwork with gradients, and they
might need to stretch in both directions, you might consider using Flash or Illustrator instead.
• Photoshop does not currently support for 9-slice scaling grids.
• Fireworks outputs bitmap graphics for each skin as a .png file, rather than a single file containing all the skins.
• You might not want to skin the application background as a bitmap, since it’s likely to need to scale in both directions.
Install the Flex skins for Fireworks CS3
1 Download the Flex skins and extensions for Fireworks CS3 from http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins
2 Double-click the downloaded .mxp file to install the necessary files in Fireworks CS3.
Create a skin in Fireworks CS3
1 Start Fireworks.
2 Select Commands > Flex Skinning > New Flex Skin.
3 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, Fireworks opens a file containing all of the Flex skins.
4 Modify the skins as necessary.
Notice that this template doesn’t use frames to represent the different states of an individual component; all skins
are shown in a single frame.
a Select the layer for the skin part you want to edit.
Adobe suggests turning on Single Layer Editing from the Layers panel context menu and then looking
through the Layers panel to find the appropriate part to edit. Alternatively, you can leave Single Layer Editing
off cheap amoxil online and just click on an item on the canvas, but make sure that any items you create are in the correct layer.
b Delete the existing artwork and create your own artwork in that layer. You can create multiple objects if you
like; they’ll get flattened into a single bitmap graphic on export.
5 Save the .png file.
6 Hide the Web Layer layer, _Information layer, and _BASE layer. There is no harm in exporting them, but they
produce extraneous files.
7 Select Commands > Flex Skinning > Export Flex Skin and specify an output folder. The export operation writes
one .png file for each skin to the specified directory.
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.
Creating skins in Adobe Photoshop CS3 for Flex
Posted on October 26, 2010 by Sameera Thilakasiri
If you’re using Adobe Photoshop to create Flex skins, you create bitmap graphics instead of vector graphics. When
using bitmap graphics for skinning, there are a few issues you should be aware of:
• Gradients in bitmaps only scale well in one direction. If you need to create artwork with gradients, and they
might need to stretch in both directions, you might consider using Flash or Illustrator instead.
• Make sure that your custom skins use a single layer.
• Photoshop does not currently support for 9-slice scaling grids.
• Photoshop outputs individual .png files for each skin, rather than a single file containing all the skins.
• Some features of Illustrator are not supported when exporting to SWF. 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 buy cialis tadalafil Flex skins for Photoshop CS3
1 Download the Flex skins and extensions for Photoshop 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 Copy the directory Presets/Flex Skins into Photoshop_install_dir/Presets.
4 Copy the contents of the Presets/Scripts directory into Photoshop_install_dir/Presets/Scripts
Create a skin in Photoshop CS3
1 Start Photoshop.
2 Select File -> Scripts -> New Flex Skin.
3 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, Photoshop opens a file containing all of the Flex skins.
4 Modify the skins as necessary.
a Select the layer for the skin you want to edit.
The editable layer for a skin is contained within a layer group. In some cases, there are several levels of nested
layer groups.
You can select the levaquin 750 mg editable layer for a skin in one of two ways:
• Select the Move tool and then go to the Tool Options bar at the top of the screen, check Auto Select Layer,
and clear Auto Select Groups. Now, on the canvas, click on the skin you want to edit and the relevant layer
is automatically selected.
• In the Layers palette, find the layer group for the skin. Expand the layer group and select the editable
layer.
b Edit the selected layer.
Note: When editing a skin in the template, you cannot add extra layers for the skin. Only the named layer for the
Flex skin, as provided by the template, is exported. If you want to create a skin using multiple layers, you must merge
the layers and copy the merged content into the original named layer before exporting.
c Make sure that the rest of the layer outside of your skin remains transparent. Flex assumes that any nontransparent
parts of the layer are part of your skin.
5 Hide the layer named _HIDE BEFORE EXPORTING, and hide the _Information layer if it exists.
6 Save the .psd file.
7 Select File -> Scripts -> Export Flex Skin and specify an output folder. The export operation creates a directory
named assets that contains one .png file for each skin.
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.
Creating skins in Adobe Illustrator CS3 for Flex
Posted on October 26, 2010 by Sameera Thilakasiri
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.
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.
Creating skins in Adobe Flash CS3 for Flex
Posted on October 26, 2010 by Sameera Thilakasiri
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.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.