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.

Another fractal visual sketches. Now I’m cleaning up the code.
May upload moving demo later.

Soucr Code: fladdict_fractalrectangle2.zip

This is my Cinema Display enlarged … see the RGB pixels all lined up ?

Here is what I mean.
(You can click on the movie to make it fullscreen)

No source video in center version

Your camera (such as iSight) as a video source

An interactive MovieClip as a source
(Scrub the movie with your mouse from left to right, vice versa)

You can click on the movie in any sample to make it fullscreen.

The fun part is always research.
I found out that there are lots of ways to line up the RGB components, and all of them had their pros and cons. My display uses the left, straight line-up, but I used the right, shifted version to make the videos look better at this type of low-rez visualization. Of course, the text is horrible.

The problem was, I started my experiments with Flash CS3 and AS2.0, and the best I could do was 4 seconds to setup the RGB version of the pixels, and another 4 to color them – per frame !!
This is just out of the question. This was for a image that was 400×300 pixels in size.

So, I revised my project to AS3.0/FP9, and though I had to make the movie size smaller to a minimal 80×60 pixels, the AS3.0 version is running smoothly on a MacBook Air 1.6GHz (the first MBA), and I’m happy ;D

Now, with AS3.0/FP10 on Flash CS4, with the same code, same hardware, the movie is working with a final output of 800×600px@30FPS, with the master movie at 160×120.

It should be much more faster with Pixel Bender shading, or a more bitmap approach, but the present status is very usable for a project.

Forgive me, as the .as file is not coded as a class, but this is just a study, and I am not that fluent as a programmer.

How to use :
Within SaburiRGBPlayer.as, the 19th line -

var myMode:int=0;//0:cam 1:flv 2:mc
var setPinP:Boolean=false;

You can set myMode to set the source of the RGB video to your Camera, FLVs, or a MovieClip.
The download defaults to a camera.setPinP shows the source video in the center.
If you choose FLV mode, set the array in line 30 to the filenames, and set the array in line 31 to change the volume of audio.

var myFilenameArray:Array=["ipod.flv","ipod2.flv","ipod3.flv","ipod4.flv","ipod5.flv","ipod_nano.flv","ipod_nano_laser.flv"];
var myVolumeArray:Array=[1,0.3,1,1,1,1,1];

Here are the files : SaburiRGBPlayer.zip (24KB)

iPod ADs always rock. Just love them all.

Recently I launched a free web service / AIR application that’s called TiltShift Generator.This is a simple image manipulation app. Using this app, you can add miniature or vintage like effect to your photo on the fly.

Basically I made this application for a study of my next iPhone camera application that follows my app called ToyCamera, and QuadCamera.

Some people already introduced it, and thanks for an unbelievable more than 700 del.icio.us bookmarks! If people want, I might make an iPhone version as well, so catch me on the twitter if you have any ideas.

- Download
WP-Al-SWFObject v2.0

- How to use
Describe the following codes at the position in which you want to embed swf.

[embedSWF]swf, width, height, align, version, expressInstall, flashvars, params, attributes[ /embedSWF]

Some parameters can be omitted. For example,

[embedSWF]hoge.swf[/embedSWF]
[embedSWF]hoge.swf, 200, 100[/embedSWF]
[embedSWF]hoge.swf, 200, 100, right,,,{aaa:"10"}[/embedSWF]
[embedSWF]hoge.swf, 200, 100,,,,{},{},{id:"sample", name:"sample"}[/embedSWF]
[embedSWF]hoge.swf, 400, 360, center, 9.0.0, http://hogehoge.jp/alt.swf, {aaa:"10"}, {menu:"false", allowScriptAccess:"always"}, {id:"sample", name:"sample"}[/embedSWF]

- Control panel
In addition, the default value of each parameter can be set from the plug-in Control panel easily.
The default value is applied to all swf embedded by WP-Al-SWFObject.

- More Information
http://blog.alumican.net/2009/05/18_005204

This plug-in has been updated on Spark Project.

Thanks.

Visual sketch for fractal tessellation.
This is a start point for my fractal study.

SouceCode: fladdict_fractalrectangle.zip

With random fill color and border line.

Without border line.

I think this no margin version is too dirty.

Now rect size affects brightness of the border.

Now rect size affect margin of the region.