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

Simple and Stylish Rotating Gallery - Black

stylish_rotating_gallery

- This is a simple stylish rotating gallery component. With this component you can show small images as a slideshow from some place or event. You can also place a date of that event in the text bar in the middle.
- The slideshow can be paused on the button in the upper middle.

- This component can be used to show images of your product and place short description in the textbar. Slideshow component can show up to 20 slides. Please edit your images to be 600 pixels width by 230 pixels height.

- Package includes: fla, swf, js and HTML for embedding in your website, and the readme file folder for images.

- This component can be viewed with Flash Player 7 and above.

Here is the grey version of it grey version

Multiple Gallery v3

flash_multiple_gallery_component_v3

- This is dynamic multiple gallery component. You can load several galleries at the same time, and show the images as a slide show.
- The image and the gallery widget are floating so you can move them all over the screen.
- It supports fullscreen and you can play/pause the slide show. In addition you can colapse/uncolapse the widget for more/less space.
- It was used Flash IDE and AS3 code for this component. Please edit the settings file.

Five Preloaders Pack

five-preloaders-pack

- This is the five preloaders pack. It has 5 preloaders developed with flex sdk 4.5 and plain AS3. They are freely available for download at the top link. You can use the code, modify it and use it for you own purposes. Change some variables and get new variations of preloaders.

Advanced Banner Rotator

advanced-banner-rotator

- This is the advanced banner rotator component. It was used flex sdk 4.5 and plain AS3 code for development. So you can use it with Flash IDE also.
- Use settings.xml file to adjuct or modify the look of the component.
- It has 3 modes of work "text-image", "image-text" and just "image". The main goal of this component is to add text and image at same time when there is a need and show the all banners as a slide show.
- But also it can be used as image only slide show. So you can edit your own images and show them instead of the text.
- You can hide/show buttons, change bar color, background color, text color etc...
- You can add or aply css style of the text (use style.css for that).

See the description of the settings.xml.

Simple Banner Rotator V1

simple-banner-rotator-v1

- You can position the bar only once.
- The price is 4$.
- This component can be used in cases when you have to show images and also show some description or date when the event happened.
- It was used flex sdk 4.5 and plain AS3 code so you can use the same code for Flash IDE and other older flex sdk versions. It is mean to be simple and easy for use and installment but also for modifications.

Simple Banner Rotator V2

simple-banner-rotator-v2

- It was used opensource flex sdk version 4.5 to develop this component. AS3 based.
- The structure is based on OOP concepts so the code can be modified and new things can be added  easily because it is modular.
- Use the settings.xml file to change way of things appear on the component. The difference between the V1 and V2 is that you can position the bar wherever you want while at the V1 you can set up only one position with the settings.xml file.
Please read the description of the component below. If you have any questions or suggestions please email me at spinnerbox2000 [at] gmail [dot] com. Cheers :)

Ultimate Carousel 3D

ultimate_carousel_3d

This is the Ultimate Carousel 3D navigation component. It can be used to show images or products in both png and jpg format. Also, you can edit the XML file and change the title and the description of every product.

You can change the title for you products, for example. Also, you can change the background color. There are 7 predefined colors: black, gray, brown, red, blue, green and yellow. Edit the backColor to change this part.

If you have a product page, edit the XML to redirect the user to that page. This component has that option i.e button for redirection. You can also change the text of th button for example: "Go to product Page".

This component has also customText tag which shows in the bottom of the carousel. You can leave this tag blank or you can place custom text or other info for each product (image) if you have.

There are examples for this issues.

This component works with Flash Player 8 and above. Please use the tips in the readme file on how to edit the XML file.

The package includes: html, js, swf, fla, readme.txt, ad images folder

For any questions please send me email at spinnerbox2000@gmail.com

Jelly Mp3 PLayer V2

This is the Jelly like mp3 player version 2

jelly_audio_mp3_player_v2

- This is an audio MP3 player which loads data from XML file. You can place up to 100 songs in a playlist. All of them are shown in a list.

- Also, this player works with pictures so, if there is a picture in the album, it will be shown. Open the XML file and edit the properties.

- This player works with Flash Player 7 and above. Included files are mp3player.swf, XML file for data, folders for pictures and images and HTML sample and js file for embedding in a website.

- It also has the options to shuffle the songs and repeat the playlist from the top.

This is the new version of the same player with repaired parts. Now it doesn't load until play button is pressed.

USB Preloader :)

This is the USB like preloader  :)

USB Preloader

- This is USB like preloader with fancy loading effect which changes color from green to red :)
It is used plain AS3 code for this component so the source can be used to make variants or modifications to the component. I will be compatible with older versions of flex sdk like 3.6 but also 4.5. But you can use the code with Flash IDE aswell.

Sand Clock Preloader :)

See this fancy sand clock preloader.

Sand Clock Preloader

 - This is the Sand Clock preloader. It is used plain AS3 code with flex sdk 4.5. But you can use also flex sdk 3.6 for flash player 9. Also you can use it in Flash IDE if its the way you prefer. There are AS3 classes so use them to import into your project, or make modifications to it.

- Always use the format 100 - percent because it is reversed mechanism i.e the loading starts from 100 to 0 so in order to get the right pecent in the textfield dont change the 100 - percent logic.

Repaired links

Some of the links were incorrect, so now they are repaired. Please visit my page at spinnerbox 0n flashcomponents