Showing posts with label pure actionscript application. Show all posts
Showing posts with label pure actionscript application. Show all posts

Tuesday, July 22, 2008

Set up Actionscript 3 Development Environment

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:
  1. 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
  2. Flex SDK, you can download Flex 3 SDK from here
  3. Adobe Flash Player - Debugger versions for Flex and Flash developers. You can download it from here
  4. 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
  5. 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

Monday, July 21, 2008

Embed assets in Pure ActionScript Applications

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:
  1. [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.
  2. @Embed(parameter1, paramater2, ...) directive
    You use this syntax in an MXML tag definition to embed an asset.
  3. 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

Tuesday, July 15, 2008

Create a Simple and Pure ActionScript 3 Application

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