ADOBE FLEXFOUNDATION TO ADVANCED

ABOUT ME

ABOUT ME

ABOUT ME

Adobe Advisory Board for Flash Builder

Adobe Advisory Board for Flash Catalyst

Adobe Advisory Board for Flex SDK

ABOUT ME

Adobe MAX Award x 2 (2008)

Adobe MAX Award Semifinalist (2009)

Author of Flash Catalyst 2.0 Unleashed(Addison Wesley, 2011)

Flex Programmer since version 1.5 (2004)

ABOUT ME

Twitter @petermoelgaard

Blog blog.petermoelgaard.com

WWW www.petermoelgaard.com

LinkedIn linkedin.com/petermoelgaard

Introduction to this Course4 packed days

Agenda

Start Finish Day 1 Day 2 Day 3 Day 4

9:30 10:15 Introduction to this Course Layouts, Containers and Forms

Graphics, Images and Rich Media Flash Catalyst

10:20 11:05 Introduction to Flex Styles, Themes and Skins Custom Components using MXML

Localization and the ResourceManager

11:10 11:55 Exploring Flash Builder Effects and Filters Custom Components using ActionScript Deeplinking and SEO

13:05 13:50 Creating your first application: Hello World

Debugging and Network Monitoring Flex Libraries and Modules Frameworks and Design

Patterns

14:35 15:10 MXML and Flex SDK Flex and RPC (HTTP and Web Services)

Deploying, FlexAnt and Production Exports

Automated UI and Unit Testing

15:20 16:05 Foundation ActionScript Flex and Remote Data Adobe AIR Flash Player Rendering and Processing

16:15 17:00 Interactivity and Events Flash Builder Plugins Flex Mobile Summary and Conclusion

Flex 3 & Flex 4

Flash Builder 4.x is fully backwards compatible

Flex 3 & Flex lives perfectly Side-By-Side

Flex 3 Components: MX

Flex 4 Components: Spark (S)

Flex 4 is a a giant leap forward, we will se why…

Flex 3 & Flex 4

New and Improved Skinning Architecture

Support for Mobile Android BlackBerry Motorola iOS (Yes ?)

Radically Improved Performance Execution Size

Who are you ?

What is your background ?

Are you a Designer, Developer or Analyst ?

Why are you taking this course ?

What do you expect to get from this course ?

What kind of work are you going to be doing ?

Introduction to Flexbefore we get our hands dirty…

Introduction to RIA’s

Rich Internet Applications (RIA) are 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

> ...)

Introduction to RIA’s

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)

Introduction to RIA’s

Engaging, informative, self-service-oriented RIAs encourage customers to

Stay on your site longer

Explore more options

Complete more online transactions

Spend more money

Recommend the site to others

Return more often

Introduction to RIA’s

Well-designed customer-facing RIAs can

Increase online sales up to 30%*

Increase conversions, cross-channel sales, and upsells by up to 40%*

Reduce contact center / telephone agent calls up to 20% annually*

* Forrester: “The Business Case for Rich Internet Applications” (Ron Rogowski, March 12, 2007)

Introduction to RIA’s

“…even modest improvements in online customer experiences can boost revenue gains by $117 million to $311 million per year -- due to additional purchases, reluctance to switch, and likelihood of recommending to colleagues and friends.”

Forrester “Customer Experience Boosts Revenue” by Bruce D. Temkin, June 22, 2009

First Things First - What Is Flex ?

Flex is an open source software development toolkit for building Rich Internet Applications (RIAs) on the Flash Platform.

To build a Flex application, you write object-oriented code using ActionScript 3, MXML and CSS languages.

The Flex SDK includes a compiler, debugger, profiler and hundreds of ready-to-user components and ActionScript classes that accelerate development.

First Things First - What Is Flex ?

To help us rapidly develop applications and content using the Flex framework, Adobe offers an Eclipse based IDE.

Adobe Flash BuilderIt includes support for intelligent coding,debugging, visual design as well aspowerful testing and monitoring tools.

Alternative IDEsFDT, FlourineFX, FlashDevelop,Amethyst, FlexBean, etc.

How Does Flex Work ?

Flex source code is first compiled into ActionScript classes and then eventually Flash bytecode, which is executed at the client side by the ActionScript Virtual Machine in Adobe Flash Player or Adobe AIR.

Flash Flex

ActionScript

Flash Platform

What Can You Do With Flex ?

You can use Flex to build anything from multimedia-rich consumer experiences to functional line-of-business applications that run behind the firewall.

You can use Flex to deliver an entire application experience, or you can embed Flex-based components and widgets within existing HTML websites.

You can use Adobe AIR to run an enhanced, standalone version of your application across Windows, MAC OS X, Linux and Android operating systems.

You can use Flex Mobile to run versions of your app targeted at specific devices directly on the devices.

NASDAQ

Challenge Manage and deliver trading data in relevant,

interactive ways Give users instant insight into extremely detailed

trading activity in the market at any time during the day

Solution: Market Replay RIA Adobe AIR Adobe Flex Amazon S3

Results Delivers valuable data analysis at a lower cost to

everyone involved Enables investors and brokers to replay market

events and review historical data in simulated real-time

“There’s no doubt that working in Adobe AIR is a huge benefit. The ability to process trading data on the desktop enables NASDAQ to deliver valuable data analysis at a lower cost to everyone involved.”

Randall Hopkins Vice president, NASDAQ Market Data

Enabling stock market participants to replay, understand, and explain market events at any point in time

SAP

Challenge Accelerate new product innovation and user

adoption of Business Intelligence (BI) tools through dynamic, impactful user experiences

Solution: Xcelsius software Adobe AIR Adobe Flash Builder Adobe LiveCycle Data Services ES

Results Accelerated product development from years

to months Improved BI analysis Drove increased adoption of BI solutions across

enterprises

Transforming business data into rich, interactive dashboards and data presentations– without programming

“With BI tools based on the Flash Platform, business users can quickly access and analyze enterprise data to better understand the business without assistance from IT or business analysts.”

James ThomasVice President of Product Marketing, SAP

BusinessObjects

FedEx

Challenge Improve customer access to shipment

tracking information, online as well as on the desktop

Solution Adobe AIR Adobe Flex

Results Delivered consistent customer experience

online and offline Enabled easy-to-use, always on, branded

tracking method Increased development productivity by

almost 50%

Connecting customers to shipment tracking information online and offline

“… individual shippers, consignees, and small businesses will benefit most from the new, easy-to-use Adobe AIR application because they will have immediate access to critical information about their shipping and supply chain activities.”

Aitza Anderson, product manager, FedEx

The Adobe FlexEcosystem

Flex

ColdFusion

Flash Media Server Family

Flash PlatformServices

AIR

Flash Player

Flash Builder

FlashCatalyst

FlashProfessional

Creative Suite Analytics &Optimization

TOOLS FRAMEWORK CLIENTSSERVICESSERVERS

LiveCycle

The Flex Ecosystem

The Flex Ecosystem

Adobe Flash Platform Is an entire family of technologies you can use to create,

run and provide data to RIAs, including client runtimes, tools, frameworks, servers and cloud services.

Flash Platform Runtimes At the center of the Flash Platform are the client runtimes.

Adobe Flash Player for the browser and Adobe AIR for outside the browser.

The Flash Player is the world’s most pervasive software

98%of Internet-connected PCs worldwide have Flash Player installed

of top 20 smart phones will support Flash Player this year

develop using the Flash Platform

3.5 millionof Alexa 100 top websites use Flash Player

85%

of web games are delivered using Flash Player

70%

95%

98%penetration rate in enterprises - Forrester

of enterprise professionals will seek Flash Platform development skills in 2011 (Society of Digital Agencies)

75%

The Flex Ecosystem

Adobe Flash Player Adobe Flash Player is a browser plugin or Active-X control

with a rich object model and rendering engine that allows developers to include highly expressive and interactive content in web-applications

To include this richer content, you create a SWF file using Developer tools and then reference this SWF file in your HTML page.

When the browser parses the HTML page, the flash player downloads the SWF file and runs in the browser.

The Flex Ecosystem

Adobe AIR Is a cross-operating-system runtime and set of tools that

allow developers to deploy HTML, Ajax, and Flash Platform applications (SWF files) to the desktop.

An emerging design pattern is to deliver a browser-based version for all users and a desktop version for the more active or power users-

Companies use Adobe AIR to deliver RIAs outside the browser

AIR runtime installations

AIR SDK installations

Installations of Adobe AIR within one year of release

300 million2.5 million1 million

Applications in the Adobe AIR Marketplace

840

The Flex Ecosystem

Flash Platform Tools Adobe Flash Builder (FB)

Is an Eclipse-based development tool targeted at developers. With this IDE you use the Flex framework to create SWF files.

Adobe Flash Catalyst (FC)Is a new interaction design tool for rapidly creating expressive interfaces and interactive content without writing code.

Adobe Flash Professional (FL)Is the industry standard for interactive authoring.

3.5 million developers

CAIRNGORM

ADOBE OPEN SOURCE (opensource.adobe.com)

Frameworks

Performance and load testing

Tooling plug-ins

Pre-built components

Product extensions, functions and code

1,000+ global and regional system integrators, ISVs, and VARs

52 Adobe Agency Partners, including the top digital agencies

250+ training partners

More than 70 Open Screen Project members

337 User Groups worldwide

PARTNERS PROGRAMSTECHNOLOGIES COMMUNITIES

150+ supporting technologies to help in application and project development

The Flex Ecosystem

Flash Platform Languages ActionScript

Is an inheritance-based object-oriented scripting language based on the ECMAscript standard. The syntax and features are very similar to Java.

MXMLIs a convenience language, it provides an alternate way to generate ActionScript using a declarative tag-based XML syntax. When you compile an application, the MXML is parsed and converted to ActionScript.

Flex integrates with

Browsers

RESOURCE TIEREIS Databases Directories

ECM Repository

MessageQueues

SAP…

DESIGN &DEVELOPMENTTOOLS

HTTP/S, Sockets, AMF, RTMP,SOAP, WS*, SMTP, REST, …

Flash Catalyst

FlashProfessional

Flash Builder

Creative Suite

3rd PartyServices

SERVICES TIER

CLIENT APPLICATION TIER

AIRFlash Player

Flex Framework

Flash PlatformServices

Flash Media Server Family

LiveCycle

The Flex Ecosystem

Flash Platform ServicesA set of hosted and managed services. Collaboration Service

Real-time collaboration service featuring chat, audio, video and simple data.

Distribution Servicefor distributing, promoting, tracking, and monetizing applications on e.g. social networks, mobile devices and desktops.

Social Servicefor integrating with multiple social networks including Facebook, MySpace, Twitter, Yahoo, Google, AOL and many more…

Flash and HTML5

Adobe actually supports HTML The Flash Platform has integrated with HTML for 14 years. AIR 2.0 (desktop) includes support for HTML5.

Adobe is committed to supporting HTML5 The Flash Platform delivers cross-platform, cross-browser,

cross-device consistency. HTML5 implementations will differ and hinder content

adoption of rich features, including video tag support. No consistency in codec support for video is yet visible.