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 :)

FXG editor, pros and cons

In this post I will write about the FXG editor pros and cons. But as far as I was able to test it I am more not satisfied than satisfied :(

link to installation of the editor 

Here is a test image which I drew with the FXG editor:

 

Pros:

- This tool is good for fast and easy drawing, i.e things that are simple and easy to draw, like patterns, square shapes, circular shapes etc...

- It has lots of prebuilt tools for drawing, like circle, square, free hand drawing tool, bezier curve point to point tool,

- You can load image and strech it or rotate it.(See the monitor)

- You can add whichever shape and convert it to a path and edit it with the end-points, which is preety handy. (The romboid on the right top part of the image)

-  You can add a mask to an object to mask other objects.

Cons:

- You cannot adjust the alignment of the text i.e no left, justified, right alignment. You have to do it mannualy with space :) (I couln't align the text in the center)

- If you delete something you cannot restore it with ctrl-z.

- You have to add the "fxg" extension mannually :(

- If you load a saved file, it is more likely that the image showed will be changed by some not known circumstances :) and it will look different than the original. So you have to make again changes in order to restore it to the original. (the computer cable is brown instead of dark grey).

- You can import image only using URL path. There is no browse button so if you want to load image from local file system you have to open the image in browser and that copy and paste the the url into the URL field. Example:

- You cannot name a group with id attribute i.e there is no option for that in the right click menu. That means you cannot use the group like a MovieClip or Sprite in you AS3 project if you dont edit the fxg code yourself.
BTW if you add id attribute to different group elements in the fxg code if you load it again the editor will erase the id attributes :(

- There is no zooming option.

- If you add very small object on the stage, you are not able to move it properly. When you try that the mouse selects the object handles for streching and rotating so instead of moving you get streching and rotating functionality.

All in all this is not a tool for proffesional production of FXG file and its usage, but if you have small task it will do your job perfectly.

Speaker created using FXG and FXG editor AIR application

This is the image i deveoped using only the FXG editor which is an AIR application.

Quite good isn't it :)

FXG is an adobe xml specification format for creating vector based graphics, so you would be able to create graphics from scratch using only code. This format is good for people that need opensource solution for fast and easy creating and editing graphics. But also it can be used with most of graphics editing programs like Adobe Ilustrator, Adobe Fireworks,  Microsoft Expression Blend , FXG editor AIR app, Inkscape with FXG plugin, etc... You can edit vector based graphics and export it as an fxg file format which than can be used in Flash/Flex/AS3 based projects.

There are two versions by now for FXG format,  version 1 and 2.
FXG is much like SVG format but its not the same, there are lots of differences. But the main goal is the same.

This is just an intro to FXG, i will add some more content on version 1 and 2 and differences, pros and cons.

Happy flashing :)