Teky - Techy - Techno Zone Blog

Set up Actionscript 3 Development Environment

2008-07-22T11:00:00.000-07:00

If you are new to Actionscript and its development, you may ponder over what I need to write a pure Actionscript application. With advent of Flex, flash programming is getting easier. You don't have to be a Flash CS guru to write flash applications. All you need is to set up the actionscript development environment using Flex SDK, and use your favorite text editors to write the programs and compile them into flash applications from commandline. Of course, you need some kind of programming background.
Here is what you need to basically get you going:

A text editor so that you can write some code. Notepad, Textpad, VI, Emacs and JEdit etc. Any your favorite editors should do the work for you
Flex SDK, you can download Flex 3 SDK from here
Adobe Flash Player - Debugger versions for Flex and Flash developers. You can download it from here
Unzip Flex SDK into a directory, and add Flex's bin directory to your PATH so that you can invoke mxmlc and other Flex tools from commandline
Actionscript documentations, I am sure you need to read some documents so that you will get familar with the language if you are a serious player. You can read or download a copy from adobe

Now you are all set, and start writing your actionscript programms and compile them.
I have a simple tutorial on Create a Simple and Pure ActionScript 3 Application. It should be simple enough to follow. Good luck

Setup Netbeans PHP Debug Environment with XDebug

2008-07-22T10:41:00.000-07:00

Netbeans IDE is a free, open-source Integrated Development Environment for software developers. You get all the tools you need to create professional desktop, enterprise, web, and mobile applications with the Java language, C/C++, Ruby and PHP. NetBeans IDE runs on many platforms including Windows, Linux, Mac OS X and Solaris.
The NetBeans IDE Early Access for PHP was released in April at the same time as NetBeans 6.1. Milestone 1 of NetBeans 6.5 now contains all features introduced in this release.

Setting up Netbeans PHP environment with XDebug is easier compared with Eclipse IDE. The most important step of setting up PHP with Xdebug in Netbeans is to configure PHP and XDebug, here is how:

Check your PHP version by executing:
php -v

Now you will get something like:
PHP 5.2.2 (cli) (built: May 2 2007 19:18:26) Copyright (c) 1997-2007 The PHP Group Zend Engine v2.2.0, Copyright (c) 1998-2007 Zend Technologies
Now you go to XDebug.org to download XDebug module corresponding to the PHP version installed on your machine as shown above, and put XDebug module into PHP's extension directory or somewhere else
Now add the following to your php.ini which is normally under your PHP installation directory
[xdebug] xdebug.remote_enable=1 xdebug.remote_host=127.0.0.1 xdebug.remote_port=9000 xdebug.remote_handler=dbgp zend_extension_ts=D:\tools\php\ext\php_xdebug-2.0.3-5.2.5.dll
Now start up Netbeans 6.5 M1 or above (as of this writing, Netbeans 6.5 M1 is just available). You can download it from http://www.netbeans.org
Go to Tools -> Options menu to bring up Netbeans Options dialog
Select Miscellaneous button on top of the dialog and Click PHP tab, you will see the following

Basically you don't need to do anything unless you want to change some settings such as where php.exe is located at, how do you want to output the result, debugger port (default to 9000), whether you want debugger to stop at the first line of the php files etc

You may need to write a simple PHP script to test if it's working locally, if so then your installation is fine. Otherwise, make sure you follow the above steps

That's it. Simple and easy.

My Settings: Netbeans 6.5 M1, PHP 5.2.2 and XDebug

Embed assets in Pure ActionScript Applications

2008-07-21T14:55:00.000-07:00

After creating a pure actionscript application by following this article, you may also want to add some resources such as images, mp3 and even videos etc. Using embedded assets in actionscript applications is not so straightforward, as stated in Flex documents Flex supports the following syntaxes to embed assets in Flex applications:

[Embed(parameter1, paramater2, ...)] metadata tag
You use this syntax to embed an asset in an ActionScript file, or in an <mx:script> block in an MXML file.
@Embed(parameter1, paramater2, ...) directive
You use this syntax in an MXML tag definition to embed an asset.
Embed(parameter1, paramater2, ...) directive
You use this syntax in an <mx:Style> block in an MXML file to embed an asset.

It's kind of tricky to figure out how to access these embedded assets from actionscripts, I had to spend precious time figuring out how to use these assets from Actionscripts, especially for these actionscript classes under specific packages.

It turns out the solution is fairly straight, what you need to make it work is accessing assets using the correct path, assume that all assets are under assets directory which is a subdirectory of your application root. Here is a sample root directory, the root is helloworld and assets are under assets subdirectory, helloUtil.as is with hello.util package:

helloworld/helloword.as
        /assets/bg.jpg
        /assets/ball.png
        /hello/util/helloUtil.as

now you can access these two images in helloworld.as:

   [Embed(source="assets/bg.jpg")]
 public var bgImg:Class;

 [Embed(source="assets/ball.png")]
 public var ballImg:Class;

Without putting assets in the correct directory you will get the following compiling errors:

   Error: unable to resolve 'bg.jpg' for transcoding

Now if you structure your classes using packages and you also want to access assets directly, then you must access them like:

   [Embed(source="/assets/bg.jpg")]
public var bgImg:Class;

[Embed(source="/assets/ball.png")]
public var ballImg:Class;

Pretty straight, huh, but for a novice it will take sometime to figure this out. And I am hoping you will benefit from it

Ways to set width and height for pure ActionScript applications

2008-07-15T23:36:00.001-07:00

Mikemo's blog "Setting the width and height of a pure-ActionScript application"
mentioned a way to set width and height of a pure actionscript application using meta tag:

But for pure-ActionScript projects, it isn't so obvious. The way to do it is to use the SWF metadata attribute above the declaration of the class:
package {
   [SWF(width="300", height="200")]
   public class MyApp extends Sprite {
      ...
   }
}

Kevin Hoyt also left a comment in Mikemo's blog stating:

You can also set the width, height, stage [background] color, and frame rate as a compiler argument.

Here is the option:

default-size width height -- Defines the default application size, in pixels.

Or you can even set width and height in flex configuration file as the following:


<?xml version="1.0" encoding="utf-8"?>
<flex-config>
   <default-size>
      <width>800</width>
      <height>600</height>
   </default-size>
</flex-config>

Create a Simple and Pure ActionScript 3 Application

2008-07-15T22:37:00.000-07:00

I am not only new to Flash and Flex development but also ActionScript. But I am pretty familiar with javascript and started to learn Flex and Actionscript development recently for a project. And most of our code is based on Flex mxml and Actionscript 3 classes. Here is what I read from Adobe regarding Flex applications:

Flex application are built using MXML and ActionScript. MXML is an XML markup language that you use to lay out user interface components MXML application. ActionScript is the programming language for the Adobe® Flash® Player and Adobe® AIR™run-time environments. It enables interactivity, data handling, and much more in Flash, Flex, and AIR content and applications.

But I heard/read that we could write a pure actionscript based flex application, so I tried to do a search on google and yahoo, disappointedly, I was unable to find an article/document to talk about it. After reading Flex Programming ActionScript 3 (a PDF programming guide), I could not find a good hint to do that either. But I finally managed to figure out that it's a very simple process. What you need to make an actionscript based flash application is that there is a main class which is either an instance of Sprite or MovieClip. Here I'd like write down what I learned in hoping it will help others too, especially those newbies like me.

First, make sure you have Flex 3 SDK installed, if you haven't done so, please grab it from http://www.adobe.com. This is pretty much what you need to write a simple application like "Hello, world" plus so simple drawing. If you really need an IDE to help you on writing code, then you can have Flex Builder but it's very costly though. However, you can get a trial copy from the official website for 60 days free trial period. You may also twist Eclipse IDE to do the work, but you need to google it up yourself.

Ok, let's start the journey.

Now, create a file called hello.as using your favorite editor. You can give your actionscript file any name but you need to change the following code accordingly since the compiler requires you to have a classname same as the filename.

And put the following code in hello.as:


package {
import flash.display.Graphics;
import flash.display.Sprite;
import flash.text.StyleSheet;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;

public class hello extends Sprite{
public function hello():void {
var w:int = 100;
var h:int = 50;
var x:int = 50;
var y:int = 5;
var g:Graphics = this.graphics;
g.lineStyle(1, 0xff0000, 0.6);

g.moveTo(x, y);
g.lineTo(x+w, y);
g.lineTo(x+w, y+h);
g.lineTo(x, y+h);
g.lineTo(x, y);

var tf:TextField = new TextField();
var fmt:TextFormat = new TextFormat();

fmt.color = 0xFF0000;
fmt.size = 18;
tf.defaultTextFormat = fmt;
tf.x = 150;
tf.y = 100;
tf.height = 150;
tf.width = 150;
tf.htmlText = "< h2>Hello,world!</h2>";

this.addChild(tf);
}
}
}

Next, let's compile it using mxmlc from commandline. Note you need to add your flex/bin to your path , otherwise your shell won't be able to find it.Issue the following and press enter to let it compile:

mxmlc hello.as

There are many mxmlc options you can use, for example, -o to specify a different SWF output file. -debug to generate a movie that is suitable for debugging etc. I didn't use any though. You can use as many as you wish ;-)

And you should now see a SWF file called hello.swf, you can start it up by double click it or type hello.swf at commandline and press enterThat's it.

You can explore more once you get started with this little class