Building Flash-based websites using Adobe Flex - Lesson 2/10
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


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



Building Flash-based websites using Flex

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

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



Total Views
Views on SlideShare
Embed Views



1 Embed 7 7



Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NoDerivs LicenseCC Attribution-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

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

  • 1. Building Flash-based websites using Flex Lesson 2 – Flex Essentials Alex Goh
  • 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 - ● 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. 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 - ● Flex examples and source codes -