Tag: Actionscript

Categories
Haxe

haXe and NME IDE and Editors OSX

Update #1: The Haxe MonoDevelop add-in is now available in the official add-in repository So starting with haXe development got easier! (check the MonoDevelop add-in repository). Updated install

I’ve been playing around with haXe for some time now. And when you do that, you will automatically notice NME.

HaXe is really awesome and very easy to learn when you are a ActionScript (AS3) developer. (NME has a great cheat sheet which also works for haXe).

But this post is not about explaining haXe or NME (just read the links I provided) and it’s not a tutorial about programming in haXe.
This is about programming: an IDE to help you develop much quicker.

There are a lot of IDE which support haXe: just check it here.
It seems like a big list…. but not entirely true…
For windows it’s easy: just get FlashDevelop.
Before I moved to OSX, I did all my Flash development on it and it rocks!

But for OSX it’s not that easy. So it comes down to a few contenders…
Sadly Sam Brick beat me with writing about this subject.
He only ends up taking another route… because there was no other choice.

But because I already started writing this post, I will finish it.

First I tried the editor I use for my Actionscript programming:

FDT 5 (PC, Mac and Linux) (free and €249/€499)

FDT is a commercial product (FDT max) but there is a free version (FDT free). And both version support haXe.
Although I love FDT for AS3 programming, I don’t feel that way for haXe. I miss to many features I have in the AS FDT (templates, trace, snippets, format, autoimport). It also feels very sluggish (I know Eclipse doesn’t help with that, but it feels soooo slow compared with the as3 counterpart.). And it doesn’t support NME and so although I wrote FDT templates for NME, it doesn’t help you.
FDT made a clever move adding haXe to its editor, but it should be labeled beta.

So I moved to my second editor on OSX:

TextMate (Mac only) (€44.85)

TextMate is a commercial product, but it will not set you back that much. You can try it for 30 days. And it’s awesome. I use it to open files quickly.
But what I don’t like about TextMate is the autocompletion… it’s under escape… doesn’t feel natural.

So my search brought me to a new editor:

SublimeText 2 (PC, Mac and Linux) (USD $59)

SublimeText 2 is a commercial product just like TextMate. You can evaluate this product for free and there is currently no enforced time limit for the evaluation.
This one is very good, still in beta but very useable.
You need to install the haXe bundle: the instruction can be found here

The haXe Sublime Text 2 bundle enables:

  • haXe compiler code completion and hints
  • syntax highlighting and basic completion for hx, hxml, hss and nmml files
  • Sublime build system integration
  • hxml parsing, automatic creation, and multiple build management (ctrl+shift+b)
  • supports NME projects (nmml)

This editor would have been my choice if there was no MonoDevelop (just wait and you will see 😛 ).

Another great solution would be:

IntelliJ IDEA (PC, Mac and Linux) (from €94 -> €664)

IntelliJ IDEA is a commercial product that you can try out for 30 days. It’s the choice that Sam Brick ended up with. I can’t tell you much about it.
I did install it but haven’t tried it simple because I already have FDT (set me back €499) and IntelliJ would cost another €189 (Personal license) for experiments.
But it seems very powerful and I know some AS3 developers who use it, so in that scenario IntelliJ would be the obvious choice.

Here comes the most promising editor (for now):

MonoDevelop (PC, Mac and Linux) (free!)

MonoDevelop…. it even sounds like FlashDevelop and its free like FlashDevelop. This is so new that there is not a lot of blogging done about it (Saumya beat me to it 🙁 )
This is one awesome project which is so new it still has ribbons on it! One of the lead programmers of NME; Joshua Granick asked himself why FlashDevelop (his code editor of choice) couldn’t be ported to Linux and OSX.
He learned from previous attempts and made a start with it… and it works!

I’m not going to repeat what Joshua said; just go and visit his blog and read about it (and then return here again…. I’ll just wait for a minute of two) FlashDevelop for Mac/Linux: Part 1

If you want to know about the latest development of this addin, you can follow Joshua on twitter: @singmajesty.

Currently you have to copy the .dll from the git repository to a the correct folder but then it should work fine.
But that can change very quickly:

I’m waiting for MonoDevelop to allow my add-in in the official (beta) repositories. That will make it much easier to upgrade in the future

source


Note:
Oh still here? You want to know how to get started?
First you need to download MonoDevelop.HaxeBinding.dll from Github: press the button “Raw” and the file will be downloaded.
Then you need to copy it in the folder: ~/Library/Application Support/MonoDevelop-2.8/LocalInstall/Addins.
This folder will not be there so you need to create it for yourself (this path is when you use OSX and installed the latest MonoDevelop).

Don’t feel very comfortable doing that?
MonoDevelop can create the folder for you … but you still need to copy the .dll yourself.
goto: MonoDevelop > Add-in manager… > gallery > IDE extensions > Specflow Support > install…
and then uninstall it again (folders are made, but you don’t need the extension)


You don’t have to install it by hand… just goto:
MonoDevelop > Add-in Manager > Gallery tab > Language bindings > Haxe language Binding

This is not the latest version (as fare as I know) so if you are more adventurous the github download and install is still the way to go (that’s what I’m doing).

Categories
AS3 FDT

Moving from FlashDevelop to FDT

Yes, its time, I need to…
So how to make the transition from FlashDevelop to FDT as easy as possible?

Let FDT react like FlashDevelop

And I don’t even have to break a sweat: the amazing Steven Sacks (creator of Gaia) wrote an article about it: read here.
The only two thing that I’m using are:
Open Window > Preferences

Under FDT > Editor > Code Assist copy and paste this into Auto activation triggers for AS, and set the delay to 0ms (zero).

abcdefghijklmnopqrstuvwxyz_. :

and

Under Problems > AS3 Problems:
Unresolvable > Unresolvable variable reference in E4X and Unresolvable member reference in dynamic object should both be set to Disabled (from Warning to Disabled).

The shortcuts I just left them as they where: I’m working in another program so I should use the shortcut given by that program.

Update #1: hmmm I noticed that I can’t live without CTRL+ENTER…. explanation here: Using CTRL-ENTER to compile ActionScript code in FDT. So now I have CTRL+ENTER and debug run: CTRL+SHIFT+ENTER 😀

short explanation (so I can do this quickly if something happens to FDT):

Under Preferences > Run/Debug > Launching at the bottom at Launch Operation: Select “Always launch the previously launched application”

then

Under Preferences > General > Keys find (or type in “type filter text” – searchbox: “last”) a command called “Run Last Launched” and click Copy Command. Assign (binding) the shortcut CTRL-ENTER to the copied command and change “when” to Editing ActionScipt Source (no spelling mistake: it really says that) Editing ActionScript Source.
Do the same thing for the “Debug Last Launched” command and assign the shortcut : CTRL-SHIFT-ENTER and change the when to Editing ActionScipt Source.

I’m not sure if the stuff I wrote here is only for FDT4 but the way it was explained on the site previous mentioned didn’t work in FDT4

Some templates/snippets that are very useful

I used this plugin for my trace in FlashDevelop, so how to do this in FDT?

Update #2: I shouldn’t forget to mention CTRL+0 (read the shortcut list for FDT) which is the shortcut for “Quick Trace”. This one I use to trace variable for example and the trace template below for functions.
Update #4: This is really a reminder for myself, but if you need it you know where you can find it in FDT4.
Some minor adjustments like:

Preferences > FDT > Build Path change Source folders to “source” (I like source above src) and Output folder to “deploy” (I like deploy above bin)

Preferences > FDT > Code Style > Code Templates (Misc) to “Override System UserName – ${user}”

Preferences > FDT > Editor goto “Folding” and uncheck “Folding enabled” (I like to see everything, comment also)

Preferences > FDT > Tools > Flash/Flash Help to add paths to Flash (in my case: “H:\Program Files\Adobe\Adobe Flash CS4\Flash.exe”) and the Flash help files (in my case: “H:\Program Files\Adobe\Adobe Flash CS4\en\First Run\HelpPanel\Help”)

Preferences > General > Web Browser change to “Use external Web browser” to my favourite browser: Firefox (no Google Chrome there yet)
You can add any browser that you want.

Update #5: visit http://www.rumblingskies.com/blog/?p=75 and add FTP capabilities to ANT.

You have to create a code-template/code-snippet:
go to Preferences > FDT > Editor > Templates

This is a template that resembles the trace I used in FlashDevelop
Trace:

trace ( "+ ${enclosing_type}.${enclosing_method}() - args: " + [ ${enclosing_method_arguments} ] );

and I found some other useful templates

Public method:

public function ${methodName}():${type} {
    trace(">> ${enclosing_type}.${methodName}() args: "+[]);
    ${cursor}
};

for some strange reason there is no shortcut for asdoc 🙁

ASDoc:

/**
 * ${cursor}	
 * @example	
 * @param		${enclosing_method_arguments}
 * @return	 	
 */	
 */
Update #3: (sadly if there are no param in the function “${enclosing_method_arguments}” will be printed..)

a switch a use a lot with FlashDevelop:

Switch:

switch (${value}) {
	case ${result}:
		trace ("${result}" +${result} );
		${cursor}
		break;
    default:
        trace("case '"+${value}+"':\r\ttrace ('--- "+${value}+"');\r\tbreak;" );
}

and the template for a singleton

Singleton: (from gskinner)

package ${enclosing_package} {

	/**
	* @author ${user}
	*/
	public class ${enclosing_type} {
	
		private static var _instance:${enclosing_type};
		private static var _allowInstantiation:Boolean;

		public static function getInstance():${enclosing_type} {
			if (_instance == null) {
				_allowInstantiation = true;
				_instance = new ${enclosing_type}();
				_allowInstantiation = false;
			}
			return _instance;
		}

		public function ${enclosing_type}():void {
			if (!_allowInstantiation) {
				throw new Error("Error: Instantiation failed: Use ${enclosing_type}.getInstance() instead of new.");
			}
		}
		
		${cursor}
	
	} // end class

} // end package

enough for now, here some other posts about the subject

Source:
http://blog.hydrotik.com/2007/11/19/fdt-30-code-templates/
http://www.breaktrycatch.com/useful-fdt-templates/
http://www.stevensacks.net/2010/04/30/setting-up-fdt-to-look-and-behave-like-flashdevelop/
http://www.gskinner.com/blog/archives/2006/07/as3_singletons.html
http://blog.flashmech.net/2008/08/review-fdt-vs-flashdevelop/
https://fosswiki.liip.ch/display/FLASH/Code+Snippets+for+FDT+and+Flex
http://cote.cc/blog/using-ctrl-enter-to-compile-actionscript-code-in-fdt
http://www.fdt.powerflasher.com/developer-tools/fdt-3/getting-started/shortcuts/
http://blog.flashmech.net/2008/10/fdt-tip-boost-your-code-assist/

Categories
AS3 Flash

What a Flash / ActionScript Developer needs to know

Yesterday I saw this post in my RSS feeds, and I just want to remember this (and make sure that I’m really a senior 😉 )

So here is a list of stuff you need to know when you say you are a senior Flash/ActionScript developer:
http://pv3d.org/2009/08/28/10-things-every-senior-flash-developer-should-know/

I don’t like to regurgitate so I only show you the top 10, for examples visit the list by John Lindquist

  1. The Elastic Racetrack
  2. FlexSDK, mxmlc, compc, and all that jazz
  3. Player Events, Custom Events, Event Bubbling
  4. Statements, Keywords, and Directives
  5. ASDoc
  6. Managing visual assets (images, fonts, CSS, etc)
  7. Arrays, Collections, Dictionaries, Mapping
  8. Programmatic motion (tweening, easing)
  9. OOP and Coding Against Frameworks
  10. Version control

And after reading this I remembered gskinner had a similar list:
http://www.gskinner.com/blog/archives/2009/07/flash_actionscr.html

This is a bigger list and a lot of comments, so you need to visit the list and read it and all its comments

Another post about the subject: “Things Every Flash Developer Should Know” –> http://gskinner.com/talks/things/

Categories
AS3 Flash Open source / Freeware Tools of the trade

FlashDevelop 3.0.0 released

My favorite open source project ever, FlashDevelop has released: FlashDevelop 3.0.0 RTM (English, 4MB) .

I started with coding in the Flash IDE, when I realized that there are better programs to code in I started working with SE|PY (ActionScript 2 only). I really loved that program, but it never made it to ActionScript 3 and so I tried FlashDevelop. I have never regretted it, it a beautiful piece of work and I can’t work without it.
So if your pockets aren’t deep, and want to become a better AS2/AS3 programmer. you should try this program.

The only sad thing is that it’s Windows only.

Categories
Flash Misc

Notepad++ opens ActionScript file with Haskell syntax highlighting

Sometimes I open ActionScript files in another editor then FlashDevelop. And in my case this is Notepad++.
Notepad++ has ActionScript syntax highlighting but it seems that it doesn’t detect it.
When I open an AS file it uses the Haskell syntax highlighting, and that is very annoying especially when you open a couple of files and you need to set them one by one to ActionScript.

Google (who else) provided the answer: here.

This is what you do:
find and open the langs.xml file
you can find it in the install folder of Notepad++, in my case
C:\Program Files\Notepad++

find the haskell language
< Language name="haskell" ext="hs lhs as las" commentLine="--" >

and remove “as” from the ext and save the file.

Next time you open an AS file with notepad++ it will be highlighted in the correct syntax

🙂

Categories
AS3 AS3 migration Flash

Document Class in AS3

A while back a read this post about the AS3 Pills #1 – Document class and it reminded me to write something about the “Document Class”. The title of this post is a little misleading: there is no “Document Class” in Actionscript 2 but this is probably the way you are searching for this problem.

A good explanation can be found on kirupa.com which has a ton of examples, explanations and tutorials!

But this is what it comes down to:

  1. create a folder with the name “Matthijs tutorials” (or use your own name, it’s not important)
  2. create in the folder “Matthijs tutorials”, another folder “source”
  3. save a flash file in the “source” folder: “documentClassTest.fla”
  4. now we start making packages: create a folder “nl”
  5. and save in folder “nl” a folder “matthijskamstra “
Folder structure (FlashDevelop)
Folder structure (FlashDevelop)

Goto Adobe Flash, and create a AS3 Flash file and save it in the source folder.

Fill in the document Class: nl.matthijskamstra.Main
(Flash will complain somewhat, you can ignore it for now…)

Document Class
Document Class

Create a new class in the folder matthijskamstra, default (at least the default Flashdevelop class) it will look something like this.
[as]
package nl.matthijskamstra {

/**
* @author Matthijs Kamstra aka [mck]
*/
public class Main {

public function Main () {

}

} // end class

} // end package
[/as]

If you would compile the .FLA now you will get an error (Compiler Errors):

Location: Main.as, Line 1
Description: 5000: The class ‘nl.matthijskamstra.Main’ must subclass ‘flash.display.MovieClip’ since it is linked to a library symbol of that type.

(if you compile using flex you will get this error)

Error #2023: Class Main$ must inherit from Sprite to link to the root.

The first time I got this error I couldn’t understand it, luckily I do now and the answer isn’t that difficult, but if you don’t know… 🙁

  • The class ‘nl.matthijskamstra.Main’ must subclass ‘flash.display.MovieClip’: the class that we just made needs to extend (be a subclass) of Movieclip (the root has a timeline)
  • since it is linked to a library symbol of that type: this is strange, this says that the class is linked to a library symbol. This what puzzled me the most: I (we) didn’t link this to a library item, we linked it to the document class. The Flex error helps more, but you can see the root as a very big movie (timeline) and let the error be the error.
  • Error #2023: Class Main$ must inherit from Sprite to link to the root.: why does flex say you need a to extend Sprite? Flex programmers don’t use the timeline and a Sprite is a Movieclip with just one frame.

So to sum things up: there are some stuff that you need to do with a document class that you don’t have to do to an other class:
First you need to extend it to Sprite or MovieClip. If you create more then one frame in the timeline you need to extend to MovieClip because MovieClip supports frames and Sprite doesn’t. I always choose to extend to MovieClip, because it covers all the bases… (a Sprite is a MovieClip with just one frame: a Sprite is not a MovieClip but a MovieClip is a Sprite)

Another error that seems to happen sometime (not if you use the default class from FlashDevelop)
Second a document class should be public (the constructor is always public).
A Constructor is a function or method that is called whenever the Class (in our case the document class) gets instantiated, it must never have a return type such as “void”

Don’t forget you need to import the MovieClip class: import flash.display.MovieClip; (see the error created by Flash)

So the Document Class looks now something like this:

[as]
package nl.matthijskamstra {

import flash.display.MovieClip;

/**
* @author Matthijs Kamstra aka [mck]
*/
public class Main extends MovieClip {

// constructor
public function Main () {
trace( “Main.Main” );
init ();
}

private function init ():void {
trace( “Main.init” );
}

} // end class

} // end package
[/as]

Export you Flash file and you will have two traces in you output panel

My default class looks similar, I add two group-imports:

	
import flash.display.*;
import flash.events.*;

with the “*” you import everything in that package (MovieClip, Sprite, etc)
because AS3 is event based, I import everything in the events-package

[as]
package nl.matthijskamstra {

import flash.display.*;
import flash.events.*;

/**
* @author Matthijs Kamstra aka [mck]
*/
public class Main extends MovieClip {

// constructor
public function Main () {
trace( “Main.Main” );
init ();
}

private function init ():void {
trace( “Main.init” );
}

} // end class

} // end package
[/as]

That’s it, I hope this clears the mystery called Document Class
Questions? You know where to place them!

Linkdump:
another post that I never finished, but it fits here…

Andrew Paul Simmons: Blog: ReferenceError: Error #1056: Caused by Declaring Stage Instances Private.

Ever got this error: ReferenceError: Error #1056: Cannot create property? No, then someone has explained it to you before you made this mistake.

Categories
AS3 AS3 migration Flash

From AS2 to AS3 – Where did it go – random

This is one that I figured out pretty quick.

What has the ActionScript 2.0 Migration to say about this subject:

ActionScript 2.0  ActionScript 3.0  Comments
random() Math.random() Removed. Use Math.random() instead.

I could have seen that coming:

Deprecated since Flash Player 5. This function was deprecated in favor of Math.random().
Returns a random integer between 0 and one less than the integer specified in the value parameter.

Source: as2 help documentation.

I was still using it a in Flash 6 and higher, but now I have to change that habit.

And now we come to an annoying point: if you go to the as3 help documentation you only get an explanation but not a nice piece of example code. I don’t know why they changed that, but I don’t like it.

So this is the explanation from the as3 help for Math.random()

Returns a pseudo-random number n, where 0 <= n < 1. The number returned is calculated in an undisclosed manner, and pseudo-random because the calculation inevitably contains some element of non-randomness.

with some example code from as2 (functionality isn’t changed)

[as]
// The following example outputs 100 random integers between 4 and 11 (inclusively):
function randRange(min:Number, max:Number):Number {
var randomNum:Number = Math.floor(Math.random() * (max – min + 1)) + min;
return randomNum;
}
for (var i = 0; i < 100; i++) { var n:Number = randRange(4, 11) trace(n); } [/as] the way I using it was somewhat simpler then the example

AS 2

There are a couple of ways to do that in ActionScript 2:

Example #1
[as]random(10)+1; // to get a number between 1 and 10 (1 and 10 included)[/as]

AS 3

Lets try this in ActionScript 3:

Example #1
[as]Math.floor(Math.random()*10)+1; // to get a number between 1 and 10 (1 and 10 included)[/as]

Just make a snippet out of it, and you have never to search for this answer…

Categories
AS3 Flash

AS3 Flash Physics Engine Box2D

I was looking for a physics engine for Flash so I started looking for one… there are a lot of engines…
I won’t mention them all, there are enough people who did that already (here, here, here and here)

If the list is that big, how to choose?
Well I also want to use it with papervision3d so I googled on that and if someone checked out a couple of engines (this guy checked out 3).
And in one of my rss feeds there is a guy who builds games, and now it writing tutorials for box2d 😉

So I decided on box2d.

Box2D is an open source physics engine written primarily for games. As the name suggests, Box2D is a purely 2D engine. However, Box2D has grown beyond it’s humble box simulating roots, and can now handle convex polygons and other shapes coming soon.

Box2D is written in C++, but there is a port to as3: AS3 Flash Physics Engine Box2DFlashAS3 2.0.1.

[swf]http://box2dflash.sourceforge.net/PhysTest201.swf, 520, 292[/swf]

Box2DFlashAS3 is an open source port of Erin Catto‘s powerful c++ physics library Box2D.

There is not a lot of information about Box2DFlashAS3 and tutorials are even harder to find.
So here some useful links:

Emanuele Feronato (an Italian PROgrammer) has written an extremely useful tutorial: box2d tutorial for the absolute beginners/. This one is a very good starting point!

I will write about the problems that I encounter with Box2D, I hope that will help you in your quest to understand box3DFlash.

List of my post about Box2DFlashAS3


Because I’m quite lazy, I didn’t mention all the as3 physics engines but you can: just make a comment about any engine and perhaps why you are working with that engine…

Categories
AS3 AS3 migration Flash

From AS2 to AS3 – Where did it go – attachSound

Where did attachSound go in AS3?

It’s almost the same as attachMovie (I already covered attachMovie: read attachMovie post)

I was never very good in sound, and I didn’t use it a lot in my applications/animations. That changed with my new job. But for the people that remember attachSound in AS2, this is how its done in AS3…

This post is only handy when you link sound from the library, both AS2 and AS3. Dynamically loaded sound (MP3) is another story.

What has the ActionScript 2.0 Migration to say about this subject:

ActionScript 2.0  ActionScript 3.0  Comments
attachSound() Method Removed Create an instance of a Sound subclass that is associated with sound data; for example, by using new Sound() instead.

And I say again: Removed… wtf? 😉

In AS2 it will work like this:

Continue reading “From AS2 to AS3 – Where did it go – attachSound”
Categories
AS3 AS3 migration Flash

From AS2 to AS3 – Where did it go – swapDepths

Where did swapDepths () go in AS3?

This is what the ActionScript 2.0 Migration has to say about this:

ActionScript 2.0  ActionScript 3.0  Comments
swapDepths() Method Removed In ActionScript 3.0, you can achieve similar functionality by using the methods of the DisplayObjectContainer class, such as the addChildAt(), setChildIndex(), swapChildren(), and swapChildrenAt() methods.

Removed… bummer, so with what do I replace it with…

In AS2 you can use swapDepths() in two ways:

  • A Number that specifies the depth level where the movie clip is to be placed.
  • An instance name that specifies the movie clip instance whose depth is swapped with the movie clip for which the method is being applied. Both movie clips must have the same parent movie clip.

In the examples there are two movieClips: ‘circle_mc‘ and ‘square_mc‘. Movieclip square_mc is under circle_mc (z-index is lower then circle_mc). And the task is to get square_mc above circle_mc.

AS 2

There are a couple of ways to do that in ActionScript 2:

Example #1
Swap the depth of two movieclips which each other (square_mc will be placed on the depth of circle_mc, and the other way around)
this.square_mc.swapDepths(this.circle_mc);

Example #2
I consider this a hack, but one that works
this.square_mc.swapDepths(1000000);

Example #3
When you want to change the depth of something, this is usually to place it on top:
this.square_mc.swapDepths(this.getNextHighestDepth());

AS 3

Lets try this in ActionScript 3:

Example #1
this.swapChildren(square_mc, circle_mc);
Visit livedocs at the Adobe site for more information and example code
[as]
var square = this.getChildByName (‘square_mc’);
var circle = this.getChildByName (‘circle_mc’);

trace(this.getChildAt(0).name); // square_mc
trace(this.getChildAt(1).name); // circle_mc

this.swapChildren(square as DisplayObject, circle as DisplayObject);

trace(this.getChildAt(0).name); // circle_mc
trace(this.getChildAt(1).name); // square_mc
[/as]

Example #2
not possible anymore… if you want a detailed explanation visit dreaming in Flash blog, and read more about swapDepths() in AS3 (it’s explained with a image)

Example #3
To place a movieclip on the highest depth in actionscript2, we will use MovieClip.getNextHighestDepth,
but in AS3 that function is removed 🙁

In AS3 you need to use numChildren:
this.setChildIndex ( square_mc , this.numChildren - 1 );
Visit livedocs at the Adobe site for more information and example code

I realize that this is not a complete explanation… but I hope this is a starting point to find old function that you used in AS2