Values for the calculation in the Utils3D.projectVectors() method

The Utils3D.projectVectors() method calculates t value of the uvt data by the following formula:

t value = 1 / (Distance to the origin + z coordinate value)

Also, the method calculates projected x and y values by the following formula:

Projected x or y value = Three-dimensional space x or y coordinate * Focal length * t value

The frame action below compares the results of calculation by the formulas above with the methods’. And [Output] is as follows:

0,0,0.0004 // uvt data
0.0004 // Calculated t value
20,20 // Projected x and y coordinates
20 // Calculated two-dimensional space x or y coordinate

var myPerspective:PerspectiveProjection = new PerspectiveProjection();
var myMatrix3D:Matrix3D = new Matrix3D();
var nDistance:Number = 1000;  // Distance to the origin
var nX:Number = 100;  // Three-dimensional space x or y coordinate
var nZ:Number = 1500;  // Three-dimensional z coordinate
var vertices3D:Vector.<Number> = Vector.<Number>([nX, nX, nZ]);
var vertices2D:Vector.<Number> = new Vector.<Number>();
var uvtData:Vector.<Number> = Vector.<Number>([0, 0, 0]);
var nT:Number = 1/(nDistance + nZ);  // t value
myPerspective.focalLength = 500;  // Focal length 
myMatrix3D.appendTranslation(0, 0, nDistance);
myMatrix3D.append(myPerspective.toMatrix3D());
Utils3D.projectVectors(myMatrix3D, vertices3D, vertices2D, uvtData);
trace(uvtData);  // uvt data
trace(nT);  // Calculated t value
trace(vertices2D);  // Projected x and y coordinates
trace(nX * myPerspective.focalLength * nT);  // Calculated two-dimensional space x or y coordinate

I released Simple Metronome app that runs with Package for iPhone technology, CS5’s new feature. I just got permission to talk about the app.

Seems this is the first Flash made iPhone app from Japan.

This app is originally made for technical research, to understand animation speed and interactivity of flash for iPhone. The reason why I made metronome is simply it needs accurate and smooth frame rate. Version 1.00 is minimum implementation, it will be updated step by step.

Some people said that flash is too slow for iPhone, however as far as I see this app, Flash is enough fast for actual project. It may be not for 3d game, but for utility app. Flash CS5 is still under development and I believe it will be much much faster when it is actually shipped.

The biggest advantage of Flash made iPhone app is that you can easily build both iPhone app and online demo. In iPhone app market, many people looking for the way to promote their application, however only flash developer can promote their app with working demo on the web site!!. It’s quite strong feature, isn’t it?

This is sample project and I will make the source code open. It will be available when Flash CS5 is released.

80.00003182368921 1.3962639570236206

var nRotationY:Number = 80;
my_mc.rotationY = 0;
var myMatrix3D:Matrix3D = my_mc.transform.matrix3D;
myMatrix3D.prependRotation(nRotationY, Vector3D.Y_AXIS);
trace(my_mc.rotationY, myMatrix3D.decompose()[1].y);

Then change the number of degrees in the variable, nRotationY, to 100. The code seems to rotate an instance 100 degrees. However, the number of degrees shown in the [Output] panel is still 80.

80.00003182368921 1.3962639570236206

var nRotationY:Number = 100;  // 80;
my_mc.rotationY = 0;
var myMatrix3D:Matrix3D = my_mc.transform.matrix3D;
myMatrix3D.prependRotation(nRotationY, Vector3D.Y_AXIS);
trace(my_mc.rotationY, myMatrix3D.decompose()[1].y);

The following code reveals the reason.

0 80.00003182368921 0
Vector3D(0, 1.3962639570236206, 0)
180.00000500895632 80.00003182368921 180.00000500895632
Vector3D(3.1415927410125732, 1.3962639570236206, 3.1415927410125732)

var mySprite:Sprite = new Sprite();
var axis:Vector3D = Vector3D.Y_AXIS;  // Vector3D.X_AXIS  // Try to change this
mySprite.rotationY = 0;
var myMatrix3D:Matrix3D = mySprite.transform.matrix3D;
myMatrix3D.prependRotation(80, axis);
xTrace(mySprite);
myMatrix3D.prependRotation(20, axis);
xTrace(mySprite);
function xTrace(targetSprite:Sprite):void {
	trace(targetSprite.rotationX, targetSprite.rotationY, targetSprite.rotationZ);
	trace(targetSprite.transform.matrix3D.decompose()[1]);
}

When the Matrix3D.prependRotation() method rotates an instance 100 degrees with y axis, it is only rotated 80 degrees but is flipped with x and z axes.

The appearance of the instance is all right. But the number of degrees is not good. Besides, 100 degrees can be set with x or z axis. It means that the result of y axis is not consistent. Therefore, I suspect that this is a bug.

The Transform class provides access to color adjustment properties and two- or three-dimensional transformation objects that can be applied to a display object.

I noticed three types of properties from the point of view of getting and seting their values.

The first example is the Transform.matrix property. It does not provide its Matrix object reference but its copy. It means that operations to the copy will not affect to the property’s Matrix object. To set a Matrix object to the Transform.matrix property, the object should be assigned to the property.

var mySprite:Sprite = new Sprite();
var myMatrix:Matrix = new Matrix();
mySprite.transform.matrix = myMatrix;
myMatrix.translate(100, 50);
trace(mySprite.transform.matrix);
// Output: (a=1, b=0, c=0, d=1, tx=0, ty=0)
mySprite.transform.matrix = myMatrix;
trace(mySprite.transform.matrix);
// Output: (a=1, b=0, c=0, d=1, tx=100, ty=50)
myMatrix = mySprite.transform.matrix;
myMatrix.scale(2, 1.5);
trace(mySprite.transform.matrix);
// Output: (a=1, b=0, c=0, d=1, tx=100, ty=50)
trace(mySprite.transform.matrix == myMatrix);  // Output: false

The second example is the Transform.matrix3D property. Unlike to the Transform.matrix property, a Matrix3D object’s reference is obtained from the property. Therefore, once its reference is gotten, operations to the reference affects to the Transform.matrix3D property.

var mySprite:Sprite = new Sprite();
var myMatrix3D:Matrix3D = new Matrix3D();
mySprite.transform.matrix3D = myMatrix3D;
myMatrix3D.prependTranslation(100, 50, 0);
trace(mySprite.transform.matrix3D.position);
// Output: Vector3D(100, 50, 0)
trace(mySprite.transform.matrix3D == myMatrix3D);  // Output: true

The third one is the Transform.perspectiveProjection property. When a new PerspectiveProjection instance is assigned to the property, operations to the instance do not affect to the property as well as the Transform.matrix property. Then, try to get the object from the property and set it to a variable again. You can operate the variable as if it was the object reference of the property. However the variable’s object is not evaluated to be equal to the property’s value. It is a mysterious property, isn’t it.

var mySprite:Sprite = new Sprite();
var myPerspective:PerspectiveProjection = new PerspectiveProjection();
mySprite.transform.perspectiveProjection = myPerspective;
myPerspective.fieldOfView = 20;
trace(mySprite.transform.perspectiveProjection.fieldOfView);  // Output: 55
myPerspective = mySprite.transform.perspectiveProjection;
myPerspective.fieldOfView = 100;
trace(mySprite.transform.perspectiveProjection.fieldOfView);  // Output: 100
trace(mySprite.transform.perspectiveProjection == myPerspective);
// Output: false

Hello all, I’m kei mesuda aka keim japanese free-game home brewer.

I just release completely new software synthesizer named “SiON” (pronounced as “scion”), so let me introduce my work.

The SiON library works on ActionScript3/Flash10. This provides a simple sound synchronization with DisplayObject and an easy dynamic sound generation. You can generate various sounds without any mp3 files and wave data. The musical sequence is represented as simple text data “Music Macro Language”. It makes your sounding SWF file very very small.

This library’s development center is here in spark project. You can get newest version’s swc file, asdoc and svn link.

- Demonstrations

You can use SiON in Wonderfl and I posted some demonstrations.

• SiON Tenorion
• SiON KaosPad
• SiON Kaoscillator
• Super Mario Synthesizer
• SiON FM synthesizer WF-1

Other works using SiON are shown in tag [SiON] in Wonderfl. I plan to post some other works with SiON at wonderfl, please check my page if you want more.

• MMLTalks

And this is another demonstration for SiON. The MMLTalks is an MML hosting service powered by SiON. Here, you can listen many musics generated only by SiON software synthsizer without any mp3 files and wave data.

- Synthesizer specifications

The SiON software synthesizer is an extention of the sound chip YM2151s emulator. Currently, SiON includes 4 types of sound modules.

• Extended Emulators of various Frequency Modulation synthesizing sound chips; The emulation code is based on the time-proven emulators, MAME, fmgen and x68sound.dll. And the outputs of various sound chips (OPM,OPNA,OPL3,OPX,MA3) are reproducible by giving same parameters of actual equipments.

• Simulator of PSG and wave memory sound chips; The SiONs Extended FM synth can simulate various PSG chips (AY-3-8910, DCSG, 2A03, SSG) and wave memory sound chips(SCC, C15, GameBoy).

• Physical Modeling Guitar synthesizer; SiON also includes Guitar Physical modeling synthesizer based on Karplus strong algorism.

• PCM sound module; The SiON handles MP3 sound (Sound Class) as a PCM sound modules source wave. This means you can control the pitch of MP3 file by musical sequence.

The SiON can modify the output from these sound modules by low-pass filter with ADSR envelop, ring modulation, pitch/amplitude modulation.

- Sequencer specifications

The SiON uses Music Macro Language (MML) as a musical score data. The MML is a simple powerful language to represent musical sequence. For example, “[ccggaag2 ffeeddc2 | [ggffeed2]]” represents “the ABC song” in MML. The reference manual is here, mml editor here, and you can refer MMLs of various great musics here in MMLTalks (and click rightmost button in song title).

- Effector specifications

SiON includes many sound effectors like reverb, chorus, delay, wave shaper, various filters, speaker simulator and so on. These effectors can be control from MML. Please see the discriptions in the MML reference manual.

Now detail discription is under construction, please check my blog or development center. And if you have any questions or comments, please leave comment on this post or contact me by e-mail (but sorry for my poor English..).

It’s basically made with Flash 10’s drawTriangles API & Yoshihiro Shindo’s betweenAS3 tween library.

It’s just a initial sketch, but seems there is plenty of possibilities around the new bitmap drawing API.

1120: Access of undefined property s.

Compile error #1120

I found another condition of the error. If a “private” class inherits a class other than Object the compile error will be prevented.

package {
	import flash.display.Sprite;
	public class PrivateClassIssue extends Sprite {
		public function PrivateClassIssue() {
			var s:String = 'hello';
			trace(s);
		}
	}
}
class Foo {}
class Bar extends Array {}  // inherits Array class

During the perspective transformation, the focalLength is calculated dynamically using the angle of the field of view and the stage’s aspect ratio (stage width divided by stage height).

However as far as I tested it, the stage height does not affect the result of focalLength property’s value. It is calculated from only the stage width by the following formula:

tan(fieldOfView/2) = (stageWidth/2)/focalLength
focalLength = stageWidth/2 tan(fieldOfView/2)

*From [Help] of PerspectiveProjection

focal length and field of view

Therefore the function below returns focal length by passing field of view.

// Frame action
function getFocalLength(nFieldOfView:Number):Number {
	var falf_tan:Number = Math.tan(nFieldOfView / 2 * Math.PI / 180);
	return stage.stageWidth/2/falf_tan;
}

[Note]: With Stage.scaleMode property set to StageScaleMode.NO_SCALE, the value of Stage.stageWidth property can be changed when the browser window is resized. However the PerspectiveProjection.focalLength would be calculated by the original width of the stage set with the [Property] inspector.

The revised function below can return the right result in the case:

// Frame action
var originalMode:String = stage.scaleMode;
stage.scaleMode = StageScaleMode.EXACT_FIT;
var myStageWidth:int = stage.stageWidth;
stage.scaleMode = originalMode;
function getFocalLength(nFieldOfView:Number):Number {
	var falf_tan:Number = Math.tan(nFieldOfView / 2 * Math.PI / 180);
	// return stage.stageWidth/2/falf_tan;
	return myStageWidth/2/falf_tan;
}

I don’t give assurance about quality, but many main features may works well. Please test and send feedback (bug report, request, etc) to me.

You can checkout BetweenAS3 Alpha r3022 via SVN from:

• http://www.libspark.org/svn/as3/BetweenAS3/tags/alpha-r3022/

or download as ZIP or SWC from:

• http://www.libspark.org/svn/as3/BetweenAS3/tags/alpha-r3022/release/

Did you find text “fp9″ in filename? There is good news. FlashPlayer9 version also available!!

Yesterday, version of BetweenAS3 in Wonderfl is r2505, but today, it was updated to r3022. You can enjoy new version in Wonderfl!! You can find BetweenAS3 samples in this “BetweenAS3Tutorial” tag page.

Changes from r2505 to r3022 is the following:

 * [r3021] Created FlashPlayer9 version based on r3019.
 * [r3018] Fix: Error occurred when stopping or playing tween in event handlers.
 * [r3017] Added property for frame tween (_frame) and utility for convert frames and time (TimeUtil).
 * [r3016] Added ITween.togglePause
 * [r3009] [r3010] Supported physical tween. (BetweenAS3.physical)
 * [r3007] Added shortcuts for BetweenAS3.tween and BetweenAS3.bezier
  * BetweenAS3.to
  * BetweenAS3.from
  * BetweenAS3.bezierTo
  * BetweenAS3.bezierFrom
 * [r3005] Fix: Function specified in BetweenAS3.func will be called many times.
 * [r2998] Supported bezier tween. (BetweenAS3.bezier)
 * [r2996] Supported parallel and serial by passing Array parameter. (BetweenAS3.parallelTweens, BetweenAS3.serialTweens)
 * Changed internal architecture and package.
  * Supported inheriting event handlers when processing tweens by this change.
  * [r2994] Created IUpdater interface.
  * [r2694] Renamed BetweenEvent class to TweenEvent.
  * [r2692] Moved ITicker interface and TickerListener class to Core package.
  * [r2688] Created Core package.
  * [r2688] Removed ITweenTarget interface, integrated it to ITween interface and created IObjectTween interface.
  * [r2688] Created ITweenContainer (now ITweenGroup) interface.
 * [r2618] Moved a delay setting to the BetweenAS3.delay method for more flexibility.
 * [r2617] Changed the timing of calculating tween parameters to the first time of start playing the tween.
    Now sequence of tween using related value works fine.
     BetweenAS3.serial(
       BetweenAS3.tween(mc, {$x: 100}),
       BetweenAS3.tween(mc, {$x: 100})
     );
 * [r2600] Fix: Sometimes ReferenceError has occured while creating a tween.

Here is FAQ:

 Q. How to do filter tween?
 A. Do the following:

     BetweenAS3.tween{mc, {_glowFilter: {blurX: 32, blurY: 32}}).play();

    The following properties for filter are supported.

     * _bevelFilter
     * _blurFilter
     * _colorMatrixFilter
     * _convolutionFilter
     * _displacementMapFilter
     * _dropShadowFilter
     * _glowFilter
     * _gradientBevelFilter
     * _gradientGlowFilter
     * _shaderFilter

 Q. How to do ColorTransform tween?
 A. Do the following:

     BetweenAS3.tween(mc, {transfrom: {colorTransfrom: {redOffset: 255}}}).play();

 Q. How to do SoundTransform tween?
 A. Do the following:

     BetweenAS3.tween(sc, {soundTransform: {volume: 0.0}}).play();

 Q. How to set delay?
 A. By using BetweenAS3.delay, add delay to tween.

     BetweenAS3.delay(BetweenAS3.tween(mc, {x: 100}), 1.0).play(); // Delay 1.0 sec

 Q. How to do bezier tween?
 A. Do the following. Pass control points in argument 4. Set Array of control points for each property.

     BetweenAS3.bezier(mc, {x: 385, y: 207}, null, {x: [58.05, 145.9, 246.7, 345.55], y: [61.4, 80.65, 167.05, 209.3]}).play();

// Frame action
import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
var myColmn:DataGridColumn = new DataGridColumn("data");
var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn(myColmn);
// myColmn.cellRenderer = "CustomCellRenderer";  // Error #2007
myColmn.cellRenderer = CustomCellRenderer;  // OK
myDataGrid.addItem({data: "test"});
addChild(myDataGrid);

[Help] also tells that the type of the property’s value can be String. However setting a String class name causes Error #2007 like the below. The error would be shown if the comment-outed statement was validated instead in the sample above.

TypeError:Error #2007:Parameter child must be non-null.

I happened to see DataGridColumn.cellRenderer property in ActionScript 2.0 Components Language Reference. It says that the property is “a linkage identifier for a symbol”.

Therefore, I tried to create an empty MovieClip symbol and to set the class to [Class] of [Linkage]. Then the String class name set to the property in the code above worked properly without an error. As my conclusion, a String class name might only be used for the class set to [Class] of [Linkage].

->

In order to set size of the drop down list properly call UIComponent.validateNow() method after an item is removed with the method like the following code:

// Frame action
import fl.controls.ComboBox;
var myComboBox:ComboBox = new ComboBox();
addChild(myComboBox);
myComboBox.addEventListener(Event.CHANGE, xSelected);
myComboBox.addItem({label:"Dreamweaver CS4", data:"html"});
myComboBox.addItem({label:"Fireworks CS4", data:"png"});
myComboBox.addItem({label:"Flash CS4 Professional", data:"fla"});
function xSelected(eventObject:Event):void {
	var myItem:Object = myComboBox.getItemAt(0);
	myComboBox.removeItem(myItem);
	myComboBox.validateNow();  // Insert this statement.
}

In the ComboBox class ComboBox.removeItemAt() method calls UIComponent.invalidate() method after deleting an item with List.removeItemAt() method.

public function removeItemAt(index:uint):void {
	list.removeItemAt(index);
	invalidate(InvalidationType.DATA);
}

However, ComboBox.removeItem() method does not call the method.

public function removeItem(item:Object):Object {
	return list.removeItem(item);
}

Therefore, UIComponent.invalidate() method could be used instead of UIComponent.validateNow() method.

// Frame action
import fl.core.InvalidationType;
import fl.controls.ComboBox;
var myComboBox:ComboBox = new ComboBox();
addChild(myComboBox);
myComboBox.addEventListener(Event.CHANGE, xSelected);
myComboBox.addItem({label:"Dreamweaver CS4", data:"html"});
myComboBox.addItem({label:"Fireworks CS4", data:"png"});
myComboBox.addItem({label:"Flash CS4 Professional", data:"fla"});
function xSelected(eventObject:Event):void {
	var myItem:Object = myComboBox.getItemAt(0);
	myComboBox.removeItem(myItem);
	myComboBox.invalidate(InvalidationType.DATA);  // Insert this statement.
}

In my previous entry, I wrote about the Timeline message I made in JSFL for Geoff when he was here in Tokyo during our last User Group Meeting.

The 3 things I want to highlight from that are:

* How it is possible to talk between JSFL and AS3
* Rendering Particles in AS3
* Reaching the limits of JSFL

Taking that in consideration, let me try to explain in detail what it all means:

First of all, as I’ve already mentioned this, it is possible to communicate between JSFL and AS3.
It’s very close to how you use ExternalInterface, and in a similar way, you can call from AS3 methods defined in JSFL, as well as calling JSFL methods defined in AS3.

The task then becomes splitting responsibilities properly, or “letting each object do by themselves what they are really good at doing”.
Originally, JSFL was not a language thought for expression. So in a way you will very quickly find how limited it is. However, we can tweak things a little bit and try writing shapes that resemble type in the timeline by almost using only JSFL.
One of the possible methods to create something like this would be by defining a very large range of variables representing each character. But this seems to be a very inefficient method of doing things.

Opposite to that, in AS3, expression is really one it’s most inherent characteristics.

In the following example, we create all the text character variables we need in AS3 and we then hand that over to JSFL as a package so it can handle that input.

The process goes as follows:

First as a precondition, we thing of 1 pixel as 1 frame. The coordinate origin is set at the top left.

* In AS3 we measure the size of the Textfield and pass that to JSFL
* In JSFL we measure the biggest size needed to represent all text, and then create as many keyframes as needed to fit that.
* In AS3 we then copy the contents of the textfield into a BitmapData object.
* We then grab the output of that BitmapData, scan it, and grab all coordinates for each pixel we want to represent.
* Finally pass each of those coordinates to JSFL

Below is all the AS3 source.

When sending data to JSFL we make use of MMExeCute, but since its pretty awkward to use, we wrap that in our own MMExecute2.

To grab all data from our Bitmap we use getVector since it many times faster than trying to manipulate a ByteArray using getPixels.

package {
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Rectangle;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.text.Font;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.utils.ByteArray;

	/**@author kamoyusuke */
	public class Message extends Sprite {

		public function Message():void {
			var loader:URLLoader = new URLLoader();
			loader.addEventListener(Event.COMPLETE, completeHandler);
			loader.load(new URLRequest("timelineMessage.xml"))
		}

		private function completeHandler(e:Event):void {
			XML.ignoreWhitespace = true;
			var xml:XML = new XML(e.target.data);

			var tf:TextField = new TextField();
			tf.defaultTextFormat = new TextFormat(xml.message[0].@font,Number(xml.message[0].@size));
			tf.autoSize = TextFieldAutoSize.LEFT;
			tf.text = xml.message[0];

			MMExecute2.setDefault(MMExecute2.CONFIG_JS_URI,"VisualizeTimeLine")
			MMExecute2.run("init", [Math.round(tf.height), Math.round(tf.width)]);

			//trace(Math.round(tf.width),Math.round(tf.height))

			var canvas:BitmapData = new BitmapData(tf.width, tf.height, false);

			canvas.draw(tf);

			var board:BitmapData = new BitmapData(tf.width, tf.height, false);
			var bm:Bitmap = addChild(new Bitmap(board)) as Bitmap;

			drawVector(canvas,board);
		}

		private function drawByteArray(canvas:BitmapData, board:BitmapData = null):void{
			var bytes:ByteArray = canvas.getPixels(canvas.rect);

			var color:uint, p:int;
			var _x:int;
			var _y:int = -1;
			for (bytes.position = 0; bytes.position < bytes.length; color = bytes.readUnsignedInt()) {
				p = bytes.position / 4
				_x = p %canvas.width;
				_y  += !_x ? 1: 0;
				if (!color) {
					//board.setPixel(_x, _y,0)
					MMExecute2.run("setMotionTween",[Math.round(_y),Math.round(_x)]);
				}
			}
		}

		private function drawVector(canvas:BitmapData, board:BitmapData = null):void {
			var bytes:Vector. = canvas.getVector(canvas.rect);
			bytes.fixed = true;
			canvas.lock();

			var color:uint, i:int;
			var _x:int;
			var _y:int = -1;
			for (i; i < bytes.length; i++) {
				color = bytes[i];
				_x = i %canvas.width;
				_y  += !_x ? 1: 0;
				if (!color) {
					//board.setPixel(_x,_y,0)
					MMExecute2.run("setMotionTween",[_y,_x]);
				}
			}
		}
	}

}

Next is the source for the JSFL.

Once we call our init method in MMExecute2, we measure the height and with of the text we want to represent and we then create as many layers and blank frames we need in the document we are currently on. Finally, we delete all layers that where originally in the document. The next thing we call is setMotionTween. This method receives the bitmap data, scans it and whenever it finds a colored pixel it executes it on the set layer and frame number. The internal property being used Timeline.currentLayer sets the layer to be modified next. Timeline.createMotionTween then creates a motion tween from and to the frameIndex received.

var currentTimeline = fl.getDocumentDOM().getTimeline();
var layerHeight;
var frameLength;

function init(_layerHeight,_frameLength){
	layerHeight = _layerHeight;
	frameLength =  _frameLength;
	for(var i= 0;i$lt;layerHeight;i++){
		var targetLayer = currentTimeline.layers[currentTimeline.addNewLayer()];
		currentTimeline.convertToBlankKeyframes(0,frameLength+1)
	}
	currentTimeline.deleteLayer(currentTimeline.layers.length-1)
}

//指定フレームをモーショントゥイーンに設定
function setMotionTween(layerIndex,frameIndex){
	currentTimeline.currentLayer = layerIndex
	currentTimeline.createMotionTween(frameIndex,frameIndex)
}

So as you can see, it is possible to very easily cooperate between the two worlds and this opens the possibility to many more ideas.

This is for example how Kuler actually integrates with the Adobe CS family products.
That said, since this is a method that has not been really designed for this sort of interaction, it is very possible that things will simply break when trying to push it too hard, so be advised!

---------------------------------------------------------------------------

Thanks to him, I was able to open to the public.
Against Mr. Marcos, and I am deeply grateful !!

But now you can find some new stuffs because we updated the English front page today! It’s based on latest Japanese front page. Enjoy!

Hi, my name is Yasuhiko Nishimura and I am an interactive designer at Business Architects.
The Jikkyo Generator 2010 website build by us went live in May.

The previous version Jikkyo Generator 2008 was integrated with eyeVio for the videos but to enable more users to enjoy the website the new release features integration with YouTube.

In this entry I will explain a bit more about the integration with the YouTube API.
(This entry will be about AS2)

0.Prepare to use the YouTube API.

YouTube allows the use of the Data API or the Player API, however for a full Flash based site like this one you need to use the chromeless player which allows you to create your own player. Also you need to have developer key to use the YouTube API.
To get your developer key register at the following url: http://code.google.com/apis/youtube/dashboard/

1.Classes to use

Source Code: download from here.
(The sources comments are written in Japanese language)

The following 3 classes are used.

com.b_architects.lab.youtube.YTPlayer

This class load the chromeless player.

com.b_architects.lab.youtube.YTData

This class receives and manages the information abou the video from the Data API

com.b_architects.lab.youtube.YTConstant

This contants class holds the developer key and other YouTube related parameters.

Inside the YTConstant.as the following need to be registered
PRODUCT_NAME,CLIENT_ID,DEVELOPER_KEY
(You can also initialize these at execution time without rewriting the sourcecode)

2.Create and initialize the player

To create a player execute the following command:

    YTPlayer.getPlayer(target:MovieClip);

target here is the MovieClip instance which creates the player. First create an empty MovieClip instance and the replace the __proto__ property with YTPlayer.prototype. By doing so, you create an instance of the YTPlayer from script without having to create linkage from the library. (You can also do this by setting up a linkage to the MovieClip symbol from the library)

The YTPlayer is embedding the chromeless player from the YouTube servers and might take some time to load.
Once the player is loaded and ready to be used the YTPlayer.EVENT_PLAYER_READY event is issued.

the actual code look like:

    import com.b_architects.lab.youtube.YTPlayer;
    var player:YTPlayer = YTPlayer.getPlayer(this);
    player.addEventListener(YTPlayer.EVENT_PLAYER_READY,onPlayerReady);
    function onPlayerReady(e:Object) {
        //The process for once the initialization is finished
    }

and the player is ready.

3. Control and playback the video

To playback the video execute the following code:

    player.loadVideoById("2L0nGWDPt6A");

this exectution load the video based on the ID passed on the the loadVideoById.

For other video controls reference the following url: http://code.google.com/intl/en/apis/youtube/flash_api_reference.html#Operations

The YTPlayer implements the chromeless player's methods under the same method name.

4. Load Youtube data

By using the YTData class you can check wether the video for that ID exists, if you can use the API or not, thumbnail path and other usefull information for creating the site. When passing the ID with the String to the constructor the data gets initialized. Once the initialization is done the YTData.VIDEO_CHECK event is issued.

The basic usage is:

    import com.b_architects.lab.youtube.YTData;
    var data:YTData = new YTData("http://www.youtube.com/watch?v=2L0nGWDPt6A");
    data.addEventListener(YTData.VIDEO_CHECK,onChecked);
    function onChecked(e:Object):Void {
        trace(e.target.id);
    }

5. Conclusion

As stated above this is a general overview on how to use the YouTube API.
The Jikkyo Generator website uses the concepts stated above as its core and has additional features such as playback control, adding narations and other playback functions. The YouTube API has been altered over the years and it can easily change again soon.
When that change occures hopefully changes required on the website will be minimal because the API part stands alone from the website.

Although creating what we have created is not difficult it can be cumbersome and I hope by sharing this information it might benefit others.
If you have a chance, try this out.

I think I have forgotton to post this experiment to JActionScripters.
Here is a playable demo & source code that I showed on the FITC2009 session. Storm simulation with 10000 particle.

Basically all physic and mouse interaction is calculated with bitmap force map. Precalculating mouse interaction with bitmap is much faster than doing mouse distance with 10000 particles every frame.

You can also see stupid 250000 particle version here.