Playing around with Stencyl

Recently I started some development in Stencyl and I managed to publish something on this link:

http://www.stencyl.com/game/play/21785

Its still work in progress.

How I didn't have this tool before. Its really intuitive and really easy to use. It has many tools that ease your delopment process. I built the keyboard controller functionality in just several clicks. I also could animate the main character in just several clicks.

Can't wait to test it all and develop my first game with Stencyl. Wish me luck :)

Conquering Europe - Cities

I have recently created second version of the game "Conquering Europe" but now you play with European cities. You can play it also on kongregate at here

Conquering Europe

I finally uploaded my game online, you can play it here

Cheers :)

Educational game

Currently working on my educational game, a "Guess the country" type of game.

I already added lot of stuff and its working, but I plan to add part with capitols. Wish me luck to finish it until first of july. Cheers :)

Here are some development screenshots

My first game

At last guys, I finished my first game  :) Please visit at http://www.kongregate.com/games/spinnerbox/space-invasion-first-contact

Let me know your thoughts on it, howe to improve or what to add

Building the secret weapon :)))

Easiest way to make animation from png spritesheet

In this tutorial I will show you how I made an aimation using just 8 png images from a sprite sheet. I suppose this is the most easiest and straigt forward way to do it. There are tools like TexturePacker but I will skip it in this tutorial and concentrate only on the mechanics how I did this animation.

I assume that you have installed FlashDevelop and have created blank AS3 project named SpriteAnimation in a folder with the same name. The project has white background, 30 fps and it is 200x200 size.

I will use this sprite sheet that I found on internet for free to be exact on this site as3gamegears

 

So this is a field scarecrow that has a sprite sheet of 8 postions. I used Gimp to divide this 8 postions into 8 png images which are 64x64 pixels. The mechanism to create animation from this 8 images is simple: take all images, put them in a AS3 Sprite and each frame change visibility of each image. So we go first image is visible all other are invisible, then first image is invisible second is visible, all other are invisible. Than third image is visible all other are invisible etc...

When we show the 8-th image we switch back to the first and repeat the same process again.

I created a folder in my FlashDevelop project called assets where I put all eight images.

I also created separate class named Scarecrow that will hold all images inside and keep track which image should be shown next.

So here is the code of Scarecrow.as

package 
{
    import flash.display.DisplayObject;
    import flash.display.Sprite;
    import flash.events.Event;
    /**
     * ...
     * @author SpinnerBox
     */
    public class Scarecrow extends Sprite
    {
        [Embed(source = "/../assets/pic1.png", mimeType="image/png")]
        private var Pic1:Class;
        private var pic1:DisplayObject = new Pic1();
       
        [Embed(source = "/../assets/pic2.png", mimeType="image/png")]
        private var Pic2:Class;
        private var pic2:DisplayObject = new Pic2();
       
        [Embed(source = "/../assets/pic3.png", mimeType="image/png")]
        private var Pic3:Class;
        private var pic3:DisplayObject = new Pic3();
       
        [Embed(source = "/../assets/pic4.png", mimeType="image/png")]
        private var Pic4:Class;
        private var pic4:DisplayObject = new Pic4();
       
        [Embed(source = "/../assets/pic5.png", mimeType="image/png")]
        private var Pic5:Class;
        private var pic5:DisplayObject = new Pic5();
       
        [Embed(source = "/../assets/pic6.png", mimeType="image/png")]
        private var Pic6:Class;
        private var pic6:DisplayObject = new Pic6();
       
        [Embed(source = "/../assets/pic7.png", mimeType="image/png")]
        private var Pic7:Class;
        private var pic7:DisplayObject = new Pic7();
       
        [Embed(source = "/../assets/pic8.png", mimeType="image/png")]
        private var Pic8:Class;
        private var pic8:DisplayObject = new Pic8();
       
        private var picsObject:Object;
        private var currentPic:uint;
        private var animCounter:uint;
        private var nextPicTime:uint;
       
        public function Scarecrow()
        {
            picsObject = new Object();
            currentPic = 1;
            nextPicTime = 3;
            animCounter = 0;
           
            addChild(pic1);
            picsObject["1"] = pic1;
           
            pic2.visible = false;
            addChild(pic2);
            picsObject["2"] = pic2;
           
            pic3.visible = false;
            addChild(pic3);
            picsObject["3"] = pic3;
           
            pic4.visible = false;
            addChild(pic4);
            picsObject["4"] = pic4;
           
            pic5.visible = false;
            addChild(pic5);
            picsObject["5"] = pic5;
           
            pic6.visible = false;
            addChild(pic6);
            picsObject["6"] = pic6;
           
            pic7.visible = false;
            addChild(pic7);
            picsObject["7"] = pic7;
           
            pic8.visible = false;
            addChild(pic8);
            picsObject["8"] = pic8;
           
            addEventListener(Event.ENTER_FRAME, playAnimation);
           
        }
       
        public function setPicVisible(picNum:uint):void
        {
            for (var i:int = 1; i <= 8; i += 1)
            {
                var strPicNum:String = String(i);
                if (i == picNum)
                {
                    picsObject[strPicNum].visible = true;
                }
                else
                {
                    picsObject[strPicNum].visible = false;
                }
            }
        }
       
        public function playAnimation(e:Event = null):void
        {
            if (animCounter >= nextPicTime)
            {
                setPicVisible(currentPic);
                if (currentPic == 8)
                {
                    currentPic = 1;
                }
                else
                {
                    currentPic += 1;
                }
                animCounter = 0;
            }
            else
            {
                animCounter += 1;
            }
        }
    }

}

A little on the Scarecrow.as class:

- I created object named picsObject that will hold all image objects and therefore all image will be accessible by just typing picsObject[String(picNum)]. First I set all 7 images to be invisible but just the first is visible. 

 - Then I create a function called setPicVisible(picNum) that will show only the image that corresponds to the picNum parameter. 

- Next is the playAnimation(e:Event = null)  that works on ENTER_FRAME event and will play the animation on each frame. One thing to note that the frame rate is 30 fps which will be too much for our animation so I switch image on each third frame instead of each next frame. I do that by using this simple if (animCounter >= nextPicTime) / else  statement. 

My Main.as class looks like this

package
{
    import flash.display.Sprite;
    import flash.events.Event;
   
    /**
     * ...
     * @author SpinnerBox
     */
    public class Main extends Sprite
    {
        private var scarecrow:Scarecrow;
       
        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);
            // entry point

            scarecrow = new Scarecrow();
            scarecrow.x = 50;
            scarecrow.y = 50;
            addChild(scarecrow);
        }
       
    }
   
}

I just created new Scarecrow object and added it on the stage.

Well here is the result:

Collision detection - Hero vs Multiple enemies

Hi. In this tutorial I will show you how to use QuadTree implementation in AS3 to detect whether a Hero object on the stage colide with many Enemy objects.

I asume you have installed FlashDevelop and created AS3 blank project called CollisionDetection in folder with same  name.

Firstly I reused a code from other site but mine code is implemented fully in AS3 and is fitted to suit my needs i.e checking if a Hero object collides with many Enemies. First I recommend read the tutorial from the site before implementing it in AS3. Roughly QuadTree is a data structure that has 4 and only 4 child nodes. It is the same principal as binary tree except it has two child nodes.

How do we use the QuadTree structure to detect collision detection???

Well we can create arrays of objects and use "for loops" to cycle trough each object and check for collision, but the problem that arises is that we might have many operations per frame (in games) so that might crash flash or not work at all on slower computers. So we use a QuadTree to separate the 2D space in 4 subparts and check if there is a collision between objects in a smaller area.
There is no need to check objects that are on the different sides of the stage.
During the separation we check if objects are fitted in quadrant. If there are many objects in a given quadrant we separate that quadrant into again four subquadrants and check again.

First create three folders uder the root of the FlashDevelop project. Call them CollisionDetectionPkg, EnemyPkg, and HeroPkg.

In CollisionDetectionPkg add new blank AS3 class and name it QuadTree.as.
In EnemyPkg add new AS3 class and name it Enemy.as
In HeroPkg follows the same thing, add blank class Hero.as

Our Main.as class will be manager for adding multiple enemies and also do all the stuff for checking and retrieving objects that might collide with Hero object.

QuadTree.as

package CollisionDetectionPkg
{
    import flash.display.DisplayObject;
    import flash.display.Sprite;
    import flash.geom.Rectangle;

    public class QuadTree
    {
        private var _stage:DisplayObject;
        private var MAX_OBJECTS:int = 10;
        private var MAX_LEVELS:int = 5;
       
        private var level:int;
        private var objects:Array; // sprites that are put on the stage
        private var bounds:Rectangle;
        private var nodes:Array; //array of QuadTree objects
       
        /*
          * Constructor
        */
        public function QuadTree(pLevel:int, pBounds:Rectangle, stage:DisplayObject)
        {
            _stage = stage;
            level = pLevel;
            objects = new Array();
            bounds = pBounds;
            nodes = new Array(4);
        }
       
        /*
         * Clears the quadtree
         */
        public function clear():void
        {
            for (var i:int = 0; i < objects.length; i += 1)
            {
                if (objects[i] != null)
                {
                    objects.splice(i, 1);
                }
            }
           
            for (var j:int = 0; j < nodes.length; j += 1)
            {
                if (nodes[j] != null)
                {
                    nodes.splice(j, 1);
                }
            }
        }
       
        /*
         * Splits the node into 4 subnodes
        */
        private function split():void
        {
            var subWidth:int = int(bounds.width / 2);
            var subHeight:int = int(bounds.height / 2);
            var x:int = int(bounds.x);
            var y:int = int(bounds.y);
           
            nodes[0] = new QuadTree(level + 1, new Rectangle(x + subWidth, y, subWidth, subHeight), _stage);
            nodes[1] = new QuadTree(level + 1, new Rectangle(x, y, subWidth, subHeight), _stage);
            nodes[2] = new QuadTree(level + 1, new Rectangle(x, y + subHeight, subWidth, subHeight), _stage);
            nodes[3] = new QuadTree(level + 1, new Rectangle(x + subWidth, y + subHeight, subWidth, subHeight), _stage);
        }
       
        /*
         * Determine which node the object belongs to. -1 means
         * object cannot completely fit within a child node and is part
         * of the parent node
         */
        private function getIndex(pRect:Rectangle):int
        {
            var index:int = -1;
            var verticalMidpoint:Number = bounds.x + (bounds.width / 2);
            var horizontalMidpoint:Number = bounds.y + (bounds.height / 2);
           
            // Object can completely fit within the top quadrants
            var topQuadrant:Boolean = (pRect.y < horizontalMidpoint && pRect.y + pRect.height < horizontalMidpoint);
            // Object can completely fit within the bottom quadrants
            var bottomQuadrant:Boolean = (pRect.y > horizontalMidpoint);
 
            // Object can completely fit within the left quadrants
            if (pRect.x < verticalMidpoint && pRect.x + pRect.width < verticalMidpoint)
            {
                if (topQuadrant)
                {
                    index = 1;
                }
                else if (bottomQuadrant)
                {
                    index = 2;
                }
            }
            // Object can completely fit within the right quadrants
            else if (pRect.x > verticalMidpoint)
            {
                if (topQuadrant)
                {
                    index = 0;
                }
                else if (bottomQuadrant)
                {
                    index = 3;
                }
            }
       
            return index;
        }
       
        /*
         * Insert the object into the quadtree. If the node
         * exceeds the capacity, it will split and add all
         * objects to their corresponding nodes.
         */
        public function insert(pRect:Sprite):void
        {
            if (nodes[0] != null)
            {
                var index:int = getIndex(pRect.getRect(_stage));
               
                if (index != -1 && nodes[index] != null)
                {
                    nodes[index].insert(pRect);
                    return;
                }
            }
           
            objects.push(pRect);
       
            if (objects.length > MAX_OBJECTS && level < MAX_LEVELS)
            {
                if (nodes[0] == null)
                {
                    split();
                }
               
                var i:int = 0;
                while (i < objects.length)
                {
                    var index1:int = getIndex(objects[i].getRect(_stage));
                    if (index1 != -1 && nodes[index1] != null)
                    {
                        nodes[index1].insert(objects[i]);
                        objects.splice(i, 1);
                    }
                    else
                    {
                        i += 1;
                    }
                }
            }
           
        }
       
        /*
         * Return all objects that could collide with the given object
         */
        public function retrieve(returnObjects:Array, pRect:Sprite):Array
        {
            var index:int = getIndex(pRect.getRect(_stage));
          
            if (nodes[0] != null && index != -1 && nodes[index] != null)
            {
                nodes[index].retrieve(returnObjects, pRect);
            }
       
            for (var i:int = 0; i < objects.length; i += 1)
            {
                if (objects[i] != null)
                {
                    returnObjects.push(objects[i]);
                }
            }
       
            return returnObjects;
         }
    }

}
-----------------------------------------------------------------------------------------------------------------

Enemy.as

our Enemy is 50x50 white rectangle with red border

 



package EnemyPkg
{
    import flash.display.Sprite;
    import flash.events.Event;
    /**
     * ...
     * @author SpinnerBox
     */
    public class Enemy extends Sprite
    {
        private var unitSprite:Sprite;
        private var _main:Main;
       
        public function Enemy(main:Main)
        {
            _main = main;
            unitSprite = new Sprite();
            unitSprite.graphics.lineStyle(2, 0xff0000, 1);
            unitSprite.graphics.beginFill(0xffffff, 1);
            unitSprite.graphics.drawRect(-25, -25, 50, 50);
            unitSprite.graphics.endFill();
            addChild(unitSprite);
           
            addEventListener(Event.ENTER_FRAME, onEnterFrame);
        }
       
        public function destroy():void
        {
            removeEventListener(Event.ENTER_FRAME, onEnterFrame);
            _main.stage.removeChild(this);
        }
       
        private function onEnterFrame(e:Event):void
        {
            this.x -= 2;
        }
       
    }

}
--------------------------------------------------------------------------------------------------------

Hero.as

Our hero is 60x60 white rectangle with green border

package HeroPkg
{
    import flash.display.Sprite;
    /**
     * ...
     * @author SpinnerBox
     */
    public class Hero extends Sprite
    {
        private var unitSprite:Sprite;
       
        public function Hero()
        {
            unitSprite = new Sprite();
            unitSprite.graphics.lineStyle(2, 0x00ff00, 1);
            unitSprite.graphics.beginFill(0xffffff, 1);
            unitSprite.graphics.drawRect(-30, -30, 60, 60);
            unitSprite.graphics.endFill();
            addChild(unitSprite);
        }
       
    }

}
---------------------------------------------------------------------------------------------------------

and Main.as

In main we add ENTER_FRAME listener to add new enemies and to check collisions using the QuadTree constructed in the constructor.
Note: We can use hitTestObject function only on DisplayObject or Sprite types of objects in AS3 so in insert() and retrieve() we send Sprite type of object instead of Rectangle and then we get the bounding rectangle by using getRect() function and sending  main.stage object to it like this

objects[i].getRect(_stage);

Remeber that _stage = main.stage. Once that our Hero rectangle has collided with enemy the enemy object gets destroyed.

package
{
    import CollisionDetectionPkg.QuadTree;
    import EnemyPkg.Enemy;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.display.StageScaleMode;
    import flash.geom.Rectangle;
    import HeroPkg.Hero;
  
    /**
     * ...
     * @author SpinnerBox
     */
    public class Main extends Sprite
    {
        private var enemyArray:Array;
        private var enemy:Enemy;
        private var hero:Hero;
        private var unitCounter:uint = 0;
        private var unitRate:uint = 40;
        private var quadTree:QuadTree;
      
        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);
            // entry point
            stage.scaleMode = StageScaleMode.NO_SCALE;
          
            quadTree = new QuadTree(0, new Rectangle(0, 0, 700, 550), this.stage);
            enemyArray = new Array();
          
            hero = new Hero();
            hero.x = 100;
            hero.y = 200;
            stage.addChild(hero);
      
            addEventListener(Event.ENTER_FRAME, onEnterFrame);
        }
      
        private function onEnterFrame(e:Event = null):void
        {
            hero.x = stage.mouseX;
            hero.y = stage.mouseY;
          
            if (unitCounter >= unitRate)
            {
                for (var i:uint = 1; i <= 5; i += 1 )
                {
                    var enemy:Enemy = new Enemy(this);
                    enemy.x = 750;
                    enemy.y = i*100;
                    stage.addChild(enemy);
                    enemyArray.push(enemy);
                }
              
                unitCounter = 0;
            }
            else
            {
                unitCounter += 1;
            }
          
            quadTree.clear();
            for each( var newEnemy:Enemy in enemyArray)
            {
                quadTree.insert(newEnemy);
            }

            var returnObjects:Array = new Array();

            quadTree.retrieve(returnObjects, hero);
            for (var k:int = 0; k < returnObjects.length; k += 1)
            {
                // Run collision detection algorithm between enemies and hero
                if (returnObjects[k].hitTestObject(hero))
                {
                    if (returnObjects[k].parent != null)
                    {
                        returnObjects[k].destroy();
                        returnObjects.splice(k, 1);
                    }      
                }
            }
          
          
            // clear memory from returned objects
            for (var m:int = 0; m < returnObjects.length; m += 1)
            {
                if (returnObjects[m] != null)
                {
                    returnObjects.splice(m, 1);
                }
            }
          
            // clear enemies if they reach x = -100
            for (var j:uint = 0; j <= enemyArray.length; j += 1 )
            {
                if (enemyArray[j] != null && enemyArray[j].x < -100)
                {
                    enemyArray[j].destroy();
                    enemyArray.splice(j, 1);
                }
            }
        }
    }
  
}

 Final result: When green square touches red square they get destroyed.

I tried the compiled swf file on old Intel Celeron machine and it works still fairlly smooth.

Again thanks to TutsPlus and Steven Lambert for his awesome tutorial. Cheers :)

Shooting in direction

http://www.benoitfreslon.com/actionscript-throw-bullets-to-mouse-direction Really useful post

Flash Professional - Hellcat :)

Looks nice. Anyways I still go with FlashDevelop :))

Flash Professional Hellcat

Preformace tunning

Some links about tunning your flash application or game:

http://gskinner.com/talks/quick/

http://gamedev.michaeljameswilliams.com/2010/02/10/optimise-as3-for-speed/

Drawing dashed lines in AS3

Lovely post over here, drawing dashed lines in AS3 using simple lineTo/From and using path http://fatlinesofcode.philipandrews.org/2010/07/22/drawing-a-dashed-line-using-the-as3-drawing-api/

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

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.