Your SlideShare is downloading. ×
Customizing the Look of Mobile Flex
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Customizing the Look of Mobile Flex

2,587
views

Published on

Published in: Technology, Art & Photos

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,587
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
46
Comments
0
Likes
0
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

Transcript

  • 1. Customizing theLook of MobileFlex
  • 2. Agenda• Design Considerations• CSS vs Skinning• Introduction to Skinning• Conclusions
  • 3. DESIGN CONSIDERATIONS
  • 4. Work witha designer
  • 5. 640x920Start asHighResolutionas possible
  • 6. Scale Down
  • 7. • Custom graphics look like crap if you design for too small a screen. • But smaller DPIDeal with devices are usually less powerfulDPI meaning pushing around larger images is ineffiecient
  • 8. • Get PSD • Pull into to Fireworks • Use Fireworks to export pngs andDealing with jpgs.PSD’s
  • 9. SKIN VS CSS
  • 10. CSS• Font Changes – Family – Color – Size• Flex UI Changes – Color – Flex CSS Properties
  • 11. Skinning• Changing Behavior• Radical change in look and feel• Implementation of custom graphics
  • 12. CONCEPTS
  • 13. Performance iskey
  • 14. ActionScriptComponentsPerform Best
  • 15. Almost all ofyour skins willbe ActionScript Skins
  • 16. What I use CSS for• As much font selection as possible• Class specifications
  • 17. Why?
  • 18. setStyle is relativelyexpensive
  • 19. SKIN LIFECYCLE
  • 20. Important Methods• Constructor – Very beginning – No Children available – Good for manipulating “this” and setting variables• onChildrenCreate – After everything is done setting up – Good for set once display properties• layoutContents – After any thing that requires a redistribution of elements – Good for reacting to location and content changes
  • 21. Final ThoughtBefore we get intoComponents
  • 22. I break everybest practice
  • 23. CLASSES YOU NEED TOKNOW
  • 24. StylableTextField• Lightweight• Can be Styled• Can used for editable and static text• It can’t be used in MXML markup though
  • 25. BitmapImage• Lightweight image component• Doesn’t have ability to load dynamic content… yet.• This is fine, skin assets should be embedded• Fast performing
  • 26. SkinableComponent• Like a Group, but you can skin it.
  • 27. IconItemRenderer• High performance renderer• Handles a lot of cases.• Can be extended.
  • 28. WORKING WITHCOMPONENTS
  • 29. Starting
  • 30. Finishing
  • 31. APPLICATION
  • 32. Compare
  • 33. Skinning Application
  • 34. Assigning a Skin in CSSs|ViewNavigatorApplication{ skinClass: ClassReference("skins.AppSkin");}
  • 35. Why• Prevents you from cluttering up Flex with presentational information
  • 36. Dealing with DPIswitch (applicationDPI){ case 320: { break; } case 240: { break; } default: { break; }}
  • 37. WORKING WITH FONTS
  • 38. Font Recap• There are 2 font rendering engines in Flash• This means 2 ways of embedding fonts – TLF – NonTLF• Most Mobile components use NonTLF• Label uses TLF
  • 39. Consequence• You have to embed both TLF and NonTLF fonts• You can do this with Metadata• I’ve never done it that way• Because Flash Professional makes this very easy
  • 40. Embedding fonts withFlash Professional
  • 41. BUTTON
  • 42. Compare
  • 43. Skinning Button
  • 44. CONCLUSIONS
  • 45. BEAUTY
  • 46. Why care about beauty?
  • 47. Beauty is the differencebetweenApps people have to use Apps people want to use
  • 48. Beauty is the differencebetweenApps people have to use Apps people want to use
  • 49. Finicky
  • 50. Typical Process• Do as much in css as possible• Drop to skins• Remove the background• Slap in graphics• Account for DPI• Account for redraws
  • 51. Good resources• Deep Dive Into Flex Mobile Item Renderers – http://www.slideshare.net/JasonHanson/deep- dive-into-flex-mobile-item-renderers-7501594• Jason San Jose – http://www.adobe.com/devnet/flex/articles/mobile- skinning-part1.html – http://www.adobe.com/devnet/flex/articles/mobile- skinning-part2.html – http://www.adobe.com/devnet/flex/articles/mobile- skinning-part3.html• Holly Schinsky – http://devgirl.org/2011/05/09/styling-the-flex-4-5- mobile-application-tabs-and-actionbar/
  • 52. Follow up?• Feel free to contact me – terry.ryan@adobe.com – http://terrenceryan.com – Twitter: @tpryan