Categories
AS3 Flash

My first AIR app: SWF2GIF-banner – part 1

Sometimes, and I’m not very fond of them, I need to make banners…..
The animation part is not so bad, but making the different sizes…. that can be a drag.
And after you made the SWF banners, you also need to make the animation in GIF.

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.

Categories
AS3 Flash Flash experiments

Six screens Flash animation

I currently working on a project where a Flash Application is played on six (6!) screens.
The screens are 1366×768 which must be (a least mine) the biggest Flash animation (8196px wide and 768pixels high)
The problem with Flash is that it will not go full-screen on more then on screen. With some hacking you can get it to open full-screen on your secondary monitor but not 2 monitors.

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.

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.

Categories
AS3 Flash Open source / Freeware Tools of the trade

FlashDevelop 3.0.0 released

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

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

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

Categories
Flash Misc

Notepad++ opens ActionScript file with Haskell syntax highlighting

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

Google (who else) provided the answer: here.

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

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

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

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

🙂

Categories
AS3 Open source / Freeware Tools of the trade

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

Categories
AS3 Flash

Link dump: 18-03-2008

Just a linkdump, because my wrist is still broken:

We needed a external font library for a project that we did. Here are two links to useful information:
(Runtime font loading with AS3 / Flash CS3 (not Flex!))
http://blog.sitedaniel.com/2008/10/fontcontrol-class-external-font-library/
http://www.betriebsraum.de/blog/2007/06/22/runtime-font-loading-with-as3-flash-cs3-not-flex/

There is just one thing that could drive you mad:

If you additionally place a static textfield onto the stage with the same font the text in the dynamic textfield isnt shown anymore. Dont really understand whybut its probably the same problem as if you set the same font in the dynamic textfield (maybe a font collision?). A workaround is to create the font symbol in the fla and select it (the one with *) in the property inspector.

We used another approach, we removed every font used in the external font-library from the fla-library, and because the libraries can get big, I found this script that will make it easier:
http://www.mattmoore.com/projects/jsfl/Replace%20Document%20Fonts.jsfl

Categories
AS3 Flash Open source / Freeware Tools of the trade

FlashDevelop 3.0.0 RC2 released

I said it before: I don’t like to regurgitate, but program is so good that I can’t help myself….

As we are now approaching the final release of FlashDevelop 3, this release is the last feature release.

FlashDevelop.org – View topic – FlashDevelop 3.0.0 RC2 released.

FlashDevelop is awesome! If you never used it, give it a try. And don’t be afraid that it’s not a final version: I’ve been using release 3.0.0 from the early beta, and never run into major bugs.

FlashDevelop documentation

Categories
AS3 Flash

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

🙁

Categories
AS3 AS3 migration Flash

Document Class in AS3

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

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

But this is what it comes down to:

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

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

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

Document Class
Document Class

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

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

public function Main () {

}

} // end class

} // end package
[/as]

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

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

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

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

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

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

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

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

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

So the Document Class looks now something like this:

[as]
package nl.matthijskamstra {

import flash.display.MovieClip;

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

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

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

} // end class

} // end package
[/as]

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

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

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

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

[as]
package nl.matthijskamstra {

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

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

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

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

} // end class

} // end package
[/as]

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

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

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

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

Categories
AS3 AS3 migration Flash

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.