SlideShare ist ein Scribd-Unternehmen logo
1 von 13
Downloaden Sie, um offline zu lesen
FxAIR.org Tech Gathering #14
FXG and Flex Mobile Development
Developer Nightmare
Boss? Deadline? Bug? No…
Bitmap? Vector (FXG)?
Performance? Pixel? Mobile?
Hard to Choose?
NO!!! Go for Vector.
The New HTC One
468 PPI… OMG…

One X (312 PPI)
Retina (326 PPI)
64px
   96px
                128px
                         256px
<?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>







    FXG Problem?








   Not so human readable


        
<!-- / -->
        
<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 Performance?
Let’s check it out~

-  50 icons in Tile layout inside Scroller
-  Testing on HTC One X
-  PNG vs FXG / CPU vs GPU
FXG File Size?
FXG 823 bytes vs PNG 3,588 bytes

Don’t forget MultiDPIBitmap * 3
= at least 10,764 bytes
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/

Weitere ähnliche Inhalte

Ähnlich wie FXG and Flex Mobile Development

MOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize thisMOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize this
Boris Zapolsky
 
Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) beta
Kirk Yamamoto
 
Basic html5 and javascript
Basic html5 and javascriptBasic html5 and javascript
Basic html5 and javascript
wendy017
 

Ähnlich wie FXG and Flex Mobile Development (20)

MOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize thisMOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize this
 
Flash Is Dead, Long Live Flash!
Flash Is Dead, Long Live Flash!Flash Is Dead, Long Live Flash!
Flash Is Dead, Long Live Flash!
 
A2 Video Streamer
A2 Video StreamerA2 Video Streamer
A2 Video Streamer
 
Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) beta
 
Accelerometer and Open GL
Accelerometer and Open GLAccelerometer and Open GL
Accelerometer and Open GL
 
Accelerometer and OpenGL
Accelerometer and OpenGLAccelerometer and OpenGL
Accelerometer and OpenGL
 
Christophe Jolif - Flex Data Visualization going one step further with IBM IL...
Christophe Jolif - Flex Data Visualization going one step further with IBM IL...Christophe Jolif - Flex Data Visualization going one step further with IBM IL...
Christophe Jolif - Flex Data Visualization going one step further with IBM IL...
 
Flash Catalyst Jug
Flash Catalyst JugFlash Catalyst Jug
Flash Catalyst Jug
 
A 3D printing programming API
A 3D printing programming APIA 3D printing programming API
A 3D printing programming API
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
 
機器學習應用於蔬果辨識
機器學習應用於蔬果辨識機器學習應用於蔬果辨識
機器學習應用於蔬果辨識
 
Basic html5 and javascript
Basic html5 and javascriptBasic html5 and javascript
Basic html5 and javascript
 
Dx diag
Dx diagDx diag
Dx diag
 
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
 
Maximize The Performance of HTML5 Video in RPI2 (Embedded Linux Conference 2016)
Maximize The Performance of HTML5 Video in RPI2 (Embedded Linux Conference 2016)Maximize The Performance of HTML5 Video in RPI2 (Embedded Linux Conference 2016)
Maximize The Performance of HTML5 Video in RPI2 (Embedded Linux Conference 2016)
 
44CON London 2015 - Stegosploit - Drive-by Browser Exploits using only Images
44CON London 2015 - Stegosploit - Drive-by Browser Exploits using only Images44CON London 2015 - Stegosploit - Drive-by Browser Exploits using only Images
44CON London 2015 - Stegosploit - Drive-by Browser Exploits using only Images
 
Keep Calm and Stegosploit - 44CON 2015
Keep Calm and Stegosploit - 44CON 2015Keep Calm and Stegosploit - 44CON 2015
Keep Calm and Stegosploit - 44CON 2015
 
GPUs for GEC Competition @ GECCO-2013
GPUs for GEC Competition @ GECCO-2013GPUs for GEC Competition @ GECCO-2013
GPUs for GEC Competition @ GECCO-2013
 
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVGJavaOne 2009 -  2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
 
Graphics in C++
Graphics in C++Graphics in C++
Graphics in C++
 

FXG and Flex Mobile Development

  • 1. FxAIR.org Tech Gathering #14 FXG and Flex Mobile Development
  • 3.
  • 4.
  • 6. Hard to Choose? NO!!! Go for Vector.
  • 7. The New HTC One 468 PPI… OMG… One X (312 PPI) Retina (326 PPI)
  • 8. 64px 96px 128px 256px
  • 9.
  • 10. <?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> FXG Problem? Not so human readable <!-- / --> <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>
  • 11. 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
  • 12. FXG File Size? FXG 823 bytes vs PNG 3,588 bytes Don’t forget MultiDPIBitmap * 3 = at least 10,764 bytes
  • 13. 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/