Your SlideShare is downloading. ×
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Tips and Tricks for Mobile Flash Development

2,980

Published on

Learn tips and tricks that will help you when it comes to mobile development. Flash Pro specifically. ActionScript generally.

Learn tips and tricks that will help you when it comes to mobile development. Flash Pro specifically. ActionScript generally.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,980
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
105
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • Use opaque background over transparency Use TLF without Test different anti-aliasing technics (animation, bitmap text...) Avoid frequently-updated text
  • Transcript

    • 1. Tips and Tricks for
      Mobile FLASH DEVELOPMENT
      Paul Traniptrani@adobe.comwww.paultrani.com @paultrani
    • 2. Work
      Ride
      Live
      Love
      Play
      Paul Trani, Adobe Evangelist
    • 3. Tips and Tricks
      • Overview of mobile
      • 4. Take advantage of mobile specific capabilities
      • 5. Learn effective ways to optimize Flash content
    • Understanding mobile
      Mobile Flash Development
    • 6. Understanding Mobile
    • 7. Processing Power
    • 8. Bandwidth
    • 9. Internet Users
    • 10. Screen Size
    • 11. Think
      first.
    • 12. Don’t think mobile last
    • 13. Let’s start thinking…
      Mobile Flash Development
    • 14. Device Sizes
      Capabilities
      1024x768
      120ppi
      1024x600
      240ppi
      854x480
      240ppi
      800x480
      240ppi
      480x320
      160ppi
      960x640
      326ppi
    • 15. Design for Real Hand Sizes
      Start Button
      45x45px
      15x15px
    • 16. Navigation != Buttons
    • 17. Gestures
      • Pinch to zoom
      • 18. Click for more info
      • 19. Swipe for additional items
      • 20. GPS for nearby stores?
    • Mouse/Touch Events
      • Touch Events have more overhead than Mouse Events
      • 21. Can disable with
      • 22. mouseEnabled
      • 23. mouseChildren
      • 24. Don’t use MouseEvent.MOUSE_MOVE
      • 25. Check Mouse position at interval
    • Device Capabilities
      Swipe/Accelerometer
    • 26. Workflow
      Mobile Flash Development
    • 27. Flash/AIR Across Devices
    • 28. Flash/AIR Across Devices
    • 29. Different mobile platforms
      Mobile Flash Development
    • 30. Don’t Resize. Recreate.
    • 31. iOS User Experience
      Back
      New/Edit
      Home
    • 32. Options Menu
      Android User Experience
      Back
      Home
    • 33. BlackBerry Playbook User Experience
      Flash Silk
      Context Menu
      Application
      Switching
      Application
      Switching
      Minimize Application
      Bring up Keyboard
      Orientation
      Change
    • 34. One Project. Multiple Platforms.
    • 35. optimization
      Mobile Flash Development
    • 36. The Elastic Racetrack
    • 37. Graphics & Rendering
      Mobile Flash Development
    • 38. Reuse Objects
      • Consider bitmaps over vectors
      • 39. Keep bitmaps as small as possible
    • Things to Avoid
      • Filters
      • 40. Blend modes:
      • 41. Layer, Alpha, Erase, Overlay, Hard Light, Lighten, Darken
    • Text
    • 42. 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
    • 43. Off Screen Display Objects
      Visible = false
    • 44. Clean Up
      • alpha = 0 rendering still occurs
      • 45. Set visible = false
      • 46. 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();
      }
    • 47. Software Rendering
    • 48. Prevent Excessive Redraws
    • 49. Hardware Rendering
    • 50. Cache as Bitmap
      • Object is rendered into an offscreen bitmap
      • 51. Use when an object changes position only
    • Cache as Bitmap Matrix
      • Scale, skew, rotate, and translate the object without triggering bitmap regeneration.
    • CPU vs. GPU
      Otherworld
    • 52. Blitting
      Blitting
      • Draw vector content to a bitmap before it ever gets rendered to the stage.
      • 53. Like painting on the stage.
    • Test, Test, Test
      Aliens!
      Elliot Mebane http://www.roguish.com
    • 54. Actionscript performance
      Mobile Flash Development
    • 55. Performance Tests
      https://github.com/mrdoob/Hi-ReS-Stats
    • 56. Flex Profiler
    • 57. Time Management
      • In General, ENTER_FRAME performs better than Timer
      • 58. Use single listener, and then dispatch
    • Loading and Unloading SWFs
      unloadAndStop()
      Handles the freezing natively and forces the GC process to run:
      varloader:Loader = new Loader();
      loader.load ( new URLRequest ( "content.swf" ) );
      addChild ( loader );
      stage.addEventListener ( MouseEvent.CLICK, unloadSWF );
      function unloadSWF ( e:MouseEvent ):void
      {
      // Unload the SWF file with automatic object deactivation
      loader.unloadAndStop();
      }
    • 59. Instance Allocation
    • 60. Instance Allocation
    • 61. Event Propagation
      • Can be very expensive, especially deeply nested display list instances.
      • 62. Event.stopPropagation();
      • 63. Event.stopImmediatePropagation();
    • Event Propagation
    • 64. Thank You
      Optimizing Mobile Content for the Adobe Flash Platform
      ThibaultImbert
      www.bytearray.org/?p=1363
      Flash Pro New Features
      @flashplatform – Tom Barclay & Richard Galvan
      Paul Traniptrani@adobe.comwww.paultrani.com
    • 65. Thank You
      Optimizing Mobile Content for the Adobe Flash Platform
      ThibaultImbert
      www.bytearray.org/?p=1363
      Flash Pro New Features
      @flashplatform – Tom Barclay & Richard Galvan
      Lynda.com free 30-day pass at this URL:
      www.lynda.com/freepass/ptrani
      Paul Traniptrani@adobe.comwww.paultrani.com

    ×