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

Like this? Share it with your network

Share

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

on

  • 1,982 views

Building Flash-based websites using Flex

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

Statistics

Views

Total Views
1,982
Views on SlideShare
1,975
Embed Views
7

Actions

Likes
0
Downloads
27
Comments
0

1 Embed 7

http://lab.edu.sg 7

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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 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/