Building Flash-based websites using Flex

Lesson 3 – CSS Skinning, Filters and Effects




                   Alex Goh
   ...
Agenda

●   CSS Skinning

●   Filters

●   Effects
CSS Skinning

● Each UI component has a series of CSS style properties that determine its
appearance. (exactly like CSS st...
Filters

●   Commonly-used filters:

    ●   Bevel filter
    ●   Blur filter
    ●   Drop shadow filter
    ●   Glow filt...
Filters

●   Each type of filters has its own properties/parameters:
Effects

● Effects are short animation that occurs on a UI component when certain
event occurs (e.g. when user click on th...
Effects

● More than one effect can be set on a UI component upon an event occurring
by using:

    ●   Parallel effect to...
Effects




          Bind


                 Bind
Resources


● Flex style explorer -
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

●   ...
Upcoming SlideShare
Loading in …5
×

Building Flash-based websites using Adobe Flex - Lesson 3/10

1,459 views

Published on

Building Flash-based websites using Flex
Lesson 3 – Introduction to Rich Internet Application

by Alex goh, associate trainer @ LAB School ( http://lab.edu.sg/ ), Adobe Authorized Training Centre, Singapore

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,459
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Building Flash-based websites using Adobe Flex - Lesson 3/10

  1. 1. Building Flash-based websites using Flex Lesson 3 – CSS Skinning, Filters and Effects Alex Goh info@alekkus.com
  2. 2. Agenda ● CSS Skinning ● Filters ● Effects
  3. 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. 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. 5. Filters ● Each type of filters has its own properties/parameters:
  6. 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. 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. 8. Effects Bind Bind
  9. 9. Resources ● Flex style explorer - http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html ● Flex advanced effects library - http://www.efflex.org/EfflexExplorer.html

×