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

1. Building Flash-based websites using Flex
Lesson 1 – Introduction to Rich Internet Application
Alex Goh
info@alekkus.com

2. Agenda
● Introduction to RIA
● Flex and Flash
● AIR
● Benefits of using flex
● Downside of Flex
● Showcases of Flex applications
● Resources

3. Introduction to Rich Internet Application (RIA)
● Desktop-like applications running in the browser.
● Overcome many limitations of traditional web technologies:
● Stateless architecture
● User interaction is mostly point-and-click
● Non-responsive (click > load > wait > click > load > wait > ...)
Fat server thin client architecture
HTML
Server-side
HTML Database
scripting
HTML
Fat client thin server architecture
Server-side
RIA scripting Database

4. Introduction to Rich Internet Application (RIA)
● RIA benefits:
● Rich user experience, like desktop applications
● No cumbersome installations, or upgrades
● Single point management, leading to the concept of Software as a Service
(SaaS)
● The down side:
● Longer initial loading time (can be optimized by module decomposition)
● May not be very SEO friendly (Adobe is working with Google and Yahoo to
solve this problem)

5. Flex and Flash
● A framework sitting on the Flash platform
Flash Flex Framework
Actionscript
.swf .swf
Flash Platform

6. Adobe Integrated Runtime (AIR)
● A Flex or Flash application is usually a web application
● Web application which runs within the browser is subjected to many inherent
browser limitations:
● Inaccessible to file systems (restricted file uploads/downloads)
● Cannot access system resources (memory allocation, taskbar ...etc)
● No off-line support
● AIR is simply a wrapper around a Flex or Flash application so that it can be
installed on a computer.
● e.g. Kiosks at Singtel, Starhub shops.
TweetDeck (Twitter client)

7. Benefits of Using Flex
● Fast application development, rich user experience.
● Cross-browser compatibility – IE, Firefix, Safari, Opera, Chrome
● Cross-OS compatibility – Windows, Mac, Linux
● Large immediate audience (>97% of all computers have Flash player
installed)
● Master Flex programming, and you can development application for:
● Web
● Desktop, Kiosks (AIR)
● Mobile (Flash Lite)
● TV (Flash TV on the way)

8. Downside of Flex
● Requires Flash player, some companies ban Flash player on all internal
computers.
● Myth: Each page within a Flash site does not have a unique URL.
● Myth: Search engines cannot crawl Flash content.
● Myth: Flash sites are too bloated, takes too long to load.

9. Showcases
https://www.singtelshop.com/#

10. Showcases
http://www.volkswagen.co.uk/used/search

11. Showcases
http://promos.airnz.co.nz/howfar/

12. Showcases
https://www.photoshop.com/
https://www.photoshop.com/

13. Showcases
https://buzzword.acrobat.com/

14. Showcases
http://www.sonyericsson.com/cws/products/mobilephones?lc=en&cc=sg

15. Showcases
http://www.picnik.com

16. Showcases
http://www.hobnox.com/index.1056.de.html

17. Resources
● Official documentation - http://livedocs.adobe.com/flex/3/langref/ (also accessible from
Flex builder)
● Adobe Flex DevNet - http://www.adobe.com/devnet/flex/
● Singapore Adobe Flex User Group - http://fug.sg