XNA Bone Based Animation

I willl show you how you can accomplish in XNA relative transforms like the ones shown in the next video.

Zend Framework , wamp and bootstrap!

I’m starting on the zend framework and, like many people ( I hope -.-’ ), I had some problems with the bootstrap and the Zend_Application API. I spent almost 3 hours today trying to understand the source of the problem that I found and yes, it was REALLY stupid!

I’m developing a web application with this simple file structure:

file structure

As you can see I have a modules directory and an “admin” module. This app consists in a web store for motor electrical parts and it will have and administration part that will allow the client insert new products, manage stock, manage clients, manage requests, etc, and the default module is for searching products and present products basically. The main problem for me was how could I setup zend in order to recognize my module and after some googling  i found some answers:

• http://monzee.wordpress.com/2009/06/08/modular-applications-in-zf-1-8/
• http://www.zfforums.com/zend-framework-general-discussions-1/general-q-zend-framework-2/boostraping-modules-models-all-fun-3068.html
• http://blog.vandenbos.org/2009/07/19/zend-framework-module-specific-layout/
• http://framework.zend.com/manual/en/zend.controller.front.html
• http://framework.zend.com/manual/en/zend.application.available-resources.html#zend.application.available-resources.frontcontroller

So basically you can incorporate your modules with the rest of the application with the Zend_Controller_Front using setControllerDirectory, addControllerDirectory or through the Zend_Application Resources but basically it is the same as with the Zend_Controller_Front however you use the Zend_Application and the config file.

So where would you do that? Simple, in your application bootstrap file!

Let’s see some examples:

• Let’s do it with the Zend_Front_Controller API. In your bootstrap if you make one function protected and with the name starting with _init then it will be executed automatically as if it was an resource ( check out ) :

class Bootstrap extends Zend_Application_Bootstrap_Bootstrap{
protected function _initSetupModulesDirectories(){
$front = Zend_Controller_Front::getInstance();
$front->setControllerDirectory(array(
'default' => APPLICATION_PATH . '/controllers',
'admin' => APPLICATION_PATH . '/admin/controllers'
));
}
}

• The next example is basically the same but not using directly the Zend_Controller_Front class, instead it uses the frontController  resource!

class Bootstrap extends Zend_Application_Bootstrap_Bootstrap{
protected function _initSetupModulesDirectories(){
self::$frontController = $this->getResource('FrontController');
self::$frontController->setControllerDirectory(array(
'default' => APPLICATION_PATH . '/controllers',
'admin' => APPLICATION_PATH . '/admin/controllers'
));
}
}

• Now using addControllerDirectory():


class Bootstrap extends Zend_Application_Bootstrap_Bootstrap{
protected function _initSetupModulesDirectories(){
$front = $this->getResource('FrontController');
$front->addControllerDirectory(APPLICATION_PATH . '/admin/controllers','admin');
}
}

• And for the last but not the least let’s use the application.ini to load the modules directory and plus set up resource autoloaders for models, forms, services, etc:

Open up your configuration file (application.ini) and add this:
resources.modules = ""
resources.frontController.moduleDirectory = APPLICATION_PATH "/modules"

This will initialize the module resource plugin and set the modules directory! Next what we need to do is create a bootstrap file for your module directory (application/modules/admin/Bootstrap.php).

It must be something like this:

class Admin_Bootstrap extends Zend_Application_Module_Bootstrap{
}

Pay attention the the class name, it starts with Admin_, this is named the PEAR convention for class names, don’t forget about it!

And finally in the application bootstrap class just add:
protected function _initAutoload()
{
new Zend_Application_Module_Autoloader(array(
'basePath' => APPLICATION_PATH,
'namespace' => '',
));
}
This will initialize the resource autoloaders for the default module. (An explanation of autoloaders here)

I hope this can help you and give you and idea with modules and boostraping. Just a quick tip, be carefull with typing errors, do not be like me! I’ve been 3 hours around one problem and the real problem was that I created a virtual host on apache (working with wamp) and there I’ve specified that the directory was for C:\wamp\www\mypage\public however the real name of the directory was Mypage with a big M and this was enough to let htaccess block all the request for http://mypage/index/ or http://mypage/admin ….

Happy coding and happy personal life xP

Create your own custom menu in Flex 4

Hi there, what I’m bringing here today is a “kind of tutorial” on how to build your own custom menu with the new Flex 4. I’ll be mostly talking about skinning and you’ll see that this maybe is the most power full tool on the new Flex SDK.Before we start let’s just see an image with the final result, IMO it came out pretty well, what do you think?

So let’s just start…

Create a new project on Flash Builder(if you don’t have it yet you can grab the 30 days free license at adobe website) and lets create three folders: Components, Events and Skins. This way we can get things in order. First lets start with the skins, to what we need to achieve, we need to custom skins, one for each button and one for the background of the menu, right?^^

For the button skin we have this little amount of code:

If you come from Flex 3 you might be wondering, what the heck are those mxml tags?oO Calm down, calm down! As you might know, Flex 4 supports fxg so we can use fxg tags and this is suppa duppa cool because you can jump to you Adobe Illustrator, draw whatever you want, export for .fxg, open that image with any text editor, copy that code,past it to flash builder, run it and voilá, you get that image rendered in your application!Adding to that we can even use binding methods with it so that, for example, we get some dynamic width or height!Let’s just see what this does:

first of all you can see this is a Skin type component, and this let us assign this skin to the skinClass property of any skinnable component.But how do we specify that this this skin is for one Button?Simple, you just need to add the metadata HostComponent.

As you know,base Button has 4 states: up, down, over, disabled, but we are going to use the toggle Button in order to get the selected state, so we end up with this more states: upAndSelected, overAndSelected, downAndSelected and disabledAndSelected.

Next we start the real “drawing” and we want to create one background filled with a gradient:

As you could see, every buttons have a separator between them.If you want the button to be dynamic then we need to get a solution to make those separators appear automatically, and we do this by creating a right margin on each button..simple uh?xP

And for the last, the dynamic text on the button:

What we do to get dynamic text is just make a reference to the hostComponent.label property, see that our HostComponent makes reference to the togglebutton class, and the ToggleButton component has one property named label, so all we have to do is to bind that label to the text property of the SimpleText component and we do that with text=”{hostComponent.label}”.You can see that the text color is black however we want to make it red when we mouse over it or select it, and we can do this by simple do color.nameOfTheState = “#wantedColor”.

For the button skin, thats it! Next is the skin for the background.

Well, this is pretty much the same as the button skin so I wont explain the code.

Now we create a new component based on the SkinnableContainer and place it on the Components folder. This is going to be the content holder for the buttons that makes our menu.

I think the comments on the code say it all, however don’t hesitate to ask me anything!

And for the last the custom event:

Now all you have to do in order to get it working is this:

That’s it, hope you liked

Flash + Action Script 3 = 3DSlider

I’m bringing you one component I’ve made with flash and action script 3. I’m not going to post the source code now because it needs to be refined and commented but asap I post it here   Check out the demo!

This loads an XML that contains the source path for the image and a title for the image so that when you click in one image it flip over the y axis and shows the title.

Welcome

Hi there, welcome to my blog! This is the first ever made for me and I’ll be talking about RIA Development and technology related topics, hope you enjoy the content!