Targeting movieclip from an AS3 class file

Now that more and more flash developers are writing AS3 as class file, rather than codes sitting in the timeline, it is important to know how to target movieclip from within an AS3 class file.

For document class file, that is easy and is similar to how to target instance from within the main timeline. So if there is a movieclip named myClip_mc, then it is targeted simply as myClip_mc or this.myClip_mc in the .as document class file.

But what if the .as file is not the document class file, but simply a class used by the document class?

Now try the following:

1. Create a Test.fla and a movieclip symbol named “BlackBox” in the movie library.

2. At the symbol properties panel, turn on Export for Actionscript. The class name would be “BlackBox”.

3. Specify the document class (Test) in the properties panel.

4. Create the Test.as document class with the following code. Note the use of the static variable.

package
{
 import flash.display.MovieClip;
 
 public class Test extends MovieClip
 {
  public static var blackbox_mc:MovieClip = new BlackBox();
  
  public function Test()
  {
   this.stage.addChild(blackbox_mc);
   var myTest:Control = new Control();
  }
 }
}

5. Create the Control.as class file with the following code:

package
{
 public class Control
 {
  public function Control()
  {
   Test.blackbox_mc.y = 100;
  }
 }
}

Now the above technique would work. As noted above the trick is to create a static variable so that it can be referenced from the Control.as file.

But what if the movieclip instance is not programmatically created but instead is created by dragging the symbol from the library window? I don’t know the answer yet. If anyone has some suggestion, please share it here. :)

AS3: Stage or stage?

Have you been confused with the following 2 AS3 keywords: Stage and stage. When to use which? I have been. After some research and testing, here is my findings:

“Stage” is for typing the variable as in:

var target:Stage

“stage” is a property of a display object to refer to the stage of the flash movie as in:

myMovieClip_mc.stage

To confuse the matter further, Stage in itself is also a class in AS3.

Below is an example to illustrate how to use them:

Create a simple flash movie called Test.fla. Creat a movieclip symbol “BlackBox” and make sure its linkage is enabled for export for Actionscript.

Create the following document class Test.as:

package
{
 import flash.display.MovieClip;
 
 public class Test extends MovieClip
 { 
  public function Test()
  {
   var myTest:Control = new Control(this.stage);
  }
 }
}

 Create the class file Controls.as:

package
{
 import flash.display.MovieClip;
 import flash.display.Stage;
 
 public class Control extends MovieClip
 {
  public var box:MovieClip;
  public function Control(target:Stage)
  {   
   box = new BlackBox(); // BlackBox is a movieclip symbol in the Test.fla library
   box.x = 10;
   box.y = 10;
   target.addChild(box);
  }
 }
}

Note the above technique which enables the Control.as class to draw the display(view) of the flash main movie.

Drag-n-Drop file into an AIR app

There has been some update with the AS3 to support AIR beta 3. I hvae recently created an AIR app using Flash that allowed drag and drop of file from the OS desktop. After some testing the following AS3 code worked:

package
{
 import flash.display.Sprite;
 import flash.text.TextField;
 import flash.filesystem.File;
 import flash.events.Event;
 import flash.events.NativeDragEvent;
 import flash.display.MovieClip;
 import flash.desktop.NativeDragManager;
 import flash.desktop.Clipboard;
 import flash.desktop.ClipboardFormats;
 public class Main extends Sprite
 {
  private var dragTarget:Sprite = new Sprite();

  public function Main()
  {
   addEventListener(Event.ADDED_TO_STAGE, doStage);
  }
  private function doStage(e:Event):void
  {
   tv_mc.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, doDragEnter);
   tv_mc.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, doDragDrop);
   tv_mc.addEventListener(NativeDragEvent.NATIVE_DRAG_EXIT, doDragExit);
  }
  private function doDragEnter(e:NativeDragEvent):void
  {
   NativeDragManager.acceptDragDrop(tv_mc);
  }
  private function doDragDrop(e:NativeDragEvent):void
  {
   var dropFiles:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
   for each (var file:File in dropFiles){
    switch (file.extension){
     case “flv” :
     path_txt.text = file.nativePath;
     break;
     case “mp4″ :
     path_txt.text = file.nativePath;
     break;
     default:
     path_txt.text = “Not a recognised file format”;  
    }
   }
  }
  private function doDragExit(e:NativeDragEvent):void
  {
   
  }
 }
}

Enjoy!

eval() is gone is Actionscript 3

I was trying to refer to a movieclip object whose name is computed from a variable. In AS2, I would be using something like eval(variableName).property to read/write to the property of the movieclip. I found that it no longer work in AS3 as eval() has been removed. After some research through the AS3 reference, I found out there is a new method call getChildByName()  under the DisplayObjectContainer class. It goes something like this:

 getChildByName(variableName).x = 100;

The above would set the property of a movieclip with the name stored by the variable variableName.

So when one door is closed, another door would open. :)

Strict Mode and Casting in Flash Actionscript 3

Today I came across a programming error when I tried to find the z-index of the movieclip (my_mc) when it is being clicked. Below was my code:

my_mc.addEventListener(MouseEvent.CLICK, doClick);
function doClick(e:MouseEvent):void
{
 trace (getChildIndex(e.target)); // throw a compiled time error
}

When I tested the movie, Flash returned a complied time error- 1118:Implicit coercion of a value with static type Object to a possibly unrelated type flash.display:DisplayObject.

 I was scratching my head and couldn’t quite figure out what when wrong. It took me a while to realise that Flash was giving me the error because the complier didn’t know that e.target in this case was indeed a movieclip. When I turned off the Strict Mode error warning at the Actionscript 3 Settings at the Publishing Settings page, Flash compiled the movie successfully and everything ran fine.

Naturally I was not satisfied having to ignore the error in order to run the movie. So I did a little more research and found that I could explicity type cast an object if the compiler didn’t know what the object type was. There were bascially two ways to solve the above problem. Instead of:

trace (getChildIndex(e.target));

Replace that with:

trace (getChildIndex(e.target as MovieClip));

Or with:

trace (getChildIndex(MovieClip(e.target)));

 So now I have the proper code that meets the strict typing requirement and can be compiled successfully. :)

Where to put Actionscript 3 codes in Flash CS3 application?

I have been presenting at some eSeminars on Actionscript 3 and always got asked where should we put the codes in a Flash CS3 movie. As of AS3, we can no longer put codes right onto the movieclip or button object itself. I for one wouldn’t miss this as putting codes everywhere can be quite messy. So that leaves 2 other places to put AS3 codes:

  1. frame in the timeline
  2. external file (.as) packaged as a document class file 

Personally I like the 2nd approach better. It totally separates codes from the main movie. The downside for me is that I would have to create a separate as file (called it Main.as for example and set that as the document class) and have to type the following codes manually all the time (assuming Main.as and the flash file .fla are at the same folder):

package
{
 import flash.display.MovieClip;
 
 public class Main extends MovieClip
 {
  public function Main():void
  {
     stop(); // if I need to stop the movie at frame 1

  }
 }
}

As you can see from the above codes, I also have to import the movieclip class as well before I can call the stop() method. I wish AS3 would be a bit more intelligent and would automatically import whatever class that is required to compile the codes. It is a bit of a pain but I would soldier on. With a bit of practice, I would get the hang of it no doubt.

Not receiving emails from Adobe?

Some users have told me that they haven’t received emails from Adobe for sometime and they have missed out on events that Adobe has been hosting. I was told by a colleague that users may want to update their profile at: http://www.updateadobe.com so as to ensure they got sent the emails that match their profile. Adobe doesn’t want to blast out emails to everyone on every annoucement, quite sensibly I may say.

Flash Lite version of HTC TouchCube?

I like what HTC has done to improve Windows Mobile experience with their TouchFLO and TouchCube. Since then, I noticed a few flash developers have mimicked the TouchCube using Flash Lite. Below are 2 versions that both did a very good job:

http://forum.xda-developers.com/showthread.php?t=336234

http://forum.xda-developers.com/showthread.php?t=328010

Way to go!!!

So easy to create transparent Flash-based AIR application window

In my previous post, I said that it was easy for flash developer to develop AIR application. I knew that AIR application could be irregular shape but I didn’t know how to do it. Today I had some time to test it out. At first I thought I would need to create some sort of mask or some shape with alpha channel, etc… Turned out that I didn’t need to do anything other than to specify the Window Chrome style as transparent at the AIR application and installer settings. That easy. Hey I am having fun!

Flash + AIR == Director???

Not quite. But together Flash and AIR provide some capabilities that Flash alone couldn’t do in the past. I am having some fun playing with AIR. The good news is it’s easy for flash developers to learn building AIR apps as it is really like building swf app, except we now have more Actionscripts APIs available. For example the code below can be used to build a flash video (.flv) desktop player which allows user to browse to flv videos in their hard drive and play it through the flash video component.

import flash.filesystem.*; 

var fileChooser:File  = File.documentsDirectory;
var currentFile:File;

browse_btn.addEventListener(MouseEvent.CLICK, doClick);
fileChooser.addEventListener(Event.SELECT, doSelect);

  function doClick(e:MouseEvent):void
  {
   if (currentFile)
   {
    fileChooser = currentFile;
   }
   fileChooser.browseForOpen(”Open”);
  }
  function doSelect(e:Event):void
  {
   currentFile = e.target as File;
   fl_vid.source = fileChooser.nativePath; // fl_vid being the flash video compoment
  }

 There are of course much more to AIR than the above. That’s why AIR is so exciting. But before I got carried away, AIR doesn’t support launching of native app yet. Not even with fscommand. But it is only version 1 beta 2 at present, so things can only get better from here.