Flash and Flex in an HTML5 / App Store World

Flash and Flex in an HTML5 / App Store world

Tuesday, October 4, 11

© 2011 EffectiveUI, Inc.

RJ OwenExperience [email protected]@effectiveui.com

Tweeting this session?Use the hashtag: #effectiveui





.flickr.com/photos/mobilestreetlife/4179063482/Tuesday, October 4, 11

https://secure.flickr.com/photos/mobilestreetlife/4179063482/sizes/z/in/photostream/

https://secure.flickr.com/photos/mobilestreetlife/4179063482/sizes/z/in/photostream/




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 DevelopersIncrease 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, CommunityMake 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 UXImprove 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 developmentImprove Enterprise development



1 1.5 2 3 3.5 4 4.5

Enterprise

Design

AIR

Developers

Mobile



Flex’s current trajectory: reverse-engineering the business plan

Provide the tools required for enterprise-level workflows

Marketed to DevelopersTo solve a wide array of problemsWith good results



Flex’s current trajectory: reverse-engineering the business plan

Provide the tools required for enterprise-level workflows

Marketed to DevelopersTo solve a wide array of problemsWith good results

Enterprise

Design

DevelopersUbiquity



2 11

Vector Animation Multimedia

Apps

Multi-touch

3D

Mobile



1997 - 1999 Flash for animations on the web!

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

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

2000 - 2008

2008-2010

Flash-based mobile apps and everything from before

2010

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

2011 and beyond



So that Adobe can sell......Creative Suite

part of $2Billion creative solutions revenue 2010, 54% of total revenue (#1 source)

LiveCyclepart of $355M in Digital Enterprise

Solutions revenue 2010, 9% of total revenue (#3 source)

source: adobe.com/aboutadobe/invrelations/financialdocs.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 quickerSingle technology to focus onFaster ROICore OOP educationand more.



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

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


© 2011 EffectiveUI, Inc.1. EnterpriseTuesday, October 4, 11


Enterprise RequirementsClient-Server integrationOO languagesDeveloper toolsetsMature languagesCode generationBest-practicesBigger logos



Java :: Enterprise Back-EndFlex :: Enterprise Front-End





2. Multi-Screen DevelopmentTuesday, October 4, 11


Same content, multiple screensiOS, BlackBerry, Android, WP7, and counting....



Approaches to multi-screen:Web-onlyMultiple native applications

(avoid multi-screen ubiquity altogether)HTML5 app cachePhoneGapSenchaTitaniumAIR 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. CommunityTuesday, October 4, 11


SpringASSwizMateParsleyPureMVCRobotlegstinyTLFSpoon.ashamcrest-as3SwiftSuspendersFlexUnit

Signalsasmockas3corelibas3cryptoas3awss3libAway3DPaperVision3DFCSSDegrafaReflexStealth

FlightFlexLibJestRibbitTweenLiteTweenerMerapiWOW 3Das3youtubelibas3syndicationlibFZip


4. Video & AudioTuesday, October 4, 11


Ogg Theora H.264 WebM

IE9/IE10 Manual Install

Firefox

Chrome

Safari

Mobile Safari

Opera



Ogg Theora H.264 WebM

IE9 Manual Install

Firefox

Chrome

Safari

Mobile Safari

Opera

BROWSER INCOMPATIBILITY

FAILTuesday, October 4, 11


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.”

- Hulugizmodo.com/#!5538264/hulu-says-html5-isnt-ready-yet



“HTML5 Video doesn’t have a viable DRM solution at this point.”

- Netflixgigaom.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. GamesTuesday, October 4, 11


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



HTML5 games are okay, getting betterCanvas tag makes things flexiblePromising platforms like ImpactJS

starting to appear



Why move from HTML5 to Flash?Browser support is spotty at bestPerformance isn’t up to parThere is no FGL for html5 gamesSource: 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.comblog.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 InteractionTuesday, October 4, 11


(Don Norman’s) Experience Design VocabularyVisibilityAffordancesFeedbackMappingConstraintConsistency



VISIBILITYPerceiving interactive elements

AFFORDANCESUnderstanding interactive elements

FEEDBACKKnowing how your actions impact the system

MAPPINGHow well the interface reflects your understanding of the system

CONSTRAINTSPreventing errors in the system

CONSISTENCYObjects that appear the same function the same



VISIBILITYPerceiving interactive elements

AFFORDANCESUnderstanding interactive elements

FEEDBACKKnowing how your actions impact the system

MAPPINGHow well the interface reflects your understanding of the system

CONSTRAINTSPreventing errors in the system

CONSISTENCYObjects that appear the same function the same

COMPONENT SET

EVENT MODEL

CUSTOM CONTROLS & LAYOUTS

VALIDATION & ERROR HANDLING

CLASS-BASED VISUAL ARCHITECTURE

COMPONENT SET



HTML mark-up is SEMANTICMXML 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



AccessibilityTuesday, October 4, 11


Search Engine OptimizationTuesday, October 4, 11


Web-sitesTuesday, October 4, 11


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.



PerformanceTuesday, October 4, 11


SizeTuesday, October 4, 11


ConsistencyTuesday, October 4, 11

© 2011 EffectiveUI, Inc. colinharman.com/portfolio/how-would-you-like-your-graphic-design/



Software is about balanceConsistencyUbiquity

PerformanceMemory

AbstractionSpecificity



FEATURES SPEED

SIZEUBIQUITY

NATIVEAIR

MOBILE

HTML5

FLASH PLAYER



Flash is:Enterprise tools (but platform?)Multiple-platforms as installed apps for

desktop or mobileMultimedia 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 BoundariesTuesday, October 4, 11






Thanks!

RJ OwenEffectiveUI

@[email protected]

From Pixar to Ramayana: The Art of Graphic Storytelling with Sanjay Patel

Tues 1:00pm:

HTML5 Semantic WebTues 2:30pm:

Flash Platform RoadmapTues 4:00pm:

Practical Mobile Development with Flex and Adobe AIR

Weds 8:00am:

Other great sessions:

Fill out your surveys to win books.Come by the EffectiveUI booth.


mailto:[email protected]

mailto:[email protected]


This slide intentionally left blank.


Flash and Flex in an HTML5 / App Store World

Technology

adobe flex

macromedia flex

end flex

flash mxml

flash platform

before2010 flash

communitymake flex builder

multiscreen mobile