Categories
Haxe

Installing Haxe and NME on OSX

I recently had to (uninstall and) reinstall Haxe, so I decided that it would be useful to document the process!

Remember this is a post for OSX(10.6.8) install of Haxe(2.09) and NME(3.3.0)!

This entire post started because MonoDevelop didn’t show any auto-completion anymore. It cost me 4 nights to fix the ‘problem’. I deleted Haxe entirely and reinstalled it (and NME/extra libraries) again. I had written the process of install down before to blog about it later, so there is some stuff that happened the previous time I install Haxe and NME (and that means that this it’s not exactly a clean install)

About the deletion/uninstall of Haxe: at the bottom of the post

I can’t thank Joshua Granick (one of the programmers of NME) enough for his help! The man must be a superhero: helping everybody on twitter, writing tutorials/post on his blog, programming an haxe/nme add-in for MonoDevelop, NME (duh), being a dad, having his own game company….(!!)

Start installing Haxe

Download the Haxe OSX install zip from: http://haxe.org/download
And install it like you normally do.

After install you can check if everything went okay (and you need the terminal later on):
open the terminal
(CMD+SPACE and type terminal)

type in the terminal
haxe
to check the install

Download the NME OSX install zip from: http://www.haxenme.org/download/
And install.

type in the terminal
haxelib list
to check what libraries are installed

This is probably not useful for everybody, but these are some of the extra libraries I use…
type in the terminal

haxelib install swf
haxelib install jeash
haxelib install spritesheet
haxelib install format
haxelib install actuate
haxelib install box2d
haxelib install waxe

You probably only want to install these to get NME working
jeash for html5 and actuate to animate stuff

haxelib install jeash
haxelib install actuate

Next we will make a short cut to NME
Type in the terminal
haxelib run nme setup

Explanation from Joshua Granick

If you execute “haxelib run nme setup” from a command-line or terminal, it will add a script to your PATH (in the Haxe directory) that shortens the command string. Instead of having to call “haxelib run nme”, you can simply call “nme”.

This failed on my computer; the terminal spit this back at me

haxelib run nme setup
chmod: Unable to change file mode on /usr/lib/haxe/nme: Operation not permitted
rm: /usr/bin/nme: Permission denied
ln: /usr/bin/nme: File exists

This is probably because I’m on OSX and not on Linux as “root” user….
So fix this with:
sudo haxelib run nme setup, type your password and try again!
(source: http://www.haxenme.org/developers/get-started/)

After this you install the ‘stuff’ you need for development on mobile devices.
I only need android so I installed that (for now):

nme setup android
Download and install the Android SDK? [y/n/a] ? y
Output directory [/opt/Android SDK] : /opt/Android SDK
or just use enter to use the default path

after install the “Android SDK Manager” will be started

download Android 4.0.3 (API 15)

After the “Android SDK Manager” is ready with downloading and install you can close it (it will ask you to do so)

The terminal will start yelling stuff:
Download and install the Android NDK? [y/n/a] ? y
Path to Android NDK [/opt/Android NDK] : /opt/Android NDK
or just use enter to use the default path

Okay.. your good to go!

Install IDE

Install an IDE (read about the choices that I made)

Let’s assume that you will also use MonoDevelop (2.8.8.4):
Download the OSX files (yes 2!) from: http://monodevelop.com/Download
Click on osx and you will get two download options

  • MonoDevelop 2.8.8.4 installer
  • Mono 2.10.5 + GTK#

Click/Download MonoDevelop (pretty straight forward)
Click on Mono and you will go here http://www.go-mono.com/mono-downloads/download.html.
Do you need “An open source, cross-platform, implementation of C# and the CLR that is binary compatible with Microsoft.NET”???
Well… yes: see Mono as the car-engine and MonoDevelop as the rest of the car (you as the driver)… you need both to go on a road trip!

We want stable release: “Latest Stable Version: 2.10.8” and click again on OSX.
At the bottom of the page you will see some links appears
download the Intel Mac: “Runtime”

Install both files you just downloaded
And open MonoDevelop (in Applications)!

Add-in Manager Monodevelop
The only thing you need to do now is:
MonoDevelop > Add-in Manager > Gallery tab > Language bindings > Haxe language Binding
Install that add-in (0.2.1).

Your MonoDevelop is ready for Haxe/NME programming.
Moving from FDT to MonoDevelop? I wrote something about that to make it somewhat easier: Moving from FDT to Monodevelop for Haxe and NME

About your first NME > Flash project, visit Joshua Granick post: getting-started-with-haxeflash-in-monodevelop/ he has also one form cpp and html5..

Happy Haxe-ing

Uninstall Haxe on OSX

something you should never do 😀

After updating to Haxe 2.09 (and updated the Add-in) I noticed that the MonoDevelop auto-completion didn’t work anymore.
I mentioned this to Joshua Granick but we couldn’t figur out what it was.

This is probably what happend: I installed Haxe 2.09 very quickly after it was released and after that there was a hotfix which I couldn’t install over the previous installed Haxe…
Eventually Joshua gave me this advice on twitter.

Open the terminal (CMD+SPACE and type terminal) and typerm /usr/bin/haxe
I got “rm: /usr/bin/haxe: Permission denied”
This is probably because I’m on OSX and not on Linux as “root” user….
I fixed this with sudo rm /usr/bin/haxe: you will be asked to fill in you password (there is no feedback of typing) and hit enter, the Haxe folder will be deleted.
(you will lose Haxe and everything you installed in there: NME and libraries, the other install you need to do for NME will still be installed: Android/IOS for example)

After the reinstall everything worked again.
I can finally use my evenings for programming again 😀

Categories
Haxe

Moving from FDT to MonoDevelop for haXe and NME

Before I start with this post I should mention that Joshua Granick (on of the creators of NME) has a post about:How to Install Haxe, NME and MonoDevelop! That will save me some time and who can explain that better than Joshua.

I wrote something similar when I moved from PC (FlashDevelop) to OSX (FDT) (read my post: moving-from-flashdevelop-to-fdt/). Which also was a reminder when I needed to reinstall or explain it to a college.

Want to know why I’m using MonoDevelop?
Moving from FDT to MonoDevelop is not a big step (my opinion 😛 )

After reading my post, it looks like I’m leaving FDT… That is not what I’m doing: I’ll keep on using it for AS3.
But I hope to ‘take’ some features from FDT to MonoDevelop

Adding your own short-cuts / key-binding

First let add some features that I use a lot:
MonoDevelop > Preferences... (CMD+,) > Key Bindings
search for “comment”
Toggle Line Comment : Edit Binding > (CMD + 7)
search for “case”
Uppercase Selection : Edit Binding > (CTRL + SHIFT + X)
Lowercase Selection : Edit Binding > (CTRL + SHIFT + Y)
search for “template”
Insert template.. : Edit Binding > (CMD + SHIFT + 1) [doesn’t work yet]

Using default Short cuts – (besides the ‘normal’ short cuts)

Then there are some default shortcuts you use a lot:
run >> ALT + CMD + enter
debug >> CMD + enter (doesn’t work)
move the line or highlighted section down >> ALT + ARROWDOWN
move the line or highlighted section up >> ALT + ARROWUP
show completion window >> ALT + SPACE

Adding personal info

Don’t have to explain this … right?
MonoDevelop > Preferences... (CMD+,) > Author Information

Changing settings

Perhaps this is very personal, but I’m not writing this for you alone (it’s also a reminder to myself!)
MonoDevelop > Preferences... (CMD+,) > Text Editor > Behavior >

  • check: Insert matching brace
  • check: Smart semicolon placement
  • check: Enable on the fly code formatting (doesn’t do anything)
  • check: Format document on save (doesn’t do anything)

and
MonoDevelop > Preferences... (CMD+,) > Text Editor > Behavior > XML

  • check all

Moving on:
MonoDevelop > Preferences... (CMD+,) > Text Editor > Syntax Highlighting
I installed Monokai for Darius Kucinskas: you can get it from github. That because I use it on TextMate and gotten use to it….
Joshua Granick has created a FlashDevelop color scheme (if there are people who want to move from PC to Mac/Linux).

Templates/snippets

And then the most interesting… the one that doesn’t seems to be working
MonoDevelop > Preferences... (CMD+,) > Text Editor > Code Templates
Code templates are awesome and speed up your development a lot (create a getter/setter in just one click for example)
Just do the following:
Edit > Insert template...
And remember that the mime type is:
mime: text/x-haxe
It really doesn’t matter what you do… for example // test


but then only bugs…

🙁

Something to read: The official statement from MonoDevelop about Code Templates.

I would like to see

I miss some stuff that I was very use to, so lets make that a NICE-TO-HAVE-LIST

  • feedback when exporting/compiling to a target like SublimeText 2 or in the terminal.
  • code completion on variables and functions
  • templates that work
  • duplicate line (up/down)
  • code formatting
  • auto import
  • code checking while typing/checking without running
  • if auto code checking is not going to happen: a shortcut to check your code
  • automatic “add to folder” (for all folders)
  • TODO added to “Task list”
Categories
AS3 FDT Flash

FDT and ANT – part 2

Trying to build the ultimate build.xml in ANT: debug/production zip ftp version … etc: will save a lot of keystrokes in FDT4

source: http://twitter.com/MatthijsKamstra/statuses/25194997777

All the information about the ultimate build.xml can be found on the internet, so I will post the links and you can figure it out for yourself.

I used the build.xml made by Jankees van Woezik (Base 42) as the base of my ultimate ANT build file. You can read about it and download here: My workflow with ANT and FDT.

Because we work a little bit different I had to do some modifications (for example: I work with 2 swf: preloader.swf and main.swf and work on PC). I created a list of stuff that I wanted to do with ANT and behind the “wish” you find a link to the site I found the solution for the problem:

  1. base ant script >> http://blog.base42.nl/2009/12/11/my-workflow-with-ant-and-fdt/
  2. inspiration >> http://code.google.com/p/sekati/source/browse/trunk/build.xml
  3. install ftp protocol in fdt/eclips >> http://www.rumblingskies.com/blog/?p=75
  4. update version ant script >> http://github.com/base42/projectcreator/blob/master/original/flash/builders/ant/updateVersionFile.xml
  5. another update ant script >> http://www.sephiroth.it/weblog/archives/2010/01/update_your_app_version_using_ant_bui.php
  6. update Firefox (only works on OSX) >> http://epologee.com/blog/2009/focus-and-reload-pages-in-firefox-with-ant/
  7. html wrapper >> http://fdt.powerflasher.com/blog/?p=1392
  8. create folders >> http://code.google.com/p/sekati/source/browse/trunk/build.xml

Something like this needs some time to find its place in my workflow, and will be changed a lot. That is the reason why I’m not posting my ant file… not because it’s ugly or a secret… but because I need to refine it. 

Oh… I also have a small todo list (perhaps you could call it a nice-to-have-list)

As you can see, these are the thing that I don’t need a lot, but perhaps in the nearby future…


FTP (File transfer protocol)

Ant doesn’t have the FTP protocols default installed so you need to update FDT4/Eclipse.
You can find the explanation here: http://www.rumblingskies.com/blog/?p=75

Update #1:The locations of the files you need are changed so let me post the correct ones here:

Save these files in the following folder: C:\FDT\plugins\org.apache.ant_***\bin\

Update #2: hmmm jakarta-oro seems to be Retired… and I haven’t got time to figure this out right now…

You probably can add the zips you downloaded there, I extracted the two files and that worked for me. I did this in FDT4 and all I got was an alert about “The specified Ant runtime classpath does not include a tools.jar library…..” which I ignored (and without any problem).

After the installment of the two .JAR files you need an ANT script to get thing started which I just copied from the previous link:
[as light=”true” wraplines=”true”]
<target name="ftp_upload" description="uploads files through ftp">
<echo message="uploading files" />
<ftp server="123.456.78.90"
port="21"
remotedir="/www/ant_upload_test"
userid="my_user_id"
password="my_password"
passive="no"
depends="yes"
binary="yes">
<fileset dir="../bin" />
</ftp>
</target>[/as]


Update version

It’s a combination of writing a build.txt file and a Version.as file.
See what Jankees van Woezik did and I use the script from Sephiroth to have a building number that adds 1.


Firefox refresh

this feature is awesome in combination with ftp, so here the one who found the how: Eric Paul (epologee). Read more about it here: focus-and-reload-pages-in-firefox-with-ant

So downloaded the file, installed the firefox extension and gave it a run:
[as light=”true” wraplines=”true”]
<target name="focus Firefox and reload page">Execute failed: java.io.IOException: Cannot run program "open" (in directory "C:\foo\bar\test"): CreateProcess error=2, Het systeem kan het opgegeven bestand niet vinden
[/as]

After some googling, I found that it’s a OSX command that doesn’t work on Windows:

[as highlight=”1″ light=”true” wraplines=”true”]
<target name="focus Firefox and reload page">
<exec executable="open">
<arg line="-a Firefox" />
</exec>
<exec executable="flash/tools/fresno/fresno">
<arg line="-j ‘content.location.reload()’" />
</exec>
</target>[/as]

I haven’t found a solution that refreshes the page like Fresno does on Windows.
So the only thing I can think of is:

[as light=”true” wraplines=”true”]
<target name="Launch in Firefox (reload)">
<echo>Launch in Firefox (not really a reload)</echo>
<exec executable="H:/Program Files/Mozilla Firefox/firefox.exe" spawn="yes">
<arg line="${flashproject.preview.url}" />
</exec>
</target>
[/as]


Html wrapper

I changed the file a little bit (removed the history) not really difficult.


Folders

You get the idea….

(reminder for myself: http://fdt.powerflasher.de/docs/FDT_Ant_Tasks)

Categories
AS3 FDT Flash

Create SWC library from FDT

I use Greensock Tweening Platform a lot, it awesome. Download it (here for example) and you have everything you need.

Now I start working with SWC files and they are so compact: I love it.
But how do you get a library in a SWC? Google has an answer but it’s very complex.

The best answer is from Bruno Fonzi on

Twitter / Bruno Fonzi: How to create SWC librarie ….

How to create SWC libraries from FDT:
Right click Project > Run as > FDT Library
or
Menu > Run Configurations > Create new FDT Library

So start with a New Flash Project (the name you will use for this project will be the name of the SWC: in my case “Greensock_Tweening_Platform”) and copy the com folder from the Greensock ZIP into the src (of source) folder.

If you follow the instructions and create a SWC you will get an error about: UIComponent and Vector (depends on your Project properties).

So to fix this: follow the 2 red x’s

com > greensock > loading > display > FlexContentDisplay
I don’t use this one, so delete.

The next depends on the project properties (I used SDK: Flex 3.3 and Player Version 9 and there are no Vectors in Player version 9)
com > greensock > plugins > EndVectorPlugin
I can’t use this one, so delete this on too.

Create the SWC again and your done: you have one file with the Greensock Tweening Platform in it.

Categories
AS3 FDT Flash

FDT and ANT – part 1

Just started to work with FDT and wrote about my “troubles” (post#1 and post#2) with my transition from FlashDevelop.
(have to be very carefull what I say: “they” are watching me: here and here 😀 )

And it seems to be a very natural (geeky) thing to learn about ANT.

And where do you go to learn about ANT and SWF/Flash/FDT? (Google?)
After some tinkering all I got was: failed to create task or type fdt.launch.application

This post was very useful: FDT and ANT | A Users Guide Part I by Alan Klement.
Watch the videos (I’m not very fond of tutorial videos but in this case; they get the job done).
What I love about the “Video I: Getting Started” is the fact that it builds up from scratch. So watch this video when you want to know about ant-files/xml, how to open the ANT-View, how to open/execute an ANT-file.

The second video (Video II: Compiling a SWF) was what I really was looking for: how to export a SWF. Very nice because it starts from scratch.
And it gave me the answer I was looking for: why didn’t my ANT-file didn’t work (it about 3/4 of the video):

BUILD FAILED
[blabla]\source\a\example\build\build.xml:17: Problem: failed to create task or type fdt.launch.application
Cause: The name is undefined.
Action: Check the spelling.
Action: Check that any custom tasks/types have been declared.
Action: Check that any / declarations have taken place.

Solution is very simple, but if you don’t know, you will hate FDT and really it’s not it fault:
Goto the green “play” button with the brown bag, in the toolbar (one picture says more than a thousand words:)

Select the ANT-file you want to change (I have only one :D), goto to tab “JRE” and change the Runtime JRE to Run in the same JRE as the workspace and your done:

Very useful are the ANT-snippets and ANT-Build-template!
Download (created by Alan Klement) and “install” the ANT-template (how-to on this page but here the short version)

To add XML files templates go: Preferences > XML > XML Files > Editor > Templates and click import.

To add Ant snippets go: Preferences > Ant > Editor > Templates and click import.

I haven’t seen the second part of this tutorial: FDT and ANT | A Users Guide Part II but I will.
It seems to be focused on the use of the templates and snippets.

source:
FDT and ANT | A Users Guide Part I
FDT and ANT | A Users Guide Part II

Categories
FDT Flash

Missing in FDT after working with FlashDevelop

I love FlashDevelop but moved to FDT (read my other post about this subject)…
Not an easy thing (the biggest problem is that it totally not intuitive ) to do and I’m missing some stuff that I had in FlashDevelop.

CTRL+U to change the selected text to uppercase

Update #1: I have found it:
ToUpperCase = CTRL+SHIFT+X
ToLowerCase = CTRL+SHIFT+Y

CTRL+SHIFT+1 to “Promote member to class”

(there is a similar way to do this in FDT but not the same)

CTRL+SHIFT+Q to create a block comment
It is in FDT but I can’t get it to work so you have to work with CTRL+7 (toggle comment) which is a minor adjustment.

The auto-completing FlashDevelop is awesome!! With some tinkering (info here) you can get FDT in the same room but it’s still not the same. I’m used to write private variable with a prefix “_” (example: _variableName). When I want the variable name to autocomplete in FlashDevelop I just type variableName (without the “_” prefix because it stupidly positioned on the keyboard) and it will find it. In FDT you need to start with the prefix “_” otherwise it will ignore the variable name… why???

Also missing: Explore (Open “Project Manager” and right-click on a folder)
(can’t find it in FDT)

But I shouldn’t complain, there is a reason why I’m changing to FDT

Big plus from FDT:
CTRL+SHIFT+F to Format code which is not possible in Flashdevelop
SWC Browsing is limited in FlashDevelop
Cross Platform: FlashDevelop works only on Windows
Refactor: this is so awesome (and expensive!!!)

source:
http://blog.flashmech.net/2008/08/review-fdt-vs-flashdevelop/

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/