Tiny mp3 player tutorial using the xml editing tool

In this post I will examples on how to use the xml editing too that comes with tiny mp3 player component.

Here is a sample image of it:

The editor part are closely related to the structure of the xml playlist file that comes with the tiny mp3 player. Each song tag contains 4 attributes: dir, band, songTitle and songAlbum.

- dir is for directory i.e path of the sound file
- band is the name of the artist or band that composed the song. It will be shown on the player.
- songTitle is the name of the song
- songAlbum is the name of the album.

So to add new song to the playlist firts fill in the four textfields on the left and than press add song.
You can edit the generated xml at any time in the right panel. If you want to clear the generated xml press reset.

Here is a sample image of one song added:

Ok, so after adding 4 songs to the playlist the xml looks like this:

Now when finished editing open the playlist file which comes with the package and clear all text, copy the xml from the editor and paste it into the playlist.xml file. Than save it. thats it, you are done editing the xml file. Now you are ready to use the player.

Note: you can use also special characters from UTF-8 encoding

cheers :)

Five MP3 Players pack published

Hi. visit these pages, five mp3 players pack on flashcomponents.net and five mp3 players pack on flashdo.com

It includes

- jelly mp3 player v2

- dark blue jelly mp3 player

- ultimate mp3 player - includes the tool for trying different colors of background and the player

- tiny mp3 player - includes the xml editor tool for fast and easy editing the xml file

- small mp3 player

in one of the next posts I will add simple tutorial on how to use the xml editing tool that comes with  the tiny mp3 player

 cheers :)

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

Sand Clock preloader how to...

Firstly here is the page of the preloader sand-clock-preloader

Quick preview of the component

The package includes  6 files, but the important for this tutorial are:

- Bottle.as
- SandClock.as
- SandClockPreloader.as

The first three are not relevant to this tutorial so I will not talk about them. The second three are what we are after.

Bottle.as

- Bottle.as is a class for showing the upper or lower glass pot of the sand clock. So SandClock.as instansiates two Bottle.as objects, one of which is flipped 180 degrees.
- I use drawPath command to draw the shpe of the upper/lower bottle. You can go and change the color of the glass but the quartz is most common for glass like objects. For drawing free shapes using the Graphics class please visit this sample

SandClock.as

- SandClock.as is the sand clock class which contains all it parts, like the two bottles, and the three wooden parts that hold the bottles.

- Find the liquidColor color in SandClock.as to change the color of the liquid. For example you can make it blue like some blue coctail or something :) 

- Find darkWoodColor and chocolateColor to change the fill and the stroke of the wooden parts accordingly.

 For example you can make them look like steel.  

- Find the tformat = new TextFormat(); segment on the bottom of the constructor to hange the formating of the preloader text. Maybe change font or color, size etc...

- SandClock.as has one very important function, it is called 

public function redrawBottle(percent:Number):void

{

       //code here......

}

This function draws the bottles with certain number of percents i.e how much percent is loaded in both upper and lower bottles. So if I use redrawBottle(49) that means the Sand clock will be redrawn to show (49%)  of the upper and (49%) of the lower bottle filled. (see above sample image).

SandClockPreloader.as

Has all the code you need to start using the sand clocl preloader. Here is a code part of it

        public function SandClockPreloader():void
        {
            delay = 100;
            repeat = 100;
            timer = new Timer(delay, repeat);
            timer.addEventListener(TimerEvent.TIMER, onTimerEvent);
            timer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);

            // add preloader
            sandClock = new SandClock();
            sandClock.x = 300;
            sandClock.y = 135;
            sandClock.scaleX = sandClock.scaleY = 0.8;
            addChild(sandClock);
            timer.start();
        }

        public function onTimerEvent(e:TimerEvent):void
        {
            // when using redrawBottle() always use
            // 100 - percent because of the logic of the
            // preloader. It starts with 100% so
            // 100 - percent in order to start with 0%
            percentLoaded = 100 - timer.currentCount;
            sandClock.redrawBottle(percentLoaded);
        }

        public function onTimerComplete(e:TimerEvent):void
        {
            timer.reset();
            timer.start();
        }

As you can see i add timer for loading animation. But when using something to load you will measure the loading progress with the bytesLoaded and bytesTotal properties with Loader object. Have a look on the onTimerEvent function. I use these lines  

   percentLoaded = 100 - timer.currentCount;
   sandClock.redrawBottle(percentLoaded);

The mechanics is reversed i.e it goes from 100 to 0. Thats why I use 100 - percent in this case timer.currentCount. So that means you should do the same because it will now work properly. 

Next is the Loader example on how to use the redrawBottle function
 
     var swfLoader:Loader; 
 
     function loadSwf(url:String):void { 
           // Set properties on swfLoader object 
           swfLoader= new Loader(); 
           swfLoader.load(new URLRequest(url));                                                                                     swfLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, swfLoading); 
           swfLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, swfLoaded); 
     } 
    
     loadSwf("SandClockDemo.swf"); 
      
     function swfLoaded(e:Event):void { 
              // Load Image 
              swfContainer.addChild(swfLoader); 
     } 


     function swfLoading(e:ProgressEvent):void {
          percentLoaded = 100 - (e.bytesLoaded*100 / e.bytesTotal);
          sandClock.redrawBottle(percentLoaded); 
      }
 It uses ProgressEvent bytesLoaded and bytesTotal properties to get the loaded percent and subtract from 100 to get the real percent suitable for this component.


You might wanna visit this tutorial, it works with loading images but with swf is the same, just change the extension.


Happy flashing :)

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