First the good:
The book that I’m going to be in (book “Urban Paper” from Matt Hawkins) is printed: one of these days I will get my copy!!!!
I’ve written about it here and here.
then the bad:
I broke my wrist and can’t type very fast with one hand.
So I will be posting infrequently for about 5/8 weeks.
And the subjects will be short….
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
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:
create a folder with the name “Matthijs tutorials” (or use your own name, it’s not important)
create in the folder “Matthijs tutorials”, another folder “source”
save a flash file in the “source” folder: “documentClassTest.fla”
now we start making packages: create a folder “nl”
and save in folder “nl” a folder “matthijskamstra “
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
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…
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)
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.
When I started to write about this Griant Robot there was not a site for it; now there is: Gaint Robot Shin.
This website is for a contest: “Customize the template with your own designs”.
But before you start designing: you need to read the rules (.pdf)…. But to make a long story short: basically you need to live in the USA, which I don’t do)
But the best stuff is yet to come: the template that are in the magazine can be downloaded form there: part 1, part 2, part 3 and the blank template.
I’ve been asked to talk about this subject…… yeah this title is ohhh soooo original.
I though about it for a while (do I really want to make free advertising for a car company or a magazine?), but I couldn’t resist: Shin Tanaka is involved.
And that dude is cool!!
Shin is featured in an Asian/Amercan popculture magazine Giant Robot with a 3 piece robot: this image is the second one that can be found in Issue 57 of Giant Robot magazine.
Buy magazine 56, 57, 58 and you will have this: How cool is that!
I’ve been looking around in the stores in Amsterdam, but I haven’t found this magazine (yet). So I can’t build it π and those who can’t build, write about it…. π
The same thing about Scion, this brand isn’t sold in the Netherlands (perhaps it is, but I don’t know about it, and I have never seen one).
But if Scion is happy with this post, and want to reward me, just give me a xB (no, really!!)
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…
In my previous post I update the “Hello world” for box2D so that you can see something visual interesting.
You can find the original here: AS3: Hello Box2D.
Today I will post the same code but now how it should be.
Keeping the coding conventions in mind and making it easier to reuse code.
import flash.display.*;
import flash.events.*;
// Box2D Classes used in this “Hello world”
import Box2D.Dynamics.*;
import Box2D.Collision.*;
import Box2D.Collision.Shapes.*;
import Box2D.Common.Math.*;
//[SWF(width=”640″, height=”480″, backgroundColor=”#000000″, frameRate=”60″)]
public class HelloWorld extends MovieClip {
public var world:b2World;
public var iterations:int = 10;
public var timeStep:Number = 1.0 / 60.0;
public var worldScale:Number = 30.0;
// to see what you have created
private var debugDraw:b2DebugDraw;
private var isDebugDrawing:Boolean = true; // change to false and there is no debugDraw
// constructor
public function HelloWorld() {
//trace( “HelloWorld.HelloWorld” );
init();
}
/**
* lets start building our “Hello world” box2D program
*/
private function init():void {
trace( “HelloWorld.init” );
// Add event for main loop
addEventListener(Event.ENTER_FRAME, onUpdateHandler, false, 0, true);
}
/**
* http://www.box2d.org/wiki/index.php?title=Manual/AS3#Creating_a_World
*/
private function createWorld():void {
// Creat world AABB
var worldAABB:b2AABB = new b2AABB();
worldAABB.lowerBound.Set(-100.0, -100.0);
worldAABB.upperBound.Set(100.0, 100.0);
// Define the gravity vector
var gravity:b2Vec2 = new b2Vec2 (0.0, -10.0);
// Allow bodies to sleep
var doSleep:Boolean = true;
// Construct a world object
world = new b2World(worldAABB, gravity, doSleep);
}
/**
* http://www.box2d.org/wiki/index.php?title=Manual/AS3#Creating_a_Ground_Box
*/
private function creatingGroundBox():void {
var groundBodyDef:b2BodyDef = new b2BodyDef();
groundBodyDef.position.Set(0.0, -9.0);
var groundBody:b2Body = world.CreateBody(groundBodyDef);
var groundShapeDef:b2PolygonDef = new b2PolygonDef();
groundShapeDef.SetAsBox(50.0, 10.0);
groundBody.CreateShape(groundShapeDef);
}
/**
* http://www.box2d.org/wiki/index.php?title=Manual/AS3#Creating_a_Dynamic_Body
*/
private function creatingDynamicBody ():void {
var bodyDef:b2BodyDef = new b2BodyDef();
bodyDef.position.Set(10.0, 10.0);
var body:b2Body = world.CreateBody(bodyDef);
var shapeDef:b2PolygonDef = new b2PolygonDef();
shapeDef.SetAsBox(1.0, 1.0);
shapeDef.density = 1.0;
shapeDef.friction = 0.3;
shapeDef.restitution = 0.8;
body.CreateShape(shapeDef);
body.SetMassFromShapes();
}
// extra to visualize
private function setupDebugDraw():void {
if(isDebugDrawing) {
debugDraw = new b2DebugDraw();
debugDraw.m_sprite = new Sprite();
/**
* http://www.box2d.org/wiki/index.php?title=Manual/AS3#Simulating_the_World_.28of_Box2D.29
*/
public function onUpdateHandler(e:Event):void{
world.Step(timeStep, iterations);
}
I’m one step closer filling the 6 slots for Pusher Series 1 (Designers on Drukks).
Scott Schaller is filling the 5th slot with his Dr. Bear
An awesome design. And I love the extras Scott designed for Dr. Bear, especial the brain case.. Always wanted a evil Doctor in my papertoys collection.
Some other nice-toknow information: Scott is a Graphic Design Teacher, which isn’t that special: a lot of papertoy designers have a creative job or education. No, besides teaching Graphic Design, Scott is also in charge of an after school program: F studio.
As a design teacher, I often throw in a lot of hand skills oriented components to the projects I assign. The computer plays a big part in all of our projects, but the finishing of a project, whether it is binding a box or constructing a packaging comp, is the part that makes the project complete. Paper toy crafting just seems to be a natural next step, combining design and illustration, hand skills, and toy making.
….
we are making our own vinyl toys, including the design, sculpting, and casting of resign models
How cool it that!!! I’m trying to figure this stuff out in my spare time and here is a teacher who can teach you everything you ever wanted to know. Man I’m jealous.
Visit Cabrillo Design Lab for more info.
Check this out: Custom self portraits by students of Scott (and himself) based upon boxy from Shin Tanaka.
Scott himself
And way down here on the end of the post… Scott told me that one of his students is working on a Drukk and she wants to have the last slot in series 1. Please do, you can have the last slot. And when you have filled that last spot I will start on the Selfish Series 2. π
