This document discusses CSS skinning, filters, and effects in Flex-based websites. CSS skinning allows changing the appearance of UI components through CSS stylesheets or MXML tags. Common filters include bevel, blur, drop shadow, glow, and gradient filters, which have customizable properties. Flex offers many built-in effects like blur, fade, and rotate that can be applied to UI components through parallel or sequence effects upon events. Resources for exploring Flex styles and effects are also provided.

1. Building Flash-based websites using Flex
Lesson 3 – CSS Skinning, Filters and Effects
Alex Goh
info@alekkus.com

2. Agenda
● CSS Skinning
● Filters
● Effects

3. CSS Skinning
● Each UI component has a series of CSS style properties that determine its
appearance. (exactly like CSS styling in HTML)
●To change a styling property, either set it in the MXML tag of the UI
component, or use a CSS stylesheet.
Styling within MXML tag CSS stylesheet

4. Filters
● Commonly-used filters:
● Bevel filter
● Blur filter
● Drop shadow filter
● Glow filter
● Gradient bevel filter
● Gradient glow filter
● Specifying filters for a UI component:

5. Filters
● Each type of filters has its own properties/parameters:

6. Effects
● Effects are short animation that occurs on a UI component when certain
event occurs (e.g. when user click on the UI component)
● Flex offers an extensive list of effects:
● Blur effect
● Dissolve effect
● Fade effect
● Glow effect
● Iris effect
● Move effect
● Resize effect
● Rotate effect
● Sequence effect
● Sound effect
● Wipe down, left, right, up effect
● Zoom effect

7. Effects
● More than one effect can be set on a UI component upon an event occurring
by using:
● Parallel effect to execute a set of effects concurrently
● Sequence effect to execute a series of effects in sequence
● To set en effect on a UI component:
● Define a effect element
● Bind it to a effect properties on a UI component

8. Effects
Bind
Bind

9. Resources
● Flex style explorer -
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html
● Flex advanced effects library - http://www.efflex.org/EfflexExplorer.html