Building Flash-based websites using Flex Lesson 2 – Flex Essentials by Alex goh, associate trainer @ LAB School ( http://lab.edu.sg/ ), Adobe Authorized Training Centre, Singapore

1. Building Flash-based websites using Flex
Lesson 2 – Flex Essentials
Alex Goh
info@alekkus.com

2. Agenda
● Adobe Flex Builder
● Flex Programming
● UI Components
● Customising UI Component
● Skinning using CSS

3. Adobe Flex Builder
● Adobe's development tool for developing Flex applications
● Retail price - US$249
● 60 days trial - http://www.adobe.com/products/flex/
● Free to student - https://freeriatools.adobe.com/flex/
● Free to unemployed developers - https://freeriatools.adobe.com/learnflex/
● Alternatively, any text editor can be used to do coding; compile to SWF using
the Adobe's Flex compiler (free)

4. Adobe Flex Builder – Design mode
Project file navigator Design area Component Properties
Drawing components

5. Adobe Flex Builder – Source mode
Project file navigator Source codes edit area

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. Common Flex UI Components - Controls
Label: Datagrid:
TextInput:
TextArea:
ComboBox:
CheckBox:
RadioBox: DateChooser:
Button:
ColorPicker:
DateField:
Hslider:
Image:

8. Common Flex UI Components – Layout and Navigators
Canvas: TabNavigator:
HBox:
Accordion:
VBox:
Tile:

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. 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. Data Binding
● Ensure a property or variable always get the latest value of another property
or variable
● e.g.

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. Official Adobe Flex Documentation
● A MUST-HAVE when developing Flex application
● Launch from Flex Builder, Help > Help contents, or Shift + F2.

14. Resources
● Flex component explorer - http://www.adobe.com/devnet/flex/tourdeflex/
● Flex examples and source codes - http://blog.flexexamples.com/