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)

• count lines of code >> http://cloc.sourceforge.net/
• zip files >> http://www.funky-monkey.nl/blog/2010/09/22/copy-files-to-a-network-share-with-ant-and-fdt/
• asdoc >> http://code.google.com/p/sekati/source/browse/trunk/build.xml
• swc >> http://code.google.com/p/sekati/source/browse/trunk/build.xml

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

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)

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.

(have to be very carefull what I say: “they” are watching me: here and here )

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 User’s 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 ), 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 User’s Guide – Part II but I will.
It seems to be focused on the use of the templates and snippets.

source:
FDT and ANT | A User’s Guide – Part I
FDT and ANT | A User’s Guide – Part II

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?

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
 */
 */

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/

read here the complete (dutch) error message

Stupid, stupid, stupid, I already knew this: Flash cross-domain security.
Which simple says that it’s not allowed to “get” anything from another website unless the server has a crossdomain.xml.
The nasty part is that, while you are testing in Flash IDE nothing goes wrong. So I only bumped into this when I put it on my server…

So what to do?

1. Ask Twitter to change there crossdomain.xml and add my domain…… (is this really an option?)
2. Find something around the crossdomain security from Flash

Luckily solution two is the easiest one: use a proxy to get the data we want.
Because PHP doesn’t have the same restrictions as Flash has we will be using a proxy.php.

This is how it works: Flash wants a crossdomain.xml if you “get” data from another server, but if you “get” data from the same server there is no problem. So we will be asking the proxy.php to “get” the xml/rss and serve it to Flash.

So instead of loading the data directly from Twitter
http://twitter.com/statuses/user_timeline/27657030.rss
We will be using the proxy instead
http://yoursite.com/xml_proxy.php?url=http://twitter.com/statuses/user_timeline/27657030.rss

I didn’t write the proxy myself:
The proxy that I used can be found here: http://xmlrpcflash.mattism.com/proxy_info.php (it has some extra explanation about the subject )
This proxy can be use for all sorts of xml, and any server.

As always I’m reinventing the wheel: this group needed a specific solution but is nice to read more about it:
http://woveninteractive.net/2009/02/twitter-in-flash-getting-past-the-securityerrorevent/
They wrote something similar, but a proxy more specific suited for twitter and the use of twitterscript.

Update #1: I found another proxy.php (I really don’t think you need another, but choices are nice ).
PHP Proxy Script for cross-domain requests

I recently started my own company (eMCeeKay.nl) and I need to make a website for it…. Not really a problem besides that I don’t have any time to create a design.

So I was thinking about a easy way to update this website without spending extra time on that.

Because the main focus of the company is papertoys (urban papertoys), I need design or papertoy related info in my my new website ().

And I came with two ways to update it without extra effort: twitter (I tweet about a lot of stuff but primarily about papertoys) and this the content on this blog (category: urban-papercraft).

I started with the Twitter part.
There are two Twitter AS3 libraries that “speak” to the Twitter API: twitterscript/ and tweetr/.
But after reading the source I concluded that it was a little bit to much: I don’t want to tweet from emceekay.nl or do searches, so that was not the way to go.

A little google search gave me the solution: http://www.theflashlogs.org/flash/displaying-twitter-feeds-in-flash-with-rss/, simple using the standard rss from Twitter (in my case: Matthijs Kamstra – Twitter – rss).

The code on theflashlogs.org is pritty simple, and very easy to use.
So my code is a little addition to that, I need some stuff done to the rss feed:

• remove “MatthijsKamstra:” form the title
• convert @paperkraft to a link
• convert #Mecha6 to a link
• convert http:// to a link

Here is my code:
[as light="false" wraplines="false"]
package nl.emceekay.twttr
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.text.TextField;
/**
* // nl.emceekay.twttr.TwttrExample
* …
* @author Matthijs Kamstra aka [mck]
*/
public class TwttrExample extends MovieClip
{
//default: http://twitter.com/matthijskamstra
private var url:String = "http://twitter.com/statuses/user_timeline/27657030.rss";

private var _txt:TextField;

public function TwttrExample()
{
stage.scaleMode = "noScale";
stage.align = "TL";

// generate textfield
_txt = new TextField()
_txt.x = 10;
_txt.y = 10;
_txt.width = stage.stageWidth – 20;
_txt.height = stage.stageHeight – 20;
_txt.wordWrap = true;
_txt.multiline = true;
_txt.autoSize = "left";
addChild(_txt);

// start
getFeed(url);
}

//////////////////////////////////////// loading rss / show rss ////////////////////////////////////////

private function getFeed (inURL:String) : void
{
_txt.htmlText = "getting tweets";

var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onFeedHandler);
loader.load(new URLRequest(inURL));
}

private function onFeedHandler (e:Event):void
{
_txt.htmlText = "";
var _feed:XML = new XML(e.target.data);
var _item:XMLList = _feed.channel.item;
for each (var feedItem:XML in _item){
var _title :String = feedItem.title;
var _pubDate :String = feedItem.pubDate;
var _link :String = feedItem.link;

_title = convertTweet(_title);

_txt.htmlText += _title + "<br><i>" + _pubDate + "</i><br><br>";
}
}

//////////////////////////////////////// twitter specific ////////////////////////////////////////

// one place to convert the tweet
private function convertTweet (inString:String):String
{
var _str:String = inString;
_str = twttrStripName(_str);
_str = twttrConvertHTTP(_str);
_str = twttrConvertMention(_str);
_str = twttrConvertHashtag(_str);
_str = twttrConvertSmileys(_str);
return _str;
}

// remove the writers name from the tweet
private function twttrStripName (inString:String):String
{
var _str:String = inString;
var _charNumber:Number = _str.indexOf(":");
return _str.substr(_charNumber + 2);
}

// convert http-strings to links
private function twttrConvertHTTP(inString:String):String
{
var _str:String = inString;
var _array:Array = _str.split(" ");
for (var i:int = 0; i < _array.length; i++)
{
var _str2:String = twttrStripChar(_array[i]);
if (_array[i].indexOf("http") != -1)
{
_array[i] = "<u><a href=’" + _str2 + "’ target=’_blank’>" +_array[i] + "</a></u>";
}
}
return _array.join(" ");
}

// convert mentions (@) to links
private function twttrConvertMention(inString:String):String
{
var _str:String = inString;
var _array:Array = _str.split(" ");
for (var i:int = 0; i < _array.length; i++)
{
var _str2:String = twttrStripChar(_array[i]);
if (_array[i].substr(0, 1) == "@")
{
_array[i] = "<u><a href=’http://www.twitter.com/" + _str2.split("@")[1] + "’ target=’_blank’>" +_array[i] + "</a></u>";
}
}
return _array.join(" ");
}

// convert hashtags (#) to links
private function twttrConvertHashtag(inString:String):String
{
var _str:String = inString;
var _array:Array = _str.split(" ");
for (var i:int = 0; i < _array.length; i++)
{
var _str2:String = twttrStripChar(_array[i]);
if (_array[i].substr(0, 1) == "#")
{
_array[i] = "<u><a href=’http://twitter.com/search?q=%23" + _str2.split("#")[1] + "’ target=’_blank’>" +_array[i] + "</a></u>";
}
}
return _array.join(" ");
}

// TODO: [mck] convert to a smiley image
private function twttrConvertSmileys(inString:String):String
{
var _str:String = inString;
return _str;
}

// remove "strange" characters from the end of the string
private function twttrStripChar(inString:String):String
{
var _str:String = inString;
var _charArray:Array = [',', ';', ':', ' ', '-', '_'];
for (var i:int = 0; i < _charArray.length; i++)
{
if (_str.charAt(_str.length – 1) == _charArray[i]) {
_str = _str.substr(0, _str.length – 1);
}
}
return _str;
}

} // end class

} // end package
[/as]

Currently I have only this proof of concept, but soon I will post the example on emceekay.nl…

Because this is part one of what I want to do, and don’t want to search for every link again, I’m posting also the WordPress link here (it’s just because I’m lazy).

So here the feeds I will be using:

• Matthijs Kamstra – Twitter – rss
• All Urban papercraft posts

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/

This is how I use to do it:

1. make the SWF banner
2. embed it in a html page with a background color that is not in the banner itself (a border around the SWF banner helps)
3. make snapshots of the animation
4. open photoshop >> (I used a action for this part….)
5. place all the images in one document
6. cut the browser from the screenshot
7. select the background-color reverse the selection and cut
8. make a animation from all the layers (end photoshop action)
9. save

I have never made an AIR application but I think that it should be possible to make a SWF2GIF converter in AIR.

Stuff what I need to find out:

• browse for a file
• load that file into air
• take snapshots of the animation
• controle the frame rate of the animation
• make a animated gif
• save everything
• etc.

Lets start with some basic:
I’m still working on CS3, and it seems that AIR default is installed with CS4
Installing the Adobe AIR update for Flash CS3

English: http://help.adobe.com/en_US/AIR/1.5/devappsflash/WS5b3ccc516d4fbf351e63e3d118666ade46-7fc3.html
Dutch: http://help.adobe.com/nl_NL/AIR/1.5/devappsflash/WS5b3ccc516d4fbf351e63e3d118666ade46-7fc3.html

You can also use FlashDevelop 3.0.1, AIR is also installed with that program and in combination with Flex sdk you don’t even need Flash.

Because I’m not finished with it (I will only work on it when I have to build banners) I will post now and then some parts of the code.

For some reason I couldn’t find the code to load SWF into AIR using “browse”.

[as light="false" wraplines="true"]
private function openSwfFile(e:MouseEvent = null):void
{
var imagesFilter:FileFilter = new FileFilter("Flash SWF", "*.swf");
myFile = new File();
myFile.addEventListener(Event.SELECT, selectHandler);
myFile.browseForOpen("Open", [imagesFilter]);
}

private function selectHandler(event:Event):void
{
myFile.removeEventListener(Event.SELECT, selectHandler);
loadSWF(myFile.url);
}

private function loadSWF(inName:String):void
{
trace( "Main.loadSWF > inName : " + inName );
mLoader = new Loader();
mLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);
mLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onErrorComplete);
mLoader.load(new URLRequest(inName));
}
private function onLoaderComplete(e:Event):void { startOnEnterFrameHandler(); }
private function onErrorComplete(e:IOErrorEvent):void { trace( "Main.onErrorComplete > e : " + e ); }

private function startOnEnterFrameHandler():void
{
_movie.addChild(mLoader);
// _movie.addEventListener(Event.ENTER_FRAME , onEnterFrameHandler);
}
[/as]
just use a button to activate.

I know the code is not complete… and that some classes have strange names… it’s work in progress.

I hoped to find the solution in AIR, but that has a 2880px limit (read here)

After some googling I found Flash Dancer by Gizmoware.

And who can explain it better then the Flash Dancer creator himself:

Flash Dancer gives Adobe Flash multi-monitor support. Want to play your Flash file fullscreen on monitor 2? Now you can. Want it to span fullscreen over 4 monitors? No problem with Flash Dancer. This is extremely useful in kiosk type applications, large scale multimedia installations, restaurants displaying menus on remote monitors, etc. Its been confirmed to work on a 6 monitor setup without a burp.

(I’m the one that has confirmed that it works on Vista and on 6 monitors )

So what can I tell more:

[as highlight="4" light="false" wraplines="true"]
// Specifies that the size of the application be fixed, so that it remains unchanged even as the size of the player window changes.
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.quality = StageQuality.LOW; // important: the image will be cut off when you use HIGH
[/as]

And of course you need to tile a pattern, but I’ll leave that up to you.

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.