Part I: Create a Dynamic Event Calendar in Flex Builder 3 with Actionscript 3.0

Requirements

Flex Builder

Try/Buy

WAMP (PHP, MYSQL)

Download

AMF-PHP

Download

Sample Files

Flex_Event_Calendar_Source.zip

Pre-Requisites

This tutorial assumes that you have a complete understanding of Part I. Apart from this you know AMF-PHP and you must have a idea to how to connect a Flex application with AMF-PHP using configuration file.

Step 1: Creating Database

The very first step is to create database with desired table. To accomplish this, I used a MySQL database which runs very well with PHP. I have created a new database for this application named calendar_events and within this database I have created a new table called tblcalendarevents. Here is the SQL script to create this database along with a table in it.

-- Database: calendar_events
--
CREATE DATABASE calendar_events DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;

USE calendar_events;

-- --------------------------------------------------------

-- Table structure for table 'tblcalendarevents'

CREATE TABLE IF NOT EXISTS tblcalendarevents (
  str_calendar_events text
);

Your database structure should look like below figure.

Similarly, your table structure within this database should look like below figure.

Step 2: Creating MySQL Database and PHP Class

Before starting anything in Flex and performing coding we need to make sure that we have our MySQL database in place. I have used WAMP to install PHP and MySQL in my Windows environment. Where I placed amfphp files under www folder of WAMP. Supposing you have installed WAMP in your C:\ then here is the directory structure for amfphp folder.

c:\wamp\www\amfphp

Under amfphp folder there is services folder where we need to create a PHP class which will connect with the database and perform insertion and retrieval process. I have named the PHP file SaveEvents.php. Here is the code within PHP file which will do data processing.

<?php
class SaveEvents
{
    function storeEvents($_strEvents)
    {
        $con = mysql_connect("YOUR-MYSQL-SERVER-ADDRESS","USERNAME","PASSWORD");
		if (!$con)
		{
			die('Could not connect: ' . mysql_error());
		}

		mysql_select_db("calendar_events", $con);
		mysql_query("delete FROM tblCalendarEvents");
		mysql_query("INSERT INTO tblCalendarEvents VALUES ('" . $_strEvents . "');");

		mysql_close($con);

		return "success";
    }

	function getEvents()
	{
		$con = mysql_connect("YOUR-MYSQL-SERVER-ADDRESS","USERNAME","PASSWORD");
		if (!$con)
		{
			die('Could not connect: ' . mysql_error());
		}

		mysql_select_db("calendar_events", $con);

		$result = mysql_query("SELECT * FROM tblCalendarEvents");
		$strEvents = "";
		while($row = mysql_fetch_array($result))
		{
			$strEvents = $strEvents . $row['str_calendar_events'];
		}

		mysql_close($con);

		if($strEvents == "")
		{
			return "empty";
		}
		else
		{
			return $strEvents;
		}

	}
}
?>

In the above code we have 2 functions named storeEvents() and getEvents(). storeEvents function is used to store calendar events in the database and similarly getEvents is used to retrieve those values. Now to make it more easier I have used storing/retrieval of XML rather than a long list of multiple values.

Step 3: Creating services-config.xml file

Moving to Flex, the first step we need to do is to create services-config.xml file. The services-config.xml file is an Extensible Markup Language (XML) document that specifies the properties of the remote services our application will use. To create this file, right click the src folder of your Flex project, then choose New > File. Name the file services-config.xml, then click Finish. You will be presented with the new empty file. The default editor is the built-in XML editor, but you need to open it in the plain text editor by right clicking the file and choosing Open with > Text Editor. Next, paste the following code into the file:

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
    <services>
        <service id="sabreamf-flashremoting-service"
                 class="flex.messaging.services.RemotingService"
                 messageTypes="flex.messaging.messages.RemotingMessage">
            <destination id="amfphp">
                <channels>
                    <channel ref="my-amfphp"/>
                </channels>
                <properties>
                    <source>*</source>
                </properties>
            </destination>
        </service>
    </services>

    <channels>
        <channel-definition id="my-amfphp" class="mx.messaging.channels.AMFChannel">
            <endpoint uri="http://YOUR-SERVER-ADDRESS/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>
        </channel-definition>
    </channels>
</services-config>  

The above XML block contains two key pieces of information specific to this application. The first is the id attribute of the <destination> node. You will use this ID to connect to the remote service in the Flex application. The other important attribute is the uri property of the <endpoint> node. Here, you need to place the path to your amfphp gateway file on your web server. The class attributes correspond to the method of communication: you will be using “remoting” to communicate with your services in AMF.

Next, you need to tell the Flex compiler about your services-config.xml file. You do so using the compiler flag -services. To add this flag, click Project > Properties. A new window appears with a list on the left side. From that list, choose Flex Compiler. At the end of the existing text in the Additional compiler arguments box, add the following:

-services "services-config.xml"  

The result should look like Figure 1.1

Click Finish, and the workspace refreshes. When complete, you will have access to your amfphp gateway from the client application.

Step 4: Creating Service Connector class

Next step is to create a Service Connector class which will be a singleton class and allow our application to connect with amfphp and process various data calls. To achieve this I have created a new class file under classes.remoting package. I have named this class/file as ServiceConnector.as. Let’s first have a look at the code of this class thereafter we will have description of the code.

package classes.remoting
{
	import classes.events.CustomEvents;

	import flash.events.EventDispatcher;

	import mx.controls.Alert;
	import mx.rpc.events.FaultEvent;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.remoting.RemoteObject;

	public class ServiceConnector extends EventDispatcher
	{
		private var m_objRemote:RemoteObject;
		private static var m_objServiceConnector:ServiceConnector;

		public static function getInstance():ServiceConnector
		{
			if(m_objServiceConnector == null)
				m_objServiceConnector = new ServiceConnector();

			return m_objServiceConnector;
		}

		public function connect():void
		{
			m_objRemote = new RemoteObject();
			m_objRemote.source = "SaveEvents";
			m_objRemote.destination = "amfphp";

			m_objRemote.storeEvents.addEventListener("result", onStoreResult);
			m_objRemote.getEvents.addEventListener("result", onFetchResult);
			m_objRemote.addEventListener("fault", onServiceFault);

		}

		public function storeEvents(_strEvents:String):void
		{
			if(_strEvents == null || _strEvents == "")
				_strEvents = "<calendar />";

			m_objRemote.getOperation("storeEvents").send(_strEvents);

		}

		public function getEvents():void
		{
			m_objRemote.getOperation("getEvents").send();
		}

		private function onStoreResult(evt:ResultEvent):void
		{
			trace("Data  Stored");
		}

		private function onFetchResult(evt:ResultEvent):void
		{
			var obj:Object = new Object();
			obj.data = evt.result.toString();
			dispatchEvent(new CustomEvents(CustomEvents.FETCH_DB_DATA, obj));
		}

		private function onServiceFault(evt:FaultEvent):void
		{
			Alert.show("Cannot connect to Web service, Please check your configuration settings!", "Event Calendar");
		}

	}
}

ServiceConnector is a singleton class which allows to connect remote service i.e. amfphp through connect() method. If you see in connect() method we are calling SaveEvents as a source to Remote Object which is the class name in our PHP file. Similarly we have destination as amfphp which we defined as ID in services-config.xml file. We have also result and fault listeners with-in the connect() method which get invoked whenever a result or fault event occurred. Apart from that we have 2 public methods in this class storeEvents() and getEvents() which allows to send and retrieve data respectively to SaveEvents php class. After creating above 2 new files your directory structure should look like this.

Step 5: Changes in main.mxml

I have added couple of new methods and codes in order to achieve the functionality of connecting this application with the database. Let’s start with the main.mxml file because that is the first file which is used by the application as the main file.

Previously we had a method called onApplicationStart() which get executes on creation complete of the main application file. In other words this method is the very first method which gets invoked and starts the application. I have added couple of new code with in this method plus I also removed couple of lines. Let’s have a look:

private function onApplicationStart():void
{
    var objDate:Date = new Date();
    dtPicker.selectedDate = objDate;

    // create events
    monthView.addEventListener(CustomEvents.MONTH_VIEW_CLICK, onMonthViewClick);
    DataHolder.getInstance().addEventListener(CustomEvents.ADD_NEW_EVENT, onNewEventAdded);

    onDateChange();
}
            

private function onApplicationStart():void
{
    monthView.addEventListener(CustomEvents.MONTH_VIEW_CLICK, onMonthViewClick);
    DataHolder.getInstance().addEventListener(CustomEvents.ADD_NEW_EVENT, onNewEventAdded);

    DataHolder.getInstance().addEventListener(CustomEvents.DP_CHANGED, onDataProviderChanged);

    m_objServiceConnector = ServiceConnector.getInstance();
    m_objServiceConnector.addEventListener(CustomEvents.FETCH_DB_DATA, onFetchDBData);

    m_objServiceConnector.connect();
    m_objServiceConnector.getEvents();
}
    

There is a new variable in above method which has to be declared at top level of main.mxml file. Something like this:

private var m_objServiceConnector:ServiceConnector;

As per current version I have added a new listener which will listen to "data provider change" event. I have also added a code to create ServiceConnector object and as well as called connect() method of ServiceConnector class. Afterwards I have invoked getEvents() which allows the application to load data from the database and behave accordingly.

Another method named onDateChange has been modified, let’s go through that as well.

private function onDateChange():void
{
    m_intCurrentDate = new Date(dtPicker.displayedYear, dtPicker.displayedMonth, dtPicker.selectedDate.date);
}
    

private function onDateChange():void
{
    var currentDate:int;
    if(dtPicker.selectedDate == null)
        currentDate = new Date().date;
    else
        currentDate = dtPicker.selectedDate.date;

    m_intCurrentDate = new Date(dtPicker.displayedYear, dtPicker.displayedMonth, currentDate);
}
    

I have just added a validation of the date in this method so it won’t come as null at any point of time.

Next method which will get invoked is onFetchDBData which is being fired from the event listener in onApplicationStart method. Basically when we call getEvents from ServiceConnector class it dispatched FETCH_DB_DATA event which further listened by main.mxml class. Let’s have a look at onFetchDBData method:

private function onFetchDBData(_event:CustomEvents):void
{
    if(_event.object.data == "empty")
    {
        var objDate:Date = new Date();
        dtPicker.selectedDate = objDate;
        onDateChange();
    }
    else
    {
        dataProvider = _event.object.data;
    }
}

I have just added a validation of the date in this method so it won’t come as null at any point of time.

Next method which will get invoked is onFetchDBData which is being fired from the event listener in onApplicationStart method. Basically when we call getEvents from ServiceConnector class it dispatched FETCH_DB_DATA event which further listened by main.mxml class. Let’s have a look at onFetchDBData method.

private function onFetchDBData(_event:CustomEvents):void
{
    if(_event.object.data == "empty")
    {
        var objDate:Date = new Date();
        dtPicker.selectedDate = objDate;
        onDateChange();
    }
    else
    {
        dataProvider = _event.object.data;
    }
}

Now onFetchDBData method is the one which will either render the views with blank data otherwise if it has any data for a particular date it will list out that and render the view.

If you see in else condition of above method I’m storing all values(returned by our php class) in a property called dataProvider. This dataProvider property which is a getter/setter takes a XML string and converts it into a array which is further used by DataHolder class. Similarly dataProvider takes an array from DataHolder and converts it as per the requirement of the php to store it in the database. Here is the code for dataProvider property.

public function set dataProvider(_strEvents:String):void
{
    var objDataXML:XML = new XML(_strEvents);
    var objArr:Array = new Array();
    for(var i:int=0; i<objDataXML.event.length(); i++)
    {
        var obj:Object = new Object();
        var xml:XML = objDataXML.event[i];

        obj.date = new Date(Date.parse(xml.date));
        obj.hour = String(xml.hour);
        obj.meridiem = String(xml.meridiem);
        obj.mins = String(xml.mins);
        obj.desc = String(xml.desc);

        objArr.push(obj);
    }

    DataHolder.getInstance().dataProvider = objArr;
}

public function get dataProvider():String
{
    var objCalendarData:XML = <calendar />;
    for(var i:int=0; i<DataHolder.getInstance().dataProvider.length; i++)
    {
        var obj:Object = DataHolder.getInstance().dataProvider[i];
        var xml:XML = <event />
        xml.date = obj.date;
        xml.hour = String(obj.hour);
        xml.meridiem = String(obj.meridiem);
        xml.mins = String(obj.mins);
        xml.desc = String(obj.desc);

        objCalendarData.appendChild(xml);
    } 

    return objCalendarData.toString();
}

We have stored values retrieved from the php class into this dataProvider but we didn’t yet sent this dataProvider to the php class. To accomplish that we need to add a new line of code under onNewEventAdded method so, whenever a new event is added in the calendar it should send that value to the php class. We need to add the below line at the end of this method.

m_objServiceConnector.storeEvents(dataProvider);

One last change in the main.xml file is to create a listeners method for DP_CHANGED event. This event occurs whenever there is a change in the dataProvider in DataHolder. In other words, it only executes for once, when this application load the data from the php class. Have a look at the content of this method.

private function onDataProviderChanged(_event:CustomEvents):void
{
    trace("Data Updated");
    onDateChange();
}

We are through with the necessary changes in main mxml file. Now let’s jump on to the next step where we will modify couple of other files.

Step 6: Changes in CommonUtils and CustomEvents

There are very small changes in both of these classes. I have added a 2 lines with-in the method called createRightHourStrip(). I’m not writing the entire body of that method instead I’m just writing a condition with in which these lines are written.

if(ObjectUtil.dateCompare(obj.date, _savedDate) == 0)
{
    
	obj.hour = String(obj.hour);
	obj.hour = (obj.hour.length < 2) ? ("0" + obj.hour) : obj.hour;
	
    if(obj.hour == strLabel && obj.meridiem == objHourCell.data.meridiem)
    {
        if(obj.mins == 0)
        {
            objHourCell.btnFirstHalf.label = obj.desc;
        }
        else
        {
            objHourCell.btnSecondHalf.label = obj.desc;
        }
    }
}

In case if a value for the hour is stored as a single digit the below line will allow the program to convert it in to double digit.

Apart from this we have declared couple of new constants which are being used in the code. These constants are decal red in CustomEvents class. Here:

public static const FETCH_DB_DATA:String = "fetchDBData";
public static const DP_CHANGED:String = "dpChanged";

Step 7: Final Changes in DataHolder class

There is a single line change in DataHolder class and that is only to dispatch an event of DP_CHANGED when we update dataProvider property with in it. To accomplish this we need to call below code under the setter of dataProvider property. This line has to at last position with in this setter method.

dispatchEvent(new CustomEvents(CustomEvents.DP_CHANGED));

Conclusion

Now you all know how to connect Flex Event Calendar with the Database to store calendar events in the database. In case any help is required feel free to contact me either by commenting or via my website http://www.ankur-arora.com

Related posts:

• Simulating PicLens with Flex and Away3D – Part 3
• Build a contact manager in Flex with ZendAMF; Part One – Layout; From Photoshop to Flex
• Creating an AIR RSS Reader Application from Scratch with Flex and PureMVC
• Simulating PicLens with Flex and Away3D – Part 1
• Integrate Flex Builder 3.0 & Php easly with the fresh ZendAMF

Sweet Home Download: Sweet Home 3D is a free interior design application that allows users to choose and place furniture on a house 2D plan, with a 3D preview. The application’s interface is easy to use. Designing a room is indeed very simple. You can draw the walls of yοur home upοn the image οf an existing plan, change the cοlor or the texture of each roοm, and drag and drοp furniture onto the plan from a catalοg organized by categories (windοws, doors, living rοom, kitchen, etc.). By dragging furniture into the grid and positiοning it as you envisiοn your redesigned roοm, a clear picture appears below, prοviding an impressiοn of space that two-dimensiοnal sketches cannot. All the changes made іn the 2D plan are sіmultaneously reflected іn a 3D view. Sweet Home is available in 16 languages.

Download Sweet Home

Related posts:

• Google SketchUp Download
• DAZ Studio Download

Ulead Download: Ulead GIF Animator is an easy-to-use yet very effective tool to create web-optimized animations. It has a clean interface and a wide range of tools, objects and frames. You may edit animations within Ulead GIF Animator but you may also use an external editor. Adding banner text with zoom, scroll or neon only takes a few seconds! Ulead Download: The application optimizes the GIF animations in several ways for faster download. The preview mode will help you to judge whether or not the quality remains high enough. There is also a start-up wizard to ensure that animation designers of all levels, from beginners to advanced users, find Ulead GIF Animator worth it! Ulead GIF Animator is one of the industry’s most powerful yet affordable tool to create GIF animations.

Download Ulead GIF Animator

Related posts:

• KoolMoves Download
• SWiSHmax Download
• DAZ Studio Download

What will you learn?

1. What is a PHP Framework?

2. What is CodeIgniter?

3. What is MVC?

4. MVC Pattern

5. Why CodeIgniter?

What is a PHP Framework?

First of all, what is PHP? I’d say that PHP (Hypertext Preprocessor) is the best scripting language at this moment, even if is exactly 15 years old. PHP is able to create dynamic webpages interpreted by a webserver (Apache, Lighttpd, nginx, etc), but also can create GUI applications.

This is enough for you right now, if you need more details check these links:

1. http://en.wikipedia.org/wiki/PHP

2. http://gtk.php.net

3. http://httpd.apache.org/

4. http://nginx.org/

5. http://www.lighttpd.net/

If you already know what is PHP we have to move on. If you’re already a PHP programmer, I think you know that some parts of your code are duplicated. So this is the moment to find out what is a PHP Framework.

A PHP Framework is a collection of pre-written methods and classes, that are already secured, optimized, well documented and ready to use anytime, “out of the box”.

What is CodeIgniter?

As you maybe think, CodeIgniter is a PHP Framework for PHP 4 and PHP 5 in the same time. CodeIgniter’s main goal is to allow user to develop lightning fast applications, without writing your code from zero. So you already have a basic package, with everything what’s needed to write a kick-ass application.

What is MVC?

MVC (Model-View-Controller), is an architectural pattern used in almost all programming and scripting languages, including PHP.

The Model – usually is used to connect with the database, making CRUD operations (Create, Read, Update, Delete)

The View – most of the time, here you will print the data received from your controller, and other HTML markup. Basically, a view is every page you see over the internet.

The Controller – is responsible to handle the requests, manipulating models or other controller. Try to keep the controller as simple as possible.

MVC Pattern

So, let me explain it a bit. There would be 5 steps:

1. Your computer will send a request to the Controller

2. The Controller will interact with the Model, making a demand.

3. The Model will make the processing, then return some data to the Controller.

4. The Controller will analyze the results (maybe needs some more data, and it will make another request to another Model).

5. Finally, the data will be sent to the view, which is interpreted by the webserver, and will be displayed back in your browser.

Let’s take an example over a registration page.

1. You enter on the registration page, complete the fields and click Submit.

2. The request is send to the controller, it will ask the model about your identity.

3. The model analyze the data you sent (if you are already a member, if your data is correct, etc.) and it will send an Accept or a Denial back to the controller.

4. The Controller will analyze the Accept/Denial from the model, and will decide what to do.

5. Finally, it will send “a Welcome” to the view, which will be visible to you as a Welcome page, or an error page.

Why CodeIgniter?

First of all, CodeIgniter has the MVC architecture. So your application will be organized as I’ve already explained.

Is very easy to learn, as it’s deeply documented and very easy to extend.

CodeIgniter is a very light PHP framework (2.1 MB including the entire documentation) compared with:

1. Zend Framework 1.10.2 Full – 24 MB

2. symfony 1.4.3 – 5.1 MB

3. CakePHP 1.2.6 – 4.5 MB

Is lightning fast compared with other PHP Framework, I think it’s the fastest PHP framework.

The installation process is very very easy, you only need to unpack latest stable version, upload it on your host ,simply set ONE parameter and you are done. If course if you need something more, you have a few config variables. We’ll talk about the installation is a future tutorial.

CodeIgniter doesn’t have a command line tool like CakePHP or symfony. Maybe some users will like the command line tool, because it will generate your models, views and controller and other stuff, but honestly I feel I am losing the control of such an application. Not everytime you will need a model or a view for your controller, so why generate them?

Maybe you were wondering “Why other frameworks are so big?”. Most of the frameworks have included in their core additional libraries (authentication, captcha, currency, feed, ajax, connection with webservices – Twitter, Flickr etc.), Object Relationship Mapper (we’ll talk about ORM in next tutorials) and other. A normal projects doesn’t need everything I’ve listed, so “why pay for what you don’t need”?

And I forgot to say, that CodeIgniter and other PHP Frameworks listed here are Open Source, so you can use them for free and modify then as you wish. There is a bunch of libraries, helpers and other open source software built on CodeIgniter.

Another thing I like to CodeIgniter is the way they help me building my links. What can you do when you want to move your application to another domain? Do you use relative paths to your files?

Do you create links with your domain everywhere and then mass-edit? Here CodeIgniter will help you with 2 methods: base_url() and site_url().

Both methods return the main URL for your application, but there’s a small difference between them, you’ll learn about this later. Let’s say you have your script installed on your-domain.com/my_blog, base_url() will return you exactly your URL.

CodeIgniter has also a fantastic form validation library, which helps you validate your data easily, before making database operations.

Sending emails has never been easier. CodeIgniter even has an email class for you. Do you want to send an email? Ok, here is the code:

$this->email->to("my_friend@example.com");
$this->email->from('me@example.com');
$this->email->subject('Hello from CodeIgniter');
$this->email->message('This is my first email from CodeIgniter.');
$this->email->send();

Want to send an attachment too? Add this line;

$this->email->attach('/relative/path/to/your/attachment.png');

And you’re done.

There are still much more tricks to discover, but this is enough for today.
Now you know what is PHP, what is a PHP Framework, what is CodeIgniter and why did I pick CodeIgniter.

This tutorial was like a simple intro to make you more familiar with PHP frameworks and especially with CodeIgniter, my favorite. Good luck and see you next time.

http://codeigniterdirectory.com/ – A directory where you may find a low of useful stuff regarding CodeIgniter

http://codeigniter.com/wiki – The official CodeIgniter Wiki

For more CodeIgniter tutorials, make sure you subscribe to our RSS feed. If you have any questions about CodeIgniter, feel free to leave a comment!

No related posts.

Result

Requirements

Adobe Flex v3.02

Away3D v3.3.3 source code

Flint 2.1.0 source code

Pre-Requisites

You should read the previous articles in this series.

Create from Scratch a Away3D Shoot’em’Up Game: Part 1
Create from Scratch a Away3D Shoot’em’Up Game: Part 2
Create from Scratch a Away3D Shoot’em’Up Game: Part 3
Create from Scratch a Away3D Shoot’em’Up Game: Part 4

Powerups

In the last article we implemented a new system for defining and creating the weapons. There was no way for the player to change his weapons though – for that we need to add powerups.

Powerup.as

package
{
	import away3d.materials.BitmapMaterial;
	import away3d.primitives.Plane;

	public class Powerup extends MeshObject
	{
		protected static const POWERUP_SIZE:Number = 6;
		protected static const POWERUP_SPEED:Number = 30;
		protected static const POWERUP_X_LIMIT:Number = 70;
		protected static const POWERUP_Y_LIMIT:Number = 60;
		protected static const POWERUP_X_START:Number = 65;
		protected static const POWERUP_Y_START:Number = 50;
		protected var weapon:int = 0;
		protected var shields:int = 0;
		protected var score:int = 0;

		public function get Weapon():int
		{
			return weapon;
		}

		public function get Shields():int
		{
			return shields;
		}

		public function get Score():int
		{
			return score;
		}

		public function Powerup()
		{
			super();
		}

		protected function startupPowerup(engineManager:EngineManager, material:BitmapMaterial, weapon:int, score:int, shields:int):Powerup
		{
			var plane:Plane = new Plane(
				{material:material,
				width:POWERUP_SIZE,
				height:POWERUP_SIZE,
				yUp:false});
			super.startupMeshObject(engineManager, plane);

			this.collisionName = CollisionIdentifiers.POWERUP;
			this.model.x = POWERUP_X_LIMIT;
			this.model.y = MathUtils.randRange(-POWERUP_Y_START, POWERUP_Y_START);
			this.weapon = weapon;
			this.shields = shields;
			this.score = score;

			return this;
		}

		public function startupRandomPowerup(engineManager:EngineManager):Powerup
		{
			var random:int = int(Math.random() * 2);
			switch (random)
			{
				case 0:
					return startupWeapon1Powerup(engineManager);
				case 1:
					return startupWeapon2Powerup(engineManager);
			}

			return null;
		}

		public function startupWeapon1Powerup(engineManager:EngineManager):Powerup
		{
			return startupPowerup(
				engineManager,
				ResourceManager.Powerup1_Tex,
				1,
				0,
				0);
		}

		public function startupWeapon2Powerup(engineManager:EngineManager):Powerup
		{
			return startupPowerup(
				engineManager,
				ResourceManager.Powerup2_Tex,
				2,
				0,
				0);
		}

		override public function enterFrame(dt:Number):void
		{
			super.enterFrame(dt);

			this.model.x -= POWERUP_SPEED * dt;

			if (this.model.x > POWERUP_X_LIMIT ||
				this.model.x < -POWERUP_X_LIMIT || 				this.model.y > POWERUP_Y_LIMIT ||
				this.model.y < -POWERUP_Y_LIMIT)
				this.shutdown();
		}

		override public function collision(other:MeshObject):void
		{
			this.shutdown();
		}
	}
}

This code should look familiar. We have extended the MeshObject class, which allows us to put a mesh on the screen. Like the weapons and the enemies, the powerup mesh is a Plane orientated to face the camera, and textured with a BitmapMaterial embedded by the ResourceManager class. The collisionName has been set to CollisionIdentifiers.POWERUP to identify this as a powerup to the collision system. The enterFrame functions moves the Powerup across the screen until it is no longer visible, at which point it is shutdown.

The thing that makes the powerup unique are the three properties Shield, Score and Weapon. Each represents the reward that the player will receive when this powerup is collected. You would probably only create powerups that have one of these three properties set to something other than zero, but there is also no reason why you couldn’t have a powerup that gave the player points and some additional shields.

The Powerup class has a number of startup functions, along with a startup function that creates a random Powerup. You may recall from the last article that we spent some time breaking up the Weapon class to avoid using that one class to create multiple enemy types. In this case though, because the properties defined by the Powerup class are shared by all the different types of powerups (every powerup will have a shield, score and weapon property, and move in a straight line across the screen), there is no downside to having the Powerup startup functions create the various different types of powerups.

So here we have defined two powerups, one for weapon 1 (startupWeapon1Powerup), and for weapon 2 (startupWeapon2Powerup). The code for creating powerups for shields and points would be very similar.

Player.as

package
{
	import away3d.core.math.Number3D;
	import away3d.events.MouseEvent3D;
	import away3d.primitives.*;

	import flash.events.*;
	import flash.geom.*;
	import flash.media.*;

	import mx.core.*;

	public class Player extends DamageableObject
	{
		protected static const PLAYER_X_LIMIT:Number = 52;
		protected static const PLAYER_Y_LIMIT:Number = 38;
		protected static const PLAYER_WIDTH:Number = 16;
		protected static const PLAYER_HEIGHT:Number = 5;
		protected static const COLLISION_PLANE_WIDTH:Number = 150;
		protected static const COLLISION_PLANE_HEIGHT:Number = 100;
		protected static const PLAYER_SHIELDS:int = 10;
		protected var collisionPlane:MeshObject = null;
		protected var shooting:Boolean = false;
		protected var timeToNextShot:Number = 0;

		public function Player()
		{
			super();
		}

		public function startupPlayer(engineManager:EngineManager):Player
		{
			var plane:Plane = new Plane(
				{material:ResourceManager.Player_Tex,
				width:PLAYER_WIDTH,
				height:PLAYER_HEIGHT,
				yUp:false});
			super.startupMeshObject(engineManager, plane);

			var collisionPlaneMesh:Plane = new Plane(
				{material:new NullMaterial(),
				width:COLLISION_PLANE_WIDTH,
				height:COLLISION_PLANE_HEIGHT,
				yUp:false});
			collisionPlane = new MeshObject().startupMeshObject(engineManager, collisionPlaneMesh);
			collisionPlaneMesh.addEventListener(MouseEvent3D.MOUSE_MOVE, this.mouseMove3D);

			this.collisionName = CollisionIdentifiers.PLAYER;
			this.shields = PLAYER_SHIELDS;

			Application.application.pbarLife.setProgress(this.shields, PLAYER_SHIELDS);

			return this;
		}

		override public function shutdown():void
		{
			collisionPlane.model.removeEventListener(MouseEvent3D.MOUSE_MOVE, this.mouseMove3D);
			collisionPlane.shutdown();
			collisionPlane = null;
			super.shutdown();
		}

		override public function enterFrame(dt:Number):void
		{
			super.enterFrame(dt);

			timeToNextShot -= dt;
			timeToNextShot = timeToNextShot<0?0:timeToNextShot; 			if (timeToNextShot == 0 && shooting) 			{ 				var weaponPosition:Number3D = new Number3D(); 				weaponPosition.add(this.model.position, new Number3D(PLAYER_WIDTH / 2, 0, 0)); 				 				timeToNextShot = this.engineManager.MyApplicationManager.MyWeaponManager.createWeapon( 					this.engineManager.MyApplicationManager.MyPlayerWeapon, 					this.engineManager.MyApplicationManager.MyPlayerWeaponLevel,  					weaponPosition); 			} 				 			if (this.model.x > PLAYER_X_LIMIT)
				this.model.x = PLAYER_X_LIMIT;
			if (this.model.x < -PLAYER_X_LIMIT) 				this.model.x = -PLAYER_X_LIMIT; 			 			if (this.model.y > PLAYER_Y_LIMIT)
				this.model.y = PLAYER_Y_LIMIT;
			if (this.model.y < -PLAYER_Y_LIMIT)
				this.model.y = -PLAYER_Y_LIMIT;
		}

		public function mouseMove3D(event:MouseEvent3D):void
		{
			if (this.model)
			{
				this.model.x = event.sceneX;
				this.model.y = event.sceneY;
			}
		}

		public override function collision(other:MeshObject):void
		{
			if (other.collisionName == CollisionIdentifiers.POWERUP)
			{
				var powerup:Powerup = other as Powerup;
				this.shields += powerup.Shields;
				this.engineManager.MyApplicationManager.MyScore += powerup.Score;
				if (powerup.Weapon != 0)
				{
					this.engineManager.MyApplicationManager.changePlayerWeapon(powerup.Weapon);
				}
			}
		}

		public override function mouseDown(event:MouseEvent):void
		{
			shooting = true;
		}

		public override function damage(amount:int):void
		{
			super.damage(amount);
			Application.application.pbarLife.setProgress(this.shields, PLAYER_SHIELDS);
		}

		public override function mouseUp(event:MouseEvent):void
		{
			shooting = false;
		}

		protected override function die():void
		{
			engineManager.MyApplicationManager.levelEnded();
			super.die();
		}
	}
}

The Player class needs to be modified to respond to a collision with a Powerup.

if (other.collisionName == CollisionIdentifiers.POWERUP)
{
	var powerup:Powerup = other as Powerup;
	this.shields += powerup.Shields;
	this.engineManager.MyApplicationManager.MyScore += powerup.Score;
	if (powerup.Weapon != 0)
	{
		this.engineManager.MyApplicationManager.changePlayerWeapon(powerup.Weapon);
	}
}

In the collision function we test for a collision with a Powerup. When such a collision has been detected, the players shields and score are updated. If the Shields and Score properties have been set to zero then these updates have no effect.

If the Weapon property is not zero we ask the ApplicationManager to update the players weapons by calling the changePlayerWeapon function.

ApplicationManager.as

package
{
	import mx.core.Application;

	public class ApplicationManager extends BaseObject
	{
		protected static const TIME_BETWEEN_BUILDINGS:Number = 2;
		protected static const TIME_BETWEEN_ENEMIES:Number = 1;
		protected static const TIME_BETWEEN_POWERUPS:Number = 10;
		protected static const TIME_TO_LEVEL_END:Number = 1;
		protected var timeToEndGame:Number = TIME_TO_LEVEL_END;
		protected var timeToNextBuilding:Number = 0;
		protected var timeToNextEnemy:Number = TIME_BETWEEN_ENEMIES;
		protected var timeToNextPowerup:Number = 0;//TIME_BETWEEN_POWERUPS;
		protected var levelHasEnded:Boolean = false;
		protected var myPlayerWeapon:int = 1;
		protected var myPlayerWeaponLevel:int = 1;
		protected var myWeaponManager:WeaponManager = null;
		protected var myScore:int = 0;

		public function get MyWeaponManager():WeaponManager
		{
			return myWeaponManager;
		}

		public function get MyPlayerWeapon():int
		{
			return myPlayerWeapon;
		}

		public function get MyPlayerWeaponLevel():int
		{
			return myPlayerWeaponLevel;
		}

		public function set MyScore(value:int):void
		{
			myScore = value;
			Application.application.lblScore.text = myScore;
		}

		public function get MyScore():int
		{
			return myScore;
		}

		public function ApplicationManager()
		{
			super();
		}

		public function startupApplicationManager(engineManager:EngineManager):ApplicationManager
		{
			this.startupBaseObject(engineManager);
			this.engineManager.addCollidingPair(CollisionIdentifiers.ENEMY, CollisionIdentifiers.PLAYER);
			this.engineManager.addCollidingPair(CollisionIdentifiers.ENEMY, CollisionIdentifiers.PLAYERWEAPON);
			this.engineManager.addCollidingPair(CollisionIdentifiers.PLAYER, CollisionIdentifiers.POWERUP);
			this.myWeaponManager = new WeaponManager().startupWeaponManager(this.engineManager);

			return this;
		}

		public function startLevel1():void
		{
			timeToNextBuilding = 0;
			MyScore = 0;

			new BackgroundPlane().startupBackgroundPlane(engineManager);
			new Player().startupPlayer(engineManager);

			// prepopulate the city
			for (var i:int = 0; i < 5; ++i)
			{
				var building:BackgroundBuilding = new BackgroundBuilding();
				building.startupBackgroundBuilding(engineManager);
				building.enterFrame((i + 1) * 2);
			}
		}

		public function levelEnded():void
		{
			levelHasEnded = true;
		}

		public override function shutdown():void
		{
			super.shutdown();
		}

		public override function enterFrame(dt:Number):void
		{
			timeToNextBuilding -= dt;
			if (timeToNextBuilding <= 0)
			{
				timeToNextBuilding = TIME_BETWEEN_BUILDINGS;
				new BackgroundBuilding().startupBackgroundBuilding(engineManager);
			}

			timeToNextEnemy -= dt;
			if (timeToNextEnemy <= 0)
			{
				timeToNextEnemy = TIME_BETWEEN_ENEMIES;
				new Enemy().startupBasicEnemy(engineManager);
			}

			timeToNextPowerup -= dt;
			if (timeToNextPowerup <= 0)
			{
				timeToNextPowerup = TIME_BETWEEN_POWERUPS;
				new Powerup().startupRandomPowerup(engineManager);
			}

			if (levelHasEnded)
			{
				timeToEndGame -= dt;
				if (timeToEndGame <= 0)
				{
					engineManager.nextStateChange = "MainMenu";
				}
			}
		}

		public function changePlayerWeapon(weapon:int):void
		{
			if (weapon == this.myPlayerWeapon &&
				this.myWeaponManager.isValidWeapon(
					this.myPlayerWeapon,
					this.myPlayerWeaponLevel + 1))
			{
				++this.myPlayerWeaponLevel;
			}
			else if (this.myWeaponManager.isValidWeapon(weapon, 1))
			{
				this.myPlayerWeapon = weapon;
				while (!this.myWeaponManager.isValidWeapon(
					this.myPlayerWeapon,
					this.myPlayerWeaponLevel))
				{
					--this.myPlayerWeaponLevel;
				}
			}
		}
	}
}

In order for the players weapons to change in response to a powerup, the ApplicationManager gets a new function called changePlayerWeapon.

public function changePlayerWeapon(weapon:int):void
{
	if (weapon == this.myPlayerWeapon &&
		this.myWeaponManager.isValidWeapon(
			this.myPlayerWeapon,
			this.myPlayerWeaponLevel + 1))
	{
		++this.myPlayerWeaponLevel;
	}

If the player has collected a powerup for the current weapon (i.e. the powerups Weapon property equals the ApplicationManagers myPlayerWeapon property) the ApplicationManager will attempt to increase the weapon level. Obviously this can only be done if the current weapon has not been maxed out, so a call to the WeaponManager isValidWeapon function is used to see if such an upgrade is possible.

	else if (this.myWeaponManager.isValidWeapon(weapon, 1))
	{
		this.myPlayerWeapon = weapon;
		while (!this.myWeaponManager.isValidWeapon(
			this.myPlayerWeapon,
			this.myPlayerWeaponLevel))
		{
			--this.myPlayerWeaponLevel;
		}
	}
}

If the player has collected a powerup for a new weapon then the ApplicationManager changes to that weapon. Because weapons may have different levels defined (weapon 1 may have 4 levels, whereas weapon 2 may only have 3), the ApplicationManager will downgrade the weapon level where necessary.

timeToNextPowerup -= dt;
if (timeToNextPowerup <= 0)
{
	timeToNextPowerup = TIME_BETWEEN_POWERUPS;
	new Powerup().startupRandomPowerup(engineManager);
}

The Powerups are added to the game just like the enemies and background buildings. The ApplicationManager is set to add one powerup after a specified amount of time has passed in the enterFrame function.

WeaponManager.as

package
{
	import away3d.core.math.Number3D;
	import away3d.materials.BitmapMaterial;

	import flash.utils.Dictionary;

	public class WeaponManager
	{
		protected var engineManager:EngineManager = null;
		protected var weaponDatabase:Dictionary = new Dictionary();

		public function WeaponManager()
		{
			super();
		}

		public function startupWeaponManager(engineManager:EngineManager):WeaponManager
		{
			this.engineManager = engineManager;

			var weapon1:Dictionary = new Dictionary();
			weaponDatabase[1] = weapon1;

			weapon1[1] = weapon1Level1;
			weapon1[2] = weapon1Level2;

			var weapon2:Dictionary = new Dictionary();
			weaponDatabase[2] = weapon2;

			weapon2[1] = weapon2Level1;
			weapon2[2] = weapon2Level2;

			return this;
		}

		public function createWeapon(weapon:int, weaponLevel:int, position:Number3D):Number
		{
			if (isValidWeapon(weapon, weaponLevel))
			{
				return weaponDatabase[weapon][weaponLevel](position);
			}

			return 0;
		}

		public function isValidWeapon(weapon:int, weaponLevel:int):Boolean
		{
			if (weaponDatabase[weapon] != null)
			{
				if (weaponDatabase[weapon][weaponLevel] != null)
					return true;
			}

			return false;
		}

		public function weapon1Level1(weaponPosition:Number3D):Number
		{
			var material:BitmapMaterial = ResourceManager.Bullet_Tex;
			var timeToNextShot:Number = 0.4;
			var damage:int = 1;
			var xDir:Number = 1;
			var yDir:Number = 0;
			var speed:Number = 100;
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, material, weaponPosition, damage, xDir, yDir, speed);

			new SoundEffect().startupSoundEffect(this.engineManager, ResourceManager.Gun1FX);

			return timeToNextShot;
		}

		public function weapon1Level2(weaponPosition:Number3D):Number
		{
			var timeToNextShot:Number = 0.4;

			var material:BitmapMaterial = ResourceManager.Bullet_Tex;
			var damage:int = 1;
			var xDir:Number = 1;
			var yDir:Number = 0;
			var yDir2:Number = 0.5;
			var yDir3:Number = -0.5;
			var speed:Number = 100;
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, material, weaponPosition, damage, xDir, yDir, speed);
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, material, weaponPosition, damage, xDir, yDir2, speed);
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, material, weaponPosition, damage, xDir, yDir3, speed);

			new SoundEffect().startupSoundEffect(this.engineManager, ResourceManager.Gun1FX);

			return timeToNextShot;
		}

		public function weapon2Level1(weaponPosition:Number3D):Number
		{
			var material:BitmapMaterial = ResourceManager.Bullet2_Tex;
			var timeToNextShot:Number = 1;
			var damage:int = 2;
			var xDir:Number = 1;
			var yDir:Number = 0;
			var speed:Number = 100;
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, material, weaponPosition, damage, xDir, yDir, speed);

			new SoundEffect().startupSoundEffect(this.engineManager, ResourceManager.Gun1FX);

			return timeToNextShot;
		}

		public function weapon2Level2(weaponPosition:Number3D):Number
		{
			var material:BitmapMaterial = ResourceManager.Bullet2_Tex;
			var timeToNextShot:Number = 1;
			var damage:int = 1;
			var xDir:Number = 1;
			var yDir:Number = 0;
			var yDir2:Number = 0.5;
			var yDir3:Number = -0.5;
			var speed:Number = 100;
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, material, weaponPosition, damage, xDir, yDir, speed);
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, material, weaponPosition, damage, xDir, yDir2, speed);
			new BasicWeapon().startupBasicPlayerWeapon(this.engineManager, material, weaponPosition, damage, xDir, yDir3, speed);

			new SoundEffect().startupSoundEffect(this.engineManager, ResourceManager.Gun1FX);

			return timeToNextShot;
		}

	}
}

In order for the player to have weapons to powerup to, we need to add some more weapon definitions to the WeaponManager.

var weapon2:Dictionary = new Dictionary();
weaponDatabase[2] = weapon2;

weapon2[1] = weapon2Level1;
weapon2[2] = weapon2Level2;

The weapon2Level1 and weapon2Level2 functions are added to the weaponDatabase in the startupWeaponManager function. The code for doing this is exactly the same as the code that added the original weapon definitions. This is one of the benefits of having all the weapon creation code separated into it’s own class. With a few lines of code, and a few simple functions, we can create new weapon definitions, without a whole mess of if/else/switch statements in the middle of the Players enterFrame function.

The code required to implement the powerups has been quite straight forward. As we create the base framework additional functionality, like powerups, becomes quite easy to add to the game. In the next article we will look at finalising this base framework by moving away from the ApplicationManager creating an endless number of enemies towards specifically defined the levels.

Related posts:

• Alternativa 3D Series – Tutorial 2 – Adding Material
• Alternativa 3D Series – Tutorial 7 – Sprite3D
• Alternativa 3D Series – Tutorial 8 – Imposters
• Alternativa 3D Series – Tutorial 5 – Creating Interactivity
• Simulating PicLens with Flex and Away3D – Part 3