fxg and flex mobile development

13
FxAIR.org Tech Gathering #14 FXG and Flex Mobile Development

Upload: vicker-leung

Post on 28-Jun-2015

697 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: FXG and Flex Mobile Development

FxAIR.org Tech Gathering #14 FXG and Flex Mobile Development

Page 2: FXG and Flex Mobile Development

Developer Nightmare Boss? Deadline? Bug? No…

Page 3: FXG and Flex Mobile Development
Page 4: FXG and Flex Mobile Development
Page 5: FXG and Flex Mobile Development

Bitmap? Vector (FXG)? Performance? Pixel? Mobile?

Page 6: FXG and Flex Mobile Development

Hard to Choose? NO!!! Go for Vector.

Page 7: FXG and Flex Mobile Development

The New HTC One 468 PPI… OMG… One X (312 PPI) Retina (326 PPI)

Page 8: FXG and Flex Mobile Development

64px 96px 128px 256px

Page 9: FXG and Flex Mobile Development
Page 10: FXG and Flex Mobile Development

<?xml version="1.0" encoding="UTF-8"?> <Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:fc="http://ns.adobe.com/flashcatalyst/2009" viewHeight= "144" viewWidth= "256">

<!-- > --> <Path winding="evenOdd" data="M 199 23 L 181 38 L 221 75 L 181 113 L 200 128 L 255 75 L 199 23 Z "

blendMode="normal" alpha="1"> <fill> <SolidColor color="#ffffff"/> </fill> </Path>

<!-- / --> <Path winding="evenOdd" data="M 168 2 L 134 143 L 112 143 L 147 2 L 168 2 Z " blendMode="normal" alpha="1"> <fill> <SolidColor color="#ffffff"/> </fill> </Path> <!-- < --> <Path winding="evenOdd" data="M 56 23 L 1 75 L 57 128 L 75 113 L 35 75 L 75 38 L 56 23 Z "

blendMode="normal" alpha="1"> <fill> <SolidColor color="#ffffff"/> </fill> </Path>

</Graphic>

FXG Problem? Not so human readable

Page 11: FXG and Flex Mobile Development

FXG Performance? Let’s check it out~ -  50 icons in Tile layout inside Scroller -  Testing on HTC One X -  PNG vs FXG / CPU vs GPU

Page 12: FXG and Flex Mobile Development

FXG File Size? FXG 823 bytes vs PNG 3,588 bytes Don’t forget MultiDPIBitmap * 3 = at least 10,764 bytes

Page 13: FXG and Flex Mobile Development

Tools to Help Adobe Illustrator / Adobe Fireworks -  Export FXG (dirty but work)

7JIGEN LABS FXG Editor AIR http://labs.7jigen.net/2010/05/15/fxg-editor-air-app/