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.

Updated Syntaxhighlighter

Update #1: hmmmm, stupid but I write these post sometimes weeks ahead…. and this one caught up on me… The new version of SyntaxHighlighter Evolved has ActionScript support.. 🙂
Update #2: I could remove everything below, but I’m keeping this here, perhaps someone can use it…. and it took some time to write, so I really can’t kill my darlings.

A little change I made to the new updated plugin:
find the plugin-folder “syntaxhighlighter” and add the next line to “syntaxhighlighter.php”
[as highlight=”1,3″]
‘as’ => ‘as3’,
‘as3’ => ‘as3’,
‘actionscript’ => ‘as3’,
‘actionscript3’ => ‘as3’,
[/as]
and find in the plugin-folder “syntaxhighlighter”, the folder “scripts” and change the next line to “shBrushAS3.js”
[as wrapper=”true”]
// SyntaxHighlighter.brushes.AS3.aliases = [‘actionscript3’, ‘as3’]; // old line and the bottom of the .js file
SyntaxHighlighter.brushes.AS3.aliases = [‘actionscript3′,’actionscript’, ‘as3’, ‘as’]; // new line
[/as]

the new syntaxhighlighter only uses “as3” and “actionscript3“, and I just changed all my post to “as

Update #3: and update the css, that made the code not wrap….
I removed “white-space: pre;” form “code” and now it wraps:

code  { font-family: "Courier New", Courier, monospace; font-size: 1.2em; /*white-space: pre;*/ color: Gray; }

Today I updated my SyntaxHighlighter JavaScript package by Alex Gorbatchev and it was not easy…

I have a syntax highlighter installed on my blog to show my ActionScript source code in a nice way.
But the first time I installed it, I choose a WordPress plugin which isn’t add to WordPress Plugin Directoryand doesn’t appear to be update.
And if I remember correctly, it didn’t work as it should and I had to add ActionScript. Read my previous decision here.
So I had to upgrade to SyntaxHighlighter Evolved which of course came with some upgrading issues created by my previous install.

First problem: write ActionScript.
ActionScript is not default included in the Syntaxhighter, and you will be advised to use [ javascript ] tag, which is a good advice since AS is almost javascript. It would make your live easier if you choose this option.
But as in my last installment of syntaxhighlighter I want to use Actionscript highlighting.
So there we go:
To do that you need an Actionscript brush. I found two of them: cptloadtest.com has one but it looks like its more for AS2,
and yourpalmark.com which is also the one I choose, because I used his version also with my previous installment and it’s for AS3.

This is what you need to do: install SyntaxHighlighter and if you choose to use [ javascript ]
your done. I was not done yet, so lets continue… Download the shBrushAS3.zip, extract and place the shBrushAS3.js in the correct folder on the server (in my case .../wp-content/plugins/syntaxhighlighter/syntaxhighlighter/scripts). Now you need to change some code in the WordPress plugin:
You can do this in WordPress itself if you have writing permission set, or you can edit the php file on your desktop…
you need to add the highlighted code

// Register brush scripts
wp_register_script( 'syntaxhighlighter-core', plugins_url('syntaxhighlighter/syntaxhighlighter/scripts/shCore.js'), array(), $this->agshver );
wp_register_script( 'syntaxhighlighter-brush-actionscript3', plugins_url('syntaxhighlighter/syntaxhighlighter/scripts/shBrushAS3.js'), array('syntaxhighlighter-core'), $this->agshver);

and

// Create list of brush aliases and map them to their real brushes
$this->brushes = apply_filters( 'syntaxhighlighter_brushes', array(
	'as'       => 'actionscript3',
	'as2'       => 'actionscript3',
	'as3'       => 'actionscript3',
	'actionscript'       => 'actionscript3',
	'bash'       => 'bash',

and now you are ready to go.

I had to change some other stuff ([ source:as ]...[ /source ] into [ as ]...[ /as ] ) and it seems that my css is not playing nice with syntaxhighlighter. hmmmm this is more work then I thought it would be.

I had to deactivate one plugin: autoescape , it didn’t play nice with SyntaxHightlighter. I didn’t use it anymore, and the combination generated gibberish.

TextMate AS3

I’ve been using a code-editor for years now. I started with SEPY and now I’m using FlashDevelop. Both on Windows.
A colleague of mine still uses the Flash IDE (on a mac), so I decide to help him with his transition.

Sadly there is no free editor for the OSX that handles AS2/AS3, but TextMate is not very expensive and very lightweight. So I decide that TextMate would be the programme that would get him out of Flash IDE editor.

With a little help of Google (I haven’t used a mac for about 7 years) I found some help/instructions that are easy to follow. Sadly it didn’t work while I followed the instruction to the letter.

While you start reading the post below, start downloading Flex 3.2 SDK, it’s 118Mb but you’ll need it later on so why not start downloading it now.

Start reading here: textmate actionscript 3 and flex bundles, it’s about the files you will use. But besides being informative, I needed more help.
I found that here: setting up a as3 project in textmate, the same steps will be followed here

  1. Download Textmate (duh), if you want to test this, use the trail version.
  2. Download Flex 3.2 SDK and extract it into your Developer/SDKs folder (but there are more places where you can extract it: just read this, for example /Applications/Flex and /Developer/Applications/Flex is also allowed)
  3. Subversion: follow the instructions from the tutorial: its very easy (read also the note at the bottom of the post)
  4. ActionScript 3 bundle from subversion: I can repeat myself: follow the instructions (to get the Terminal: Apple + space and type Terminal and get it from the list)
  5. This you don’t have to do: in the new Flex 3.2 SDK it’s already included
  6. I didn’t install this either and it worked just fine
  7. It seems that this is not necesarry anymore (perhaps there was an update of the AS3 bundle…). But if you need it: Follow the instructions, but for the TM_FLEX_FILE_SPECS src/Main.as and TM_FLEX_OUTPUT deploy/Main.swf I needed some help because what ever I did, I couldn’t get the described window.
    I found my answer in this:

    Thats a little hidden. With nothing selected in the project drawer, click on the little i at the bottom. Youll get a box to enter any variables you want for the project.

    source

    And this one was very frustrating: TM_FLEX_PATH Developer/SDKs/Your Flex SDK Folder: this one needed an extra slash TM_FLEX_PATH /Developer/SDKs/Your Flex SDK Folder and in my case it was TM_FLEX_PATH /Developer/SDKs/flex_sdk_3

    Note: Some of this is not necessary when you create a project instead of separate files: File >> New From Templates >> Actionscript 3 >> Project. Just check TM_FLEX_PATH if you installed flex in file that standard is read by Textmate. If not you need to fill it as described above (I needed to do that)

  8. The same as in the tutorial
  9. The same as in the tutorial
If you extract the Flex SDK, you will get a folder named “flex_sdk_3” and the very observant reader will notice that the script used here doesn’t include the path “Developer/SDKs/flex_sdk_3“, so that is the reason you need to add it to the “shell variables” (number 7). You can also rename the folder to “flex_sdk_3.2.0” and then I don’t think you need to add it to the shell variables, but I haven’t tested it!

Some extra information: svn is something that not everybody will use. So if you have no idea what it is, the bundle can also be installed without subversion. But the cool thing about subversion stuff is that it’s always up to date… (And I can’t help you with how you should fix it without svn)

Every blog mentions the price of Textmate: “single user license (39 ? $53)”. That’s not expensive; unless you live in the Netherlands: “single user license (48.75)” because we need to pay “Prices above include 25% VAT.” 🙁

Links in this tutorial:
textmate actionscript 3 and flex bundles
Flex 3.2 SDK
installing as3 and flex bundle for textmate.
flex and actionscript 3 with textmate and fcsh

Loop mp3 in Flash

Oke, here come my problem. I’m trying to create a sound looping engine in Flash, and because I don’t want files to be embedded in the FLA (in the library) I only can use MP3 as a sound file which I can load dynamically.

I didn’t know this, but mp3 has a silence at the end of the song, and sometimes also at the beginning of the song (and sometimes both).
Other file, files without compression like WAV, don’t have this problem.

I don’t want to get to deep into this problem, but if you’re interested in the problem and you need to read more about it: about gapless playback: Gapless playback and LAME tech FAQ.

I remember from AS2 the looping problem, but I hoped it was fixed in AS3.
So this is what I tried to do:

A colleague of mine (Boy Wonder) gave me a beat so I could go to work.

#1 – First try

First convert the beat from WAV to MP3: I used Audacity, an open source software for recording and editing sound.

Oke, the only thing I needed is to load the file (because it’s a local test, there is no loading) and hear if it worked:

// AS3
private var url:String = "MySound.mp3";
private var song:SoundChannel;
var request:URLRequest = new URLRequest(url);
var soundFactory:Sound = new Sound();
soundFactory.load(request);
song = soundFactory.play(0, int.MAX_VALUE); 

No, it didn’t loop correctly

#2 – Second try

Open the newly generated MP3, and there they are: the silence at the beginning and at the end of the song. I could use Audacity to remove it, but I use another program for that: mptrim.

mpTrim is a simple and easy to use MP3 editor.

  • mpTrim can trim MP3s – removing silent or unwanted parts.
  • mpTrim can adjust the volume of MP3s. Volume change can be manual or automatic (volume normalization).
  • mpTrim can fade-in/out MP3s (to fix abrupt beginning/ending).
  • mpTrim can clean-up MP3s and recover wasted disk space.
  • mpTrim keeps the music quality intact, no matter how many times you process an MP3, because it works directly in the MP3 format without having to decode/re-encode. That also makes it very fast.

mpTrim has an auto function for removing silent, so that’s very easy.

But after loading the new mp3 without silence, the hiccup was much smaller, but still there.

#3 – Third try (neeeh forget it)

The last try would be to fix it in code: I was thinking about a earlier starting a loop (0.02 second) but with a lot of tracks this would probably be very cpu intensive.
A quick search on the Internet, I couldn’t find a solution in code. It’s a bug in Flash and people that are more into sound then I am, are working hard to move Adobe to change some of the sound features in Flash: http://www.make-some-noise.info/

Conclusion

Because I have a hard head, and I need to make the same mistakes everyone makes….
But after all I have to conclude: It can’t be done, you will eventually get a hiccup in the loop.
It’s impossible to fix this problem.

So a dynamically loaded MP3 loops in flash will never work. The only way to get good loops is with WAV imported in the FLA (library) and use linkage

🙁

Tiled background AS3

Sometimes you just need a pattern in the background that is fullscreen, of course you can use a big .PNG file but that is not always necessary.
You can use a pattern that you need to tile, I’ve written about this before: my post about tiled-background in Flash 8 AS2.
The code over there is based upon a tutorial (http://www.kirupa.com/developer/flash8/tiledbackground_flash8.htm)

And because kirupa is great they already have the answer:http://www.kirupa.com/forum/showthread.php?t=265953

But to put it next to each other:

AS2 example

For this example you need a bitmap in the library (right-click >> Linkage >> activate Export for ActionScript) with the Linkage Indentifier StripePattern_mc and this AS2 code placed in the root
[as]
import flash.display.BitmapData;
var backGroundBMP:BitmapData = BitmapData.loadBitmap(“StripePattern_mc”);
this.beginBitmapFill(backGroundBMP);
this.lineTo(Stage.width, 0);
this.lineTo(Stage.width, Stage.height);
this.lineTo(0, Stage.height);
this.lineTo(0, 0);
this.endFill();
[/as]

AS3 example

But in AS3 some things have changed. And for consistency I’m using StripePattern_mc although coding conventions will say it has to be StripePattern
[as]
var backGroundSprite:Sprite = new Sprite();
backGroundSprite.graphics.beginBitmapFill(new StripePattern_mc(0, 0));
backGroundSprite.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
backGroundSprite.graphics.endFill();
addChild(backGroundSprite);
[/as]

Besides the obvious changes, which I’m not going to explain (Stage.width vs stage.stageWidth, etc).

code line 2
BitmapData.loadBitmap is removed from AS3. There are no longer Linkage Identifiers and there is no longer attachMovie. Everything is created using the new operator.
And because a Bitmap(Data) needs two extra variables:
public function BitmapData(width:int, height:int, transparent:Boolean = true, fillColor:uint = 0xFFFFFFFF)

code line 3
drawRect is a new Graphic methode, but is does the same as the AS2 code part with lineTo, but shorter.

code line 5
and you need to add it to the displaylist (hmmm perhaps I need to explain this in a future post)

For this example I created a pattern with stripegenerator.com/ but any pattern will do.

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…

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 – 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

From AS2 to AS3 – Where did it go – attachMovie

Where did attachMovie go in AS3?

Once I started using attachMovie instead duplicateMovieClip my AS2 life became a lot easier.

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

ActionScript 2.0  ActionScript 3.0  Comments
attachMovie() Method Removed In ActionScript 3.0, use addChild() to add child display objects.

Removed… wtf? and you can read the documentation till you are old and gray, but you won’t find a answer there.

In AS2 I know 3 ways to attach a movie to the stage:

Continue reading

From AS2 to AS3 – Where did it go – setRGB

Update #1: It seems that .setRGB () has been deprecated in favor of the flash.geom.ColorTransform class. So a little as2 update.

In some cases I can’t help thinking that AS3 hasn’t made our live easier.
The same happened with the change that happened from the AS2 setRGB to AS3.

Specifies an RGB color for a Color object.

setRGB

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

ActionScript 2.0 ActionScript 3.0 Comments
setRGB() Method flash.geom.ColorTransform.color The RGB color value can be set by using the color accessor property of the ColorTransform class.

ActionScript 2 example code:
[as]
// AS2 Code
var my_color:Color = new Color(my_mc);
my_color.setRGB(0xFF0000); // my_mc turns red
[/as]

Another AS2 example because: “The Color class has been deprecated in favor of the flash.geom.ColorTransform class.”
[as]
// AS2 Code (The Color class has been deprecated in favor of the flash.geom.ColorTransform class.)
import flash.geom.ColorTransform;

var colorTrans:ColorTransform = new ColorTransform();
colorTrans.rgb = 0xFF0000;
var trans:Transform = new Transform( my_mc);
trans.colorTransform = colorTrans;[/as]

and the same code in ActionScript 3:
[as]
// AS3 code
import flash.geom.ColorTransform;

// Changes my_mc’s color to red.
var newColorTransform:ColorTransform = my_mc.transform.colorTransform;
newColorTransform.color = 0xff0000;
my_mc.transform.colorTransform = newColorTransform;
[/as]

More code to write, for something that I don’t use very much. The next time I need to change an Objects color I probably need to search the solution on the web…

No, I going to fix this in a neat little package:
Save this file into: ‘nl.matthijskamstra.utils’
[as]
/**
* Color (AS3), version 1.0
*
* Enter description here
*
*

*  ____                   _      ____ 
* |  __| _ __ ___    ___ | | __ |__  |
* | |   | '_ ` _ \  / __|| |/ /    | |
* | |   | | | | | || (__ |   <     | |
* | |__ |_| |_| |_| \___||_|\_\  __| |
* |____|                        |____|
* 
* 

*
* @class : Color
* @author : Matthijs C. Kamstra [mck]
* @version : 1.0 - class creation (AS3)
* @since : 11-5-2008 0:22
*
*/
package nl.matthijskamstra.utils {

import flash.display.*;
import flash.events.*;
import flash.geom.ColorTransform;

public class Color {

// Constants:
public static var CLASS_REF = nl.matthijskamstra.utils.Color;
public static var CLASS_NAME : String = "Color";
public static var LINKAGE_ID : String = "nl.matthijskamstra.utils.Color";

/**
* Constructor
*
* @usage import nl.matthijskamstra.utils.Color; // import
* var __Color:Color = new Color ( this );
* @param $targetObj a reference to a movie clip or object
*/
public function Color( $targetObj:DisplayObject=null, $colorValue:uint = 0xff3333) {
// trace ( LINKAGE_ID + ' class instantiated');
if ($targetObj == null) { return; }
var newColorTransform:ColorTransform = $targetObj.transform.colorTransform;
newColorTransform.color = $colorValue;
$targetObj.transform.colorTransform = newColorTransform;
}

//////////////////////////////////////// Static ///////////////////////////////////////

static public function setRGB( $targetObj:DisplayObject = null, $colorValue:uint = 0xff3333) {
return new Color ( $targetObj, $colorValue);
}

} // end class

} // end package
[/as]

And now I hope you will never have to look for it again
Happy AS3 😉