Your SlideShare is downloading. ×
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
Customizing the Look of Mobile Flex
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

Customizing the Look of Mobile Flex

2,613

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,613
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
47
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

×