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


Published on

Building Flash-based websites using Flex
Lesson 2 – Flex Essentials

by Alex goh, associate trainer @ LAB School ( ), Adobe Authorized Training Centre, Singapore

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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

  1. 1. Building Flash-based websites using Flex Lesson 2 – Flex Essentials Alex Goh
  2. 2. Agenda ● Adobe Flex Builder ● Flex Programming ● UI Components ● Customising UI Component ● Skinning using CSS
  3. 3. Adobe Flex Builder ● Adobe's development tool for developing Flex applications ● Retail price - US$249 ● 60 days trial - ● Free to student - ● Free to unemployed developers - ● Alternatively, any text editor can be used to do coding; compile to SWF using the Adobe's Flex compiler (free)
  4. 4. Adobe Flex Builder – Design mode Project file navigator Design area Component Properties Drawing components
  5. 5. Adobe Flex Builder – Source mode Project file navigator Source codes edit area
  6. 6. Flex Programming Design mode Source mode ● Flex programming uses a mixture of MXML and Actionscript 3 codes. ● MXML, like HTML, is mainly to draw the user interface components. ● Actionscript, like Javascript, allows more complex user interactions or application behaviour. ● Note that there's always an equivalent Actionscript code for all MXML code, but not vice versa.
  7. 7. Common Flex UI Components - Controls Label: Datagrid: TextInput: TextArea: ComboBox: CheckBox: RadioBox: DateChooser: Button: ColorPicker: DateField: Hslider: Image:
  8. 8. Common Flex UI Components – Layout and Navigators Canvas: TabNavigator: HBox: Accordion: VBox: Tile:
  9. 9. Customising Flex UI Components ● Flex provides many basic UI components to get you started. Once you are profiicent, you can make your own UI components or customise the existing ones.
  10. 10. Skinning UI Components using CSS ● Customising UI components requires in-depth knowledge of Actionscript. ● For newcomers, use CSS to change the appearance of UI components.
  11. 11. Data Binding ● Ensure a property or variable always get the latest value of another property or variable ● e.g.
  12. 12. Image Component ●Flex Image component accept the following file formats: JPG, GIF, PNG, SWF (for vector) ● Image can be load at runtime or embed into the SWF file ● Load image at runtime ● Embed into SWF file – No need to wait for image to load, but SWF file size increases
  13. 13. Official Adobe Flex Documentation ● A MUST-HAVE when developing Flex application ● Launch from Flex Builder, Help > Help contents, or Shift + F2.
  14. 14. Resources ● Flex component explorer - ● Flex examples and source codes -