Flash and Flex in an HTML5 / App Store World

Flash and Flex in an HTML5 / App Store world

Tuesday, October 4, 11

RJ Owen
Experience Planner
EffectiveUI
@rjowen
Tweeting this session?
rj.owen@effectiveui.com Use the hashtag: #effectiveui

© 2011 EffectiveUI, Inc.


.flickr.com/photos/mobilestreetlife/4179063482/

Where is Flash going?



Where has Flash been?
Where has Flex been?



Macromedia Flex 1-1.5 (2004, 2005)
• Server-side technology
• Rich component set for Flash
• MXML / AS compiled to SWF on the
server using a J2EE server
• $15,000 per CPU (wikipedia)
???
• Flex Data Services required

Product Goal:
Get Flash into Business



Macromedia Flex 1-1.5 (2004, 2005)
• Server-side technology
• Rich component set for Flash
• MXML / AS compiled to SWF on the
server using a J2EE server
• $15,000 per CPU (wikipedia)
• Flex Data Services required

Product Goal:
Get Flash into Business



Adobe Flex 2 (2006)

• AS3
• Eclipsed-based Flex Builder
• Client-side compiling
• Free compiler
• Charting
• Flex Data Services 2

Product Goal:
Get Flash to Developers
Increase adoption in businesses



Adobe Flex 3-3.5 (2008, 2009)

• Open Source
• Integration with CS product line
• AIR
• Profiling and refactoring in Builder

Product Goal:
Increase Adoption, Community
Make Flex Builder a “real” product



Adobe Flex 4 (2010)

• “Design in Mind”
• Spark
• Catalyst Integration
• FlexUnit integration
• Improved profiler
• Network monitor
• TLF

Product Goal:
Improve UX
Improve Enterprise tooling



Adobe Flex 4.5 (2011)

• Multi-Screen (Mobile!)
• Builder enhancements to support
enterprise, templating, etc.
• More Spark
• Spoon.as

Product Goal:
Mobile app development
Improve Enterprise development



1 1.5 2 3 3.5 4 4.5

Enterprise
Developers

AIR
Design
Mobile



Flex’s current trajectory: reverse-
engineering the business plan
Provide the tools required for
enterprise-level workflows
Marketed to Developers
To solve a wide array of problems
With good results



Flex’s current trajectory: reverse-
engineering the business plan
Provide the tools required for Enterprise
enterprise-level workflows
Marketed to Developers Developers
To solve a wide array of problems Ubiquity
With good results Design



2 11

Vector
Animation Multimedia
Apps
Multi-touch
Mobile
3D



1997 - 1999 Flash for animations on the web!

2000 - 2008 Flash for interactive sites & multi-media
on lots of things, but mostly the web!

2008-2010 Flash-based RIA applications for
desktop and web, plus everything
from before

2010 Flash-based mobile apps and
everything from before

2011 and Flash-based 3D games, native
beyond devices, and not everything from
before.


So that Adobe can sell......
Creative Suite
part of $2Billion creative solutions
revenue 2010, 54% of total revenue
(#1 source)
LiveCycle
part of $355M in Digital Enterprise
Solutions revenue 2010, 9% of total
revenue (#3 source)
source: adobe.com/aboutadobe/invrelations/ﬁnancialdocs.html


Where will this take Flex and the Flash
Platform in a post-HTML5 / post-
Native App world?



I put this question to the Quora
community:
“What are the best reasons to learn Flash in an HTML5
web and native app world?”
Answers:
Consistent Experience (browser issues)
Get to market quicker
Single technology to focus on
Faster ROI
Core OOP education
and more.



That’s a great start. Here’s what I think.

Flash is and will continue to be valuable
for....



1. Enterprise


Enterprise Requirements
Client-Server integration
OO languages
Developer toolsets
Mature languages
Code generation
Best-practices
Bigger logos



Java :: Enterprise Back-End
Flex :: Enterprise Front-End



2. Multi-Screen Development


Same content, multiple screens
iOS, BlackBerry, Android, WP7, and counting....



Approaches to multi-screen:
Web-only
Multiple native applications
(avoid multi-screen ubiquity altogether)
HTML5 app cache
PhoneGap
Sencha
Titanium
AIR mobile



Multi-screen application development
represents the best business case for Flex.

Flex is an easy technology for multi-screen
application development.

AIR is the future of the Flash platform for
consumer applications.



3. Community


SpringAS Signals Flight
Swiz asmock FlexLib
Mate as3corelib Jest
Parsley as3crypto Ribbit
PureMVC as3awss3lib TweenLite
Robotlegs Away3D Tweener
tinyTLF PaperVision3D Merapi
Spoon.as FCSS WOW 3D
hamcrest-as3 Degrafa as3youtubelib
SwiftSuspenders Reflex as3syndicationlib
FlexUnit Stealth FZip



4. Video & Audio

Ogg Theora H.264 WebM

IE9/IE10 Manual Install

Firefox

Chrome

Safari

Mobile Safari

Opera



Ogg Theora H.264 WebM

BROWSER IE9

Firefox
Manual Install

INCOMPATIBILITY
Chrome

Safari

Mobile Safari

Opera FAIL


Flash FMS 4.5

IE9/IE10

IE10 tablet

Firefox

Chrome

Safari

Mobile Safari

Opera



HTML5 video lacks the ability to “secure the
content, handle reporting for our advertisers,
to...ensure premium visual quality, communicate
back with the server to determine how long to
buffer and what bit-rate to stream, and dozens of
other things that aren’t necessarily visible to the
end user.”
- Hulu
gizmodo.com/#!5538264/hulu-says-html5-isnt-ready-yet



“HTML5 Video doesn’t have a viable
DRM solution at this point.”
- Netflix
gigaom.com/video/netflix-no-plans-for-html5-video/



You have to choose two encoding techs -
Flash will be one.

Flash is still the only viable choice for
delivering protected and controlled video
and audio content on the web.

Multimedia streaming and DRM are Flash’s
strongest hold and future on the web.



5. Games


Flash is a vector engine built for animation.
and has a rich history in gaming.



HTML5 games are okay, getting better
Canvas tag makes things flexible
Promising platforms like ImpactJS
starting to appear



Why move from HTML5 to Flash?
Browser support is spotty at best
Performance isn’t up to par
There is no FGL for html5 games
Source: blog.tametick.com/2011/01/why-im-moving-from-html5-to-flash.html



“Is html5 the future? I sure hope so!
Unfortunately, it isn’t the present.”
- TameTick.com
blog.tametick.com/2011/01/why-im-moving-from-html5-to-flash.html



Flash faces increasing competition from
other platforms in the gaming world.

AIR is a powerful platform for distributing
games to multiple platforms

Flash has a deep history in the gaming
community



6. Translating Interaction


(Don Norman’s) Experience Design
Vocabulary
Visibility
Affordances
Feedback
Mapping
Constraint
Consistency



VISIBILITY
Perceiving interactive elements

AFFORDANCES
Understanding interactive elements

FEEDBACK
Knowing how your actions impact the system

MAPPING
How well the interface reflects your understanding of the system

CONSTRAINTS
Preventing errors in the system

CONSISTENCY
Objects that appear the same function the same



VISIBILITY COMPONENT SET
Perceiving interactive elements

AFFORDANCES COMPONENT SET
Understanding interactive elements

FEEDBACK EVENT MODEL
Knowing how your actions impact the system

MAPPING CUSTOM CONTROLS & LAYOUTS
How well the interface reflects your understanding of the system

CONSTRAINTS VALIDATION & ERROR HANDLING
Preventing errors in the system

CONSISTENCY CLASS-BASED VISUAL ARCHITECTURE
Objects that appear the same function the same



HTML mark-up is SEMANTIC
MXML mark-up is VISUAL
Semantic mark-up is good for applying
multiple views to a single data-
structure and require external visual
descriptors (CSS.)

Visual mark-up is good for defining an
explicit visual representation of an
external data object, semantic or
otherwise.



Places Flash is and will be weaker
than HTML5



Accessibility


Search Engine Optimization


Web-sites


The browser was made for semantic
mark-up.
Flash locks site content in a layer of
abstraction.
Abstraction allows for generalization,
ubiquity, and re-use.

Specificity allows for customization,
perfection, and speed - an experience
highly-tailored for each specific
medium.



Places Flash is and will be weaker
than Native*

*probably.



Performance


Size


Consistency


Software is about balance
Consistency Performance Abstraction
Ubiquity Memory Specificity



FEATURES SPEED
AIR
MOBILE NATIVE
FLASH
PLAYER

HTML5

UBIQUITY SIZE



Flash is:
Enterprise tools (but platform?)
Multiple-platforms as installed apps for
desktop or mobile
Multimedia with DRM



Native apps are:
Best experience possible on any given device



HTML5 / CSS3 / JS is:
The language of the web



Take aways:
Flex has a strong future.
It looks different than its past.

HTML has a strong future.
It looks different than its past and Flash’s past.

Native apps have a strong future.
Mobile + App stores are highly disruptive.



There’s one final case for Flash I
left out......



7. Pushing Boundaries


Thanks! Fill out your surveys to win
books.
Come by the EffectiveUI
booth.
Other great sessions:
Tues 1:00pm: From Pixar to Ramayana: The Art of
RJ Owen Graphic Storytelling with Sanjay Patel
EffectiveUI Tues 2:30pm: HTML5 Semantic Web

Tues 4:00pm: Flash Platform Roadmap
@rjowen
rj.owen@effectiveui.com Weds 8:00am: Practical Mobile Development
with Flex and Adobe AIR



This slide intentionally left blank.



Flash and Flex in an HTML5 / App Store World

Recommandé

Recommandé

Contenu connexe

Plus de Effective

Plus de Effective (20)

Dernier

Dernier (20)

Flash and Flex in an HTML5 / App Store World