Game Development with Flex and Action Script 3.0 -Baloon Shooter

What buddies, quiet excited about the title??Now I am going to narrate how i have developed a simple game with flex.

Development of Game Characters :

In this Game we have three game characters they are Balloon,Bow and Arrow.The Balloon.as Class is the balloon object which is formed by drawing a ellipse with a tail.The Balloon class has also motion associated with it and also a method to burst the balloon.In burst balloon we have redrawn the ellipse and changed the motion towards the land.

Next comes the Bow.as class which serves as a Bow on screen.This Object is made by drawing a curve and line(String to pull).The Bow Contains the pull Arrow method which makes the string line to curve based on the value that is passed.

Then we have the Arrow.as class which forms the Arrow object .This is also done by drawing line and then a triangle like appearance at the left end.

Development Of the Game Field

We have all the Game Objects in our hand and now we have to develop the field to put these objects together to watch the action.For this we have the BalloonField.mxml which has everything to make this happen.

In the Balloon Field I have a set Timer method  which is going to generate balloons at equal intervals starting from random  positions and with random speed.

Balloon Movement

On every Tick of the Timer tick method will be called which creates balloon instances with move effect from bottom to top with random durations.The reference  of each move associated with a balloon will be tagged with associated balloon so that when the balloon bursts that tagged move effect’s moveYTo property will be changed to the height of application so that it starts moving  downwards.

On every end of the balloon’s move effect(after that has been out of the screen ) that balloon object will be removed from the stage.

Bow and Arrow Pulling

When you press CTRL key loadArrow method will be called which creates a Arrow instance and a move effect instance will be associated with the arrow.The move effect will be moving the arrow from left to right.Like in case  of Balloon Movement, in Arrow Movement also when the move effect is completed for the arrow the arrow is removed from the stage.

After loading the arrow when u hold space for some time u can see the bow’s string pulling the arrow producing a real effect of arching.You know how this has been done??I have started a timer on key down event and i am drawing a curve for a specified radius and on key up event  the timer is stopped and the curve is again redrawn as  a line .

When the timer is stopped the bow is brought back to normal state and the arrow is launched with the speed proportional to the “SPACE BAR” key holding time.

Collision Detection

The collision detection part in this game is done by maintaining two separate collections  for holding the enemy(balloon here..) and the other for holding the weapon(arrow).

Then on Enterframe event the two enemy and weapon collection are checked with each other for their positions(x and y) for  overlapping or touching each other.If they do so,then the enemy object (i.e balloon ) is said to get hit and hence at this stage the balloon is said to burst and fall downwards.

DownloadSource

View Demo

Note :

This may also have bugs, i will soon test it and publish a new version.

Game Instructions

• Press CTRL to load arrow
• Press and Hold SPACE bar to pull the arrow
• Release SPACE Bar to shoot at the target.

Any comments to improve the game and any better algorithm for collision detection are welcome.

Cheers.

Digital Clock in Flex

Hi Friends,

I have a class called seven segment display which contains seven segments to display a digit.The Digital clock has six seven segment display to display the time.In Digital clock class we have a timer which fetches  system time and separates the hours,minutes and seconds and displays it in the respective seven segment display ,this is repeated for every  992 milli seconds ,which simulates a digital Clock.

View Demo

Download Source

Analog Clock In Flex

Hi Folks,

Here comes the analog clock in Flex,in this i have a component called wall clock  in which we have a circle,minutes hand,hours hand and seconds hand.

Each Hands of the clock is a line drawn from the center of the circle to the circumference at an angle.The following post http://www.flashandmath.com/ helped me in drawing a line with specified angle.

The seconds hand line will be drawn and cleared every second,since the full angle in a circle is 360 and the no of seconds per minute is 60 for each second, the seconds hand line will be drawn with an incremented angle of 6 degrees.

The seconds hand keeps on ticking and when 60 ticks have been completed the tickcounter angle will be 180 so at that time i have increased the angle of minute hand to another 6 degrees.This Continues so that minute hand is moved at the rate  of  6 degrees per minute.

The Hours hand is moved at the rate of 6 degree per 12 minutes.

Download Source :

View Demo

Flex Event Calender

Hi Folks,

I have build a Event Calender based on the Dynamic calender at http://www.thetechlabs.com/.

The Dynamic calender has all the basic operations of a calender ,but i have added some more features to it.

Features Added :

• Drag and Drop support in Month View to switch events from one date to another date
• Editing Events Time line in the Day View and Week View by Dragging the Event panel
• Added New pop up for adding new events.

• Components working speed has been improved
• Multiple Events can be shown on the month view

Month View

Note

You can Drag the Event Panel in the Day View and keep wherever on the time line,and also you can re size the event panel on the Time Line according to the Interval of the event.

Click on the Month Cell to get Pop up for adding a new event and u can select the added event to go the day view for the particular date.

If a Single Day contains more Events then a more Button is introduced in which when u click on can get the entire events for that day.

View Demo                Selva’s EventCalender

Download Source Selva’s EventCalender Src

This is a alpha release with some bugs check here for the next beta release.

Day View

Column Chart with Dashed Bars in Flex

Here comes the Column Chart with Dashed column series .In this i have a class dashed.as which is used to draw rectangle with dashed lines

DashedFill.as is the custom fill written to show dashed bars in the chart.Dashed fill must implement the IFill Interface in which the beginFill method is implemented to draw dashed rectangles using the static method drawRect of the dashed class.

You must pass the target Graphics as first parameter to drawRect and an object with style properties to customize the border and fill color of the dashed bar .

ScreenShot

View Demo

DownLoadSource

Filling Series with Stroked Lines in Flex Charts

Hi folks,

I had an requirement saying to fill the column series with stroked lines.I tryed googling but it doesn’t helped ,hence i have developed my own fill to draw stroked lines inside the column series.

StrokeFill.as

package com.customcomponents
{
import flash.display.Graphics;
import flash.events.EventDispatcher;
import flash.events.IEventDispatcher;
import flash.geom.Rectangle;

import mx.graphics.IFill;

public class StrokeFill extends EventDispatcher implements IFill
{

public function StrokeFill(target:IEventDispatcher=null)
{
super();
}

public function begin(target:Graphics, rc:Rectangle):void
{
target.clear();
target.lineStyle(1,0×000000,1);

var j:int=0;
var i:int=0;

var yIncrement:int=rc.height/8;
var xIncrementer:int=rc.width/8;

for(i=0;i<rc.height;i=i+yIncrement)
{
target.moveTo(j,0);
target.lineTo(0,i);
if(j<rc.width)
j=j+xIncrementer;
}
var z:int=0;
var s:int=yIncrement;
j=rc.width;
while(s<rc.height)
{
target.moveTo(z,i);
target.lineTo(j,s);
i=i+xIncrementer;
if(z<rc.width)
z=z+xIncrementer;
s=s+yIncrement;
}

target.lineStyle(1,0×000000,1);
//target.moveTo(j-5,0);
target.drawRect(0,0,rc.width,rc.height);
rc.width=0;
}

public function end(target:Graphics):void
{
}

}
}

To write a fill we must implement the IFill interface and in the beginFill method i have drawn a rectangle with specified height and width according to the data.Then i have divided the width and height by 8 to get the incrementers for x and y positions ,so that 8 lines will be drawn along the width of the bar.

First 8 lines are drawn from the top of the bar to the bar height by incrementing the x and y positions by the repective incrementors so that the first half of the bar is filled then again in the while loop iam filling the second half by moving to the bottom left position and drawing lines till the bottom right .

DOWNLOAD SOURCE

Custom Slider Showing values on thumb

Hi all,

Just check out my Custom slider for flex with the valus shown on and above the thumb.

I have a Custom Slider in which the create children method has been overriden to add a label and its x and y positions are set.A listner for Mouse button up has been written to update the value of the label.Once the top label value is updated a custom event called ThumbUpdateEvent is triggered to notify the change in the value.

I have a slider thumb skin in which a uitextfield is used to display the value  inside the thumb.The uitextfield is set when the ThumbUpdateEvent is dispatched.

CustomSlider.as

package com
{
import flash.events.MouseEvent;

import mx.controls.Label;
import mx.controls.sliderClasses.Slider;
import mx.controls.sliderClasses.SliderThumb;
import mx.core.mx_internal;

use namespace mx_internal;

public class CustomSlider extends SliderThumb
{
public var lab:Label;
public var ob:Array;
public var num:int;
public var index:int;
public function CustomSlider()
{
super();
this.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
this.width=20;
this.setStyle(“fontSize”,12);
this.setStyle(“Color”,”red”);

}
private function onMouseUp(evt:MouseEvent):void{
ob=Slider(owner).values;
num=ob[thumbIndex]
this.index=thumbIndex;
lab.text=num.toString();
//this.label=num.toString();
this.dispatchEvent(new ThumbUpdateEvent(ThumbUpdateEvent.Updated,num,true));
//Alert.show(ob.toString());
}
override protected function createChildren():void
{
if(!lab)
{
lab=new Label();
lab.x=-10;
lab.y=-20;
lab.width=100;
lab.height=100;
lab.setStyle(“color”,”blue”);
this.addChild(lab);
}
}

}
}

ThumbUpdateEvent.as

package com
{
import flash.events.Event;

public class ThumbUpdateEvent extends Event
{
public static var Updated:String=”Updated”;
public var ThumbVal:int;
public function ThumbUpdateEvent(type:String,Value:int, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
this.ThumbVal=Value;
}

}
}

DownloadSource