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

What about SVG files?

Previous post I wrote some vector files but not the kind you are used from me.
Usually I use .PDF but in the case I use .SVG files, and you want to know what that is about…

What is a .SVG file?

Wikipedia on this subject: http://en.wikipedia.org/wiki/Svg

Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated).

The official info can be found here: http://www.w3.org/Graphics/SVG/

Scalable Vector Graphics (SVG)
XML Graphics for the Web

What is useful about this file?

It’s very small, most modern browsers can show it and vector edit programs like (online) Aviary Raven (press create and file > import files) or offline Inkscape or Illustrator.

Why doesn’t use everybody this in the papertoy scene?

There is no uniform way to show it in a blog post; every browser works different. I haven’t worked with it a lot and there seem to be some problem with fonts embedding (can also be my inexperience). And people are used to .PDF and viewing files in Adobe Reader (or another .PDF viewer). Another “problem” is that WordPress (this blog runs on it) doesn’t recognize a .SVG file as an image (it labels it as a dangerous file!!)

Example

Business holder template

Download the template as .SVG (use “Save Link As…”)

Business stand (simple) template

Download the template as .SVG (use “Save Link As…”)

If you don’t see any images, you probably using old browser.
I have tested this in Firefox 3.6 (OSX and XP), Google Chrome (XP) and Internet Explorer (XP)

How to create or change a .SVG file?

There is a Firefox addon: svg-edit. This can be used for creating files but you can’t open them yet (net version will) so you have to open a .SVG file in a text editor (like notepad++) and copy paste it.
There is an awesome project online called Aviary that also has a vector edit web application: Aviary Raven. You first need op press “create” and then it’s possible to import a file (file > import files). You can also use Inkscape (freeware) or Adobe Illustrator ($$$).

How to download?

Use “save as” on a link or “save this page” if you have clicked on the link.
Make sure that the file you want to save, end with the extension .SVG (Firefox save this file as a .XML file for example)

How to open?

Use Aviary Raven (press create and file>import files), Inkscape or Illustrator.

How to print?

You can print from Firefox: open the link and print.
Are you used to .PDF files? Save the .SVG files (link) to your hard drive and visite www.fileformat.info and convert .SVG to a .PDF (remember to save the file as .PDF : in my case it change the extension to .HTM)

Should everybody start using SVG files?

Yes and no: yes because they are very small and most of the modern browsers can show the image…. but sadly not in a page/post which makes as difficult to use as .PDF.
And .PDF is what people know… It will probably get bigger if Firefox will treat .SVG files as an image file like Google Chrome and Safari does.

Twitter rss reader in Flash as3

Update #1: must read this post, otherwise this code will fail when you place it on your server!

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:

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

🙂

XML Reader Flash panel – Todo and Requests

A while ago, I created XML Reader Flash panel.
I’ve been using it (and colleagues) for some time now, and I found some points of improvement:

  • Doesn’t work correctly on a mac (scrollbar disappears)
  • External XML (fill in url of XML)
  • Remove \r and \n in node
  • Errors about wrong formed XML
  • Different methods of reading XML (XML-DOM, X-path, XML2Array, ….)
  • More information

XML Reader Flash panel

When you’re working with Flash and dynamic content your no stranger to XML.
And how to access the data in the XML.

There are a couple of ways you can access and manipulating XML documents in Flash:

  1. the nerdy way (XML DOM): my_xml.firstChild.childNodes[2].childNodes[1].attributes.x
  2. the xPath way using xfactorstudio XPath classes: xmlDoc.selectNodes("/bookstore/book[price>35]/title")
  3. the Flash XPathAPI class: XPathAPI.selectNodeList(xml.firstChild, "/rdf:RDF/item/title")
  4. the XML2Array methode: Novel[0].Description[0].value

Before I discovered option 2 /3 /4, I had to work with XML DOM. This was also in the periode I was still programming in the Flash IDE and the XML DOM methode cost me a lot of time: I couldn’t find the correct node, or attribute, etc.

Until I started programming in SE|PY, because it has a XML Reader. The XML Reader could check if my XML was correctly formatted, and I could just point to the node I wanted to use and it gave me the correct node path.
I don’t know when it started (probably for a while, because I started to use different methodes to access XML) but sadly this reader has some errors, which makes it difficult to use.

But why do I care? I needed to use the XML DOM because I didn’t want to add to the kb of a dynamic banner I was building. It was programmed it in Flash IDE and the SE|PY XML Reader didn’t work….

Download:

Without more blabla: here is the first version of XML Reader.

XML Reader Flash panel XML_Reader_v0.1.zip (52kB)

In the zip is also a readme.txt with more info about XML Reader.
Doubts? Test drive it here!
Let me know what you think of it, what’s wrong with it, what could improve, bugs, etc

Description XML Reader

XML Reader is a Flash window panel where you can load XML files into.
This is useful in situations when you are writing an XML parser, and need to view the XML your parsing, but don’t feel like toggling back and forth between Flash and another program.
As a Flash panel, you can simply dock it inside of Flash with your other panels, and have it always available while you code in the Flash IDE.

This XML Reader does more: it has color syntax highlighting, indentation and XML DOM(*) to access and manipulate XML Documents WYSIWYG style.

I hope this will help to increase my productivity, and perhaps yours?

(*) The XML Document Object Model (XML DOM) defines a standard way for accessing and manipulating XML documents.

View XML Reader

So I created XML Reader, based upon the one in SE|PY

Because the open XML button only works in Flash a example XML is loaded.

Thanx to:

This project is based upon some work of other developers:

  • The XMLHighlighter class developed by R.Arul Kumaran (at the moment of writing this post I couldn’t visit his site).
    This class is used for highlighting the XML file and my modification makes it possible to ‘trace’ the XML-nodes.
  • The XML and Text Viewer Panel developed by Jesse Randall Warden. This example showed me how to build a panel.
  • The MXI File Creator by Muzakdeezign. This free program is used to create and edit the Macromedia Extension (.mxi file).
  • The XML reader from SE|PY by Alessandro Crugnola.
    This is my free code editor when I’m not using the Flash IDE editor. And the only (as far as I know) wysiwyg XML Reader. Sadly this reader has some errors, which makes it difficult to use. So to fix this, I wrote this panel.

Dir2xml v1.1 released

This is a little tool I build with the help of Screenweaver.
A dir(ectory) 2 XML tool.

Wanna know more about the reason??

Version 1.0 had some bugs, and the output (XML) wasn’t the way it should be.

Dir2xml v1.1

dir2xml
(yes indeed it’s the same picture as version 1.0, there are no big changes to this program)

Download

You can download the EXE, SWF, example dir2xml.xml and FLA in a ZIP

Get your stuff here: dir2xml_060605.zip

Licensing

Continue reading

Dir2xml

This is a little tool I build with the help of Screenweaver.
A dir(ectory) 2 XML tool.

I was looking for a program that could create an XML file from a directory. I found some programs that could help me with this (commandline, Printfolder, Dirhtml) but none of them creates an XML at once. So one evening I sat down, and made this in a couple of hours.

Because this is a custom solution to a specific problem, not everybody will be able to use this. I'm open to suggestions though, so drop me a line.

Dir2xml v1.0

dir2xml

PC and Apple

Sadly enough Screenweaver can't export to Apple (yet).
So Dir2xml will (for now) only work on a pc.

Download

You can download the EXE, SWF and FLA in a ZIP

Get your stuff here: dir2xml_060520.zip

update: new version

Licensing

Continue reading

SlideShow v1.0

A little dynamic slideshow a made with Flash using XML.
It’s not finished but it usable.

And it’s not really the reason I wanted to show this.
What I wanted to show is my dir2xml program that I wrote with Flash and Screenweaver

SlideShow v1.0

Download

I haven’t had the time to clean up the source code, so don’t complain about it.

Get your stuff here: slideShow_060520.zip

Licensing

XML

Dir2xml creates a simple xml structure:

dir2xml_example.xml

Future features and wishes

I can think of some features that would make this slideshow better, but what do you think would improve it.
The real reason I wanted to show you this project is this.