Home

Archive » October, 2006 «

SVG Embedding again

Monday, October 23rd, 2006 | Author:

I got some useful feedback at Flashcoders about my SVG post below. So far from what I found there is no golden rule for predicting filesize when embedding svgs except that usually the swf will be smaller.

I tried some of the suggested Inkscape optimising tips (ungroup,convert to paths, removing metadata/gradient definitions) and others (Vacuum Defs, Paths simplify) but none had a notable filesize impact once that particular svg was embedded in Flash (although they do benefit other svgs).

The main culprit seems to be the three shadows below the base and one once they were removed from the svg took the resulting swf from 63k down to 30k which is roughly the svg/swf ratio I would expect.

Below left is the original monitor and the edited one one on the right, those shadows below the base add 33k (over half of the total).

One related thing I found is :

Original monitor svg = 64k adds 63k to the swf when embedded alone
Edited monitor svg = 69k adds 30k to the swf when embedded alone
Embedding BOTH svg files in the SAME swf adds only 63k to the swf

I am guessing that the reason why is that when converting embedded svgs to swf the Flex2 SDK caches paths and gradients converts them to symbols in the library so that if it finds the same definition in another embedded svg it pulls it out of the library instead of recreating it. But I would need to test it some more to be sure. Cool if it is though.

Category: Code Examples, Flash, Flex SVG | Comments off

Adobe release Linux Flash 9 beta player

Friday, October 20th, 2006 | Author:

Adobe have released the Linux Flash 9 beta player. Available for download from here http://labs.adobe.com/downloads/flashplayer9.html
Hope it works out of the box on my Ubuntu.
The little discussion here says it should work fine :)

Update:
Actually it was simple to install
standalone: just su to root and unzip FP9_standalone_beta_101806.tar.gz and extract gflashplayer to your /bin directory
Firefox: just su to root and unzip FP9_plugin_beta_101806.tar.gz and extract libflashplayer.so to your /usr/lib/firefox/plugins directory

and so far it works just right too :)

Some discussion of the plugin at Ubuntu Forums and at linux questions and a positive review here

Category: Flash | Comments off

SVG Embedding and file size

Tuesday, October 17th, 2006 | Author:

Here are just a few of the nice vector clipart examples from at http://www.openclipart.org . All four originals are in SVG format created using Created with Inkscape and below is the code to embed them and apply DropShadow and Bevel filters to each using the Flex2 SDK to compile a Flash 9 swf.

The laptop svg is around 9k adds around 3k to the final swf. The vacuum svg is 36k and adds 11k, camcorder svg is 36k and adds 14k, and the monitor svg is 63k and adds around around 65k.

So all the swf conversions are smaller than their respective svg files except the monitor svg (and this adds more than twice the size to the swf of the other three put together).

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3. import flash.display.Sprite;
  4. import flash.filters.DropShadowFilter;
  5. import flash.filters.BevelFilter;
  6.  
  7. [SWF( backgroundColor='0x333333', frameRate='30', height='400', width='400')]
  8.  
  9. public class SVGfilters extends Sprite
  10. {
  11. // svg files from http://www.openclipart.org
  12.  
  13. [Embed(source="../assets/laptop.svg")]
  14. private var SVG_Laptop:Class;
  15.  
  16. [Embed(source="../assets/camcorder_jaime_sanchez1.svg")]
  17. private var SVG_Camcorder:Class;
  18.  
  19. [Embed(source="../assets/lcd_monitor_the_structor_.svg")]
  20. private var SVG_Monitor:Class;
  21.  
  22. [Embed(source="../assets/blue_vacuum_cleaner_jaim_01.svg")]
  23. private var SVG_Vacuum:Class;
  24.  
  25. public function SVGfilters()
  26. {
  27. init();
  28. }
  29.  
  30. private function init():void
  31. {
  32.  
  33. var mySVG_Laptop:Sprite = new SVG_Laptop() as Sprite;
  34. mySVG_Laptop.scaleX=0.25;
  35. mySVG_Laptop.scaleY=0.25;
  36. mySVG_Laptop.x=50;
  37. mySVG_Laptop.y=0;
  38. mySVG_Laptop.filters = [ new DropShadowFilter() ,  new BevelFilter() ];
  39. addChild(mySVG_Laptop);
  40.  
  41. var mySVG_Vacuum:Sprite = new SVG_Vacuum() as Sprite;
  42. mySVG_Vacuum.scaleX=0.25;
  43. mySVG_Vacuum.scaleY=0.25;
  44. mySVG_Vacuum.x=190;
  45. mySVG_Vacuum.y=30;
  46. mySVG_Vacuum.filters = [ new DropShadowFilter() ,  new BevelFilter() ];
  47. addChild(mySVG_Vacuum);
  48.  
  49. var mySVG_Monitor:Sprite = new SVG_Monitor() as Sprite;
  50. mySVG_Monitor.scaleX=0.25;
  51. mySVG_Monitor.scaleY=0.25;
  52. mySVG_Monitor.y=150;
  53. mySVG_Monitor.x=50;
  54. mySVG_Monitor.filters = [ new DropShadowFilter() ,  new BevelFilter() ];
  55. addChild(mySVG_Monitor);
  56.  
  57. var mySVG_Camcorder:Sprite = new SVG_Camcorder() as Sprite;
  58. mySVG_Camcorder.scaleX=0.25;
  59. mySVG_Camcorder.scaleY=0.25;
  60. mySVG_Camcorder.x=190;
  61. mySVG_Camcorder.y=200;
  62. mySVG_Camcorder.filters = [ new DropShadowFilter() ,  new BevelFilter() ];
  63. addChild(mySVG_Camcorder);
  64.  
  65. }
  66. }
  67. }

Category: Code Examples, Flash, Flex SVG | Comments off

SWFMill & MTASC & Fuse Example

Sunday, October 15th, 2006 | Author:

An example of using SWFMill & MTASC based on the Natural Entry Point approach...
Update: Added some Fuse animation

command line

PLAIN TEXT
CODE:
  1. "c:\mtasc\mtasc.exe"  -swf classes.swf -cp c:\...  -header 1:1:30 Application.as RotateFrog.as
  2. "c:\swfmill\swfmill.exe" simple application.xml application.swf

application.xml

PLAIN TEXT
XML:
  1. /*
  2. library/rana03_architetto_france_01.png from http://www.openclipart.org/
  3. */

RotateFrog.as

PLAIN TEXT
Actionscript:
  1. import com.mosesSupposes.fuse.*;
  2.  
  3. class RotateFrog extends MovieClip
  4. {
  5.  
  6. function RotateFrog ()  {
  7.  
  8. ZigoEngine.register(Fuse,PennerEasing,FuseFMP);
  9. FuseFMP.writeFilter(this,"DropShadow");
  10. setFuse ();
  11. }
  12.  
  13. function setFuse ()
  14. {
  15.  
  16. var f:Fuse = new Fuse();
  17. f.push({delay:1});
  18. f.push({target:this, x:20, y:20,Bevel_angleTo:33,DropShadow_distance:44, Blur_blurX:0, Blur_blurY:0, seconds:2, ease:"easeInOutBack" });
  19. f.push({target:this, x:300, y:300, Bevel_angleTo:233,DropShadow_distance:4,Blur_blurX:5, Blur_blurY:5, seconds:2, ease:"easeInOutBack", func:setFuse, scope:this});
  20. f.start();
  21. }
  22.  
  23. }

Application.as

PLAIN TEXT
Actionscript:
  1. class Application extends MovieClip
  2. {
  3.  
  4. function Application () {}
  5.  
  6. function onLoad ()
  7. {
  8. attachMovie ("rana03_architetto_france_01png", "clip", 1 );
  9.  
  10. }
  11. }

Category: Flash | Comments off