FXG - Inkscape demo

This is the demo I managed to develop using the flex sdk 4.6, Flash Develop 4 and Inkscape.
Click on the image and the light bulb will turn on and off. It is that easy to add other flash functionality to an fxg graphic.



Here is the code I used to develop this demo:

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import resources.BugattiVeyron;

    public class Main extends Sprite
    {
        private var bugatti:BugattiVeyron;
        private var lightBulb:Sprite;
        private var lightOn:Boolean;
        private var cable:Sprite;
        private var lighBulbSize:int;
      
        public function Main():void
        {
            if (stage)
                init();
            else
                addEventListener(Event.ADDED_TO_STAGE, init);
        }
      
        private function init(e:Event = null):void
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
          
            // general settings
            lightOn = true;
            lighBulbSize = 40;
          
            // add the bugatti veyron fxg graphic
            bugatti = new BugattiVeyron();
            bugatti.addEventListener(MouseEvent.CLICK, clicked);
            addChild(bugatti);
          
            // create the light cable
            cable = new Sprite();
            cable.graphics.lineStyle(2, 0x000000);
            cable.graphics.moveTo(60, 0);
            cable.graphics.lineTo(60, 60);
            addChild(cable);
          
            // create the light bulb that hangs on the cable
            lightBulb = new Sprite();
            lightBulb.graphics.lineStyle(1, 0xFBEC5D);
            lightBulb.graphics.beginFill(0xEEE8AA);
            lightBulb.graphics.drawEllipse(lighBulbSize, lighBulbSize, lighBulbSize / 2, lighBulbSize / 2);
            lightBulb.graphics.endFill();
            lightBulb.x = 10;
            lightBulb.y = 10;
            addChild(lightBulb);
        }
      
        public function clicked(e:MouseEvent):void
        {
            if (lightOn)
            {
                lightBulb.graphics.clear();
                lightBulb.graphics.lineStyle(1, 0x8B8B83);
                lightBulb.graphics.beginFill(0xCBCAB6);
                lightBulb.graphics.drawEllipse(lighBulbSize, lighBulbSize, lighBulbSize / 2, lighBulbSize / 2);
                lightBulb.graphics.endFill();
                lightOn = false;
            }
            else
            {
                lightBulb.graphics.clear();
                lightBulb.graphics.lineStyle(1, 0xFBEC5D);
                lightBulb.graphics.beginFill(0xEEE8AA);
                lightBulb.graphics.drawEllipse(lighBulbSize, lighBulbSize, lighBulbSize / 2, lighBulbSize / 2);
                lightBulb.graphics.endFill();
                lightOn = true;
            }
        }
   
    }

}


preety neat isnt it :)

FXG with Inkscape plugin tryout

- In this tryout I tried the fxg plugin for Inkscape. You can find them here svg2fxg.inx and svg2fxg.xsl Download them and put them in the Inkscape/share/extensions folder in Program Files on windows.
- Start  Inkscape and draw something. You have to have the option to save the document as an fxg file if the extension was succesffuly installed.

- So I used a Bugatti veyron image as a schetch to draw a vector based bugatti veyron in Inkscape
This is the result:

I created the image in Inkscape and saved it as BugattiVeyron.fxg. Then I created  flex sdk 4.6 and Flash Develop 4, AS3 plain project and imported this graphic onto the stage. Althoug I get some errors after compilation if you press the continue button in FlashDevelop and dissmis all errors afterwards you will get the above image. So it surely does work but with some errors.

Here is the code I used for the AS3 project

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import resources.BugattiVeyron;
   
     public class Main extends Sprite
    {
        private var bugatti:BugattiVeyron;
      
        public function Main():void
        {
            if (stage)
                init();
            else
                addEventListener(Event.ADDED_TO_STAGE, init);
        }
      
        private function init(e:Event = null):void
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
          
            // add the bugatti veyron fxg graphic
            bugatti = new BugattiVeyron();
            addChild(bugatti);
          
          }
      }

}

Surely you can use the Inkscape to export fxg graphics, but for the errors I get I will try to make another tutorial.

Cheers :)