SlideShare a Scribd company logo
1 of 55
Tips and Tricks for Mobile FLASH DEVELOPMENT Paul Traniptrani@adobe.comwww.paultrani.com             @paultrani
Work Ride Live Love Play Paul Trani, Adobe Evangelist
Tips and Tricks ,[object Object]
 Take advantage of mobile specific capabilities
 Learn effective ways to optimize Flash content,[object Object]
Understanding Mobile
Processing Power
Bandwidth
Internet Users
Screen Size
Think first.
Don’t think mobile last
Let’s start thinking… Mobile Flash Development
Device Sizes Capabilities 1024x768 120ppi 1024x600 240ppi 854x480 240ppi 800x480 240ppi 480x320 160ppi 960x640 326ppi
Design for Real Hand Sizes Start Button 45x45px 15x15px
Navigation != Buttons
Gestures ,[object Object]
Click for more info
Swipe for additional items
GPS for nearby stores?,[object Object]
 Can disable with
mouseEnabled
mouseChildren
 Don’t use MouseEvent.MOUSE_MOVE
 Check Mouse position at interval,[object Object]
Workflow Mobile Flash Development
Flash/AIR Across Devices
Flash/AIR Across Devices
Different mobile platforms Mobile Flash Development
Don’t Resize. Recreate.
iOS User Experience Back New/Edit Home
Options Menu Android User Experience Back Home
BlackBerry Playbook User Experience Flash Silk Context Menu Application  Switching  Application  Switching  Minimize Application Bring up Keyboard Orientation  Change
One Project. Multiple Platforms.
optimization Mobile Flash Development
The Elastic Racetrack
Graphics & Rendering Mobile Flash Development
Reuse Objects ,[object Object]
 Keep bitmaps as small as possible,[object Object]
Blend modes:
Layer, Alpha, Erase, Overlay, Hard Light, Lighten, Darken,[object Object]
Display Objects Objects that aren’t interactive? trace(getSize(new Shape())); // output: 216 Interactive but no timeline? trace(getSize(newSprite()));// output: 396 Need animation?  trace(getSize(newMovieClip()));// output: 416
Off Screen Display Objects Visible = false
Clean Up ,[object Object]
 Set visible = false
 Events and other costs are still incurred when visible=false. removeChild instead.runningBoy.addEventListener(Event.REMOVED_FROM_STAGE,deactivate); function deactivate(e:Event):void { e.currentTarget.removeEventListener(Event.ENTER_FRAME,handleMovement); e.currentTarget.stop(); }
Software Rendering
Prevent Excessive Redraws
Hardware Rendering
Cache as Bitmap ,[object Object]
 Use when an object changes position only,[object Object],[object Object]
Blitting Blitting ,[object Object]
 Like painting on the stage.,[object Object]
Actionscript performance Mobile Flash Development
Performance Tests https://github.com/mrdoob/Hi-ReS-Stats

More Related Content

What's hot (7)

Computer processes
Computer processesComputer processes
Computer processes
 
Photosynth
PhotosynthPhotosynth
Photosynth
 
Evaluation 6
Evaluation 6Evaluation 6
Evaluation 6
 
Dragonfly Production Blog
Dragonfly Production BlogDragonfly Production Blog
Dragonfly Production Blog
 
Photoshop Elements 11
Photoshop Elements 11Photoshop Elements 11
Photoshop Elements 11
 
Apple TV UX: 8 Guidelines for greater Apps
Apple TV UX: 8 Guidelines for greater Apps Apple TV UX: 8 Guidelines for greater Apps
Apple TV UX: 8 Guidelines for greater Apps
 
Photoshop Elements 11
Photoshop Elements 11Photoshop Elements 11
Photoshop Elements 11
 

Similar to Tips and Tricks for Mobile Flash Development

Using AIR for Mobile Development
Using AIR for Mobile DevelopmentUsing AIR for Mobile Development
Using AIR for Mobile Development
Veronique Brossier
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
Atos_Worldline
 
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....
Patrick Lauke
 

Similar to Tips and Tricks for Mobile Flash Development (20)

Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5
 
Developing AIR for Android with Flash Professional
Developing AIR for Android with Flash ProfessionalDeveloping AIR for Android with Flash Professional
Developing AIR for Android with Flash Professional
 
Fake it 'til you make it
Fake it 'til you make itFake it 'til you make it
Fake it 'til you make it
 
Introduction to Flex Hero for Mobile Devices
Introduction to Flex Hero for Mobile DevicesIntroduction to Flex Hero for Mobile Devices
Introduction to Flex Hero for Mobile Devices
 
Flash for Mobile Devices
Flash for Mobile DevicesFlash for Mobile Devices
Flash for Mobile Devices
 
Creating Flash Content for Multiple Screens
Creating Flash Content for Multiple ScreensCreating Flash Content for Multiple Screens
Creating Flash Content for Multiple Screens
 
Developing AIR for Android with Flash Professional CS5
Developing AIR for Android with Flash Professional CS5Developing AIR for Android with Flash Professional CS5
Developing AIR for Android with Flash Professional CS5
 
Android Flash Development
Android Flash DevelopmentAndroid Flash Development
Android Flash Development
 
Using AIR for Mobile Development
Using AIR for Mobile DevelopmentUsing AIR for Mobile Development
Using AIR for Mobile Development
 
Developing for Xoom with Flash and AIR
Developing for Xoom with Flash and AIRDeveloping for Xoom with Flash and AIR
Developing for Xoom with Flash and AIR
 
Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...Responsive web design & mobile web development - a technical and business app...
Responsive web design & mobile web development - a technical and business app...
 
Skill Session - Web Multi Device
Skill Session - Web Multi DeviceSkill Session - Web Multi Device
Skill Session - Web Multi Device
 
Location Based Services Without the Cocoa
Location Based Services Without the CocoaLocation Based Services Without the Cocoa
Location Based Services Without the Cocoa
 
Secrets to Creating the Best AR Experiences
Secrets to Creating the Best AR ExperiencesSecrets to Creating the Best AR Experiences
Secrets to Creating the Best AR Experiences
 
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....
Handys und Tablets - Webentwicklung jenseits des Desktops - WebTech Mainz 12....
 
TiCalabash: Fully automated Acceptance Testing @ TiConf EU 2014
TiCalabash: Fully automated Acceptance Testing @ TiConf EU 2014TiCalabash: Fully automated Acceptance Testing @ TiConf EU 2014
TiCalabash: Fully automated Acceptance Testing @ TiConf EU 2014
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
 
Developing AIR for Android with Flash Professional CS5
Developing AIR for Android with Flash Professional CS5Developing AIR for Android with Flash Professional CS5
Developing AIR for Android with Flash Professional CS5
 
Developing Applications for WebOS
Developing Applications for WebOSDeveloping Applications for WebOS
Developing Applications for WebOS
 
Mobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptMobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScript
 

More from paultrani

CSS3 For Advanced Design
CSS3 For Advanced DesignCSS3 For Advanced Design
CSS3 For Advanced Design
paultrani
 

More from paultrani (14)

10 Easy-to-Implement Usability Findings
10 Easy-to-Implement Usability Findings10 Easy-to-Implement Usability Findings
10 Easy-to-Implement Usability Findings
 
5 Things Developers Need to Know About Design
5 Things Developers Need to Know About Design5 Things Developers Need to Know About Design
5 Things Developers Need to Know About Design
 
Creativity and Tools
Creativity and ToolsCreativity and Tools
Creativity and Tools
 
Things Every Designer Should Know About Creating for Devices
Things Every Designer Should Know About Creating for DevicesThings Every Designer Should Know About Creating for Devices
Things Every Designer Should Know About Creating for Devices
 
CSS3 and Advanced Design
CSS3 and Advanced DesignCSS3 and Advanced Design
CSS3 and Advanced Design
 
HTML5 Hotness
HTML5 HotnessHTML5 Hotness
HTML5 Hotness
 
Adobe, Flash and HTML5
Adobe, Flash and HTML5Adobe, Flash and HTML5
Adobe, Flash and HTML5
 
Flash and HTML5 Compared
Flash and HTML5 ComparedFlash and HTML5 Compared
Flash and HTML5 Compared
 
CSS3 For Advanced Design
CSS3 For Advanced DesignCSS3 For Advanced Design
CSS3 For Advanced Design
 
Designing for Mobile
Designing for MobileDesigning for Mobile
Designing for Mobile
 
Mobile Design that Doesn't Suck
Mobile Design that Doesn't SuckMobile Design that Doesn't Suck
Mobile Design that Doesn't Suck
 
Design Fundamentals for Developers
Design Fundamentals for DevelopersDesign Fundamentals for Developers
Design Fundamentals for Developers
 
Creating Mobile Content Using Flash
Creating Mobile Content Using FlashCreating Mobile Content Using Flash
Creating Mobile Content Using Flash
 
Creating Flash Content for Mobile Devices
Creating Flash Content for Mobile DevicesCreating Flash Content for Mobile Devices
Creating Flash Content for Mobile Devices
 

Recently uploaded

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 

Tips and Tricks for Mobile Flash Development

Editor's Notes

  1. http://blogs.adobe.com/conversations/2011/02/the-multiscreen-revolution.htmlProcessing PowerAverage processing power has been on a continuous growth curve for PCs over the past 25 years, with Moore’s Law holding firm as processing doubles every 18 months. This growth is being further accelerated by the adoption of multicore processors.In addition to PCs, we now see an increase in processing power on smartphones, Internet-connected televisions, and tablets. This is driving the mobile computing boom and enabling much richer experiences on these screens, with typical processor speeds over 1GHz. Even so, the processing power across these screens is comparable to what the personal computer experience was about seven years ago. While mobile computing power increases, we will continue to have an ongoing processing power gap between PCs on the one hand, and smartphones, TVs, and tablets on the other.This creates a challenge for anyone building digital experiences, as they will need to deliver effective experiences across many non-PC devices, not only high performance personal computers. Our approach at Adobe is to take a mobile-first view on the new work that we are doing to design for the more constrained environments, then look to ways to enhance that experience for higher performance environments.
  2. BandwidthThe computing experience of today, of course, is not just a local one, it is a highly interconnected one. All the computing power and battery life doesn’t really matter much unless you can also connect to the Internet. There is radical bandwidth improvement underway that will further drive the multiscreen experience.The typical connected US household uses either cable or DSL right now, likely running between 10-20 megabits per second. In some countries, of course, it’s faster than this. Wireless data connectivity is starting to increase around the world, and there is a coming breakout where we will see a crossover: wireless bandwidth is going to exceed wireline bandwidth. People actually will have a stronger connection to data on the Internet with a wireless connection, which is being driven by 4G technologies, such as LTE. Wireless operators already are starting to roll this out, starting at speeds of 10-20 Mbps, and the technology has the ability to ramp up to 50-100 Mbps on a per user basis over the next several years. Of course, this speed will vary depending on which type of building the user is in and other factors, but generally we can expect to see wireless bandwidth over time that’s about five times faster than what we’re experiencing today.Overall it is going to be a plentiful bandwidth environment, and that’s going to be great for anyone building experiences such as streaming HD video, multiuser games, or rich, live collaboration on the web.
  3. Desktop vs Mobile Internet UseThis transformation from desktop to mobile is happening now. Below is a chart from a recent Morgan Stanley report, showing that desktop connections to the Internet are continuing to increase. In the next three or four years mobile computing is going to exceed desktop computing on the Internet.All of these changes together represent a bigger shift in computing than the personal computer revolution.There are already hundreds of millions devices in the hands of people connecting to the web. Over time, the majority of people using web content and applications will be connecting through a mobile device. In 2010 alone, over 350 million smartphones were sold and the tablet form factor accelerating quickly from more than 18 million tablets this past year. The first Internet-connected TVs have started to hit the market, and hundreds of millions of these TVs and set-top boxes are expected to ship worldwide in the next five years.
  4. Smartphones will likely plateau around 960×640.Screen SizeFor many years, web designers and application developers looked at the average computer screen size and aimed at that in their work. Over time, this size gradually increased and now we are at a point where this has splintered into many screen sizes. One can no longer design to a single average size.Smartphones are increasing in resolution and will likely plateau around 960×640, as they remain small enough to hold in your hand. Emerging tablets range in size from 7″ to 10″ and some will be even larger, with resolutions between smartphones and PCs. Internet-connected televisions have an HD resolution of 1920×1080, a very high fidelity screen connected to the Internet. Some desktop computer displays are delivering even greater resolution.Some content providers have chosen to tackle this diversity through multiple implementations of their websites. But as more and more form factors are added, this approach becomes impractical. Ideally, to take into account all these screen sizes, content can be created once and made adaptable so that it will adjust to a diversity of screens. One emerging approach that is to use CSS to skin your site across displays. Another is to design multiple presentations of content while reusing common elements such as story flow, images, and video that may be dynamically adapted.In addition to screen size and resolution, content needs to take advantage of the different input methods — whether it’s a touch screen, remote or keyboard. The touch interface in particular requires a rethink in how to best present content and design applications for that direct input model, while still reusing content where appropriate across these different interface models.
  5. Smartphones will likely plateau around 960×640.Screen SizeFor many years, web designers and application developers looked at the average computer screen size and aimed at that in their work. Over time, this size gradually increased and now we are at a point where this has splintered into many screen sizes. One can no longer design to a single average size.Smartphones are increasing in resolution and will likely plateau around 960×640, as they remain small enough to hold in your hand. Emerging tablets range in size from 7″ to 10″ and some will be even larger, with resolutions between smartphones and PCs. Internet-connected televisions have an HD resolution of 1920×1080, a very high fidelity screen connected to the Internet. Some desktop computer displays are delivering even greater resolution.Some content providers have chosen to tackle this diversity through multiple implementations of their websites. But as more and more form factors are added, this approach becomes impractical. Ideally, to take into account all these screen sizes, content can be created once and made adaptable so that it will adjust to a diversity of screens. One emerging approach that is to use CSS to skin your site across displays. Another is to design multiple presentations of content while reusing common elements such as story flow, images, and video that may be dynamically adapted.In addition to screen size and resolution, content needs to take advantage of the different input methods — whether it’s a touch screen, remote or keyboard. The touch interface in particular requires a rethink in how to best present content and design applications for that direct input model, while still reusing content where appropriate across these different interface models.
  6. One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called "white space," is good. Embrace it. Use it. Often, the more space you don't use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  7. Use opaque background over transparency Use TLF without Test different anti-aliasing technics (animation, bitmap text...) Avoid frequently-updated text