【Javascript】

gordon, runtime written in pure JavaScript 続報

Flash Javascript iPhone

iPhone で FLash(swf)再生できると小躍りした、gordon Javascript ライブラリでしたが、実際には少々違うもののようです。
Gordon, iPhoneでFlashを再生する魔法のJavascriptライブラリ

SWFファイルを SVG へ変換し HTML 5 アニメーションを行うもののようです。
現在、変換できるSWFも Flash Player 1 をターゲットに書出されたものに限定されるようです。(詳しく検証していないので間違っているかもしれません)
ボタン機能も実現できるとDemoファイルがアップされています。
Button Demo
http://jancona.com/gordon/demos/buttons.html

インスタンスにActionscriptを記述すれば良いようです。

on (release) {
}

必ずしもファイルを2880px近くにしなくても良いみたいなのですが、デモファイル(blue.swf)が 2834 x 2805 な理由は良くわかりません。

将来はActionscript 2サポートも視野に入っているようなので期待したいと思います。

【感想】
iPhone で Flash を再生させるためのライブラリと期待するとがっかりするかと思います。
swf を SVG へ変換するためのライブラリでアニメーションも可能です。
Flash で HTML 5 アニメーションを作れると思うとかなり嬉しいかな。

今後の開発動向を目が離せないことには間違いありません。

gordon ライブラリの動向が気になる方は @tobeytailor のTwitterをフォローすると良いでしょう。

update 2010-01-17
gordon を使ったコンテンツをiPhoneで見てるとみるみるバッテリーが減ります。
これはgordonが悪いわけでなくiPhone Safari が HTML 5 アニメーション再生にCPUを使いまくるのでしょう。

4月とかウワサされているデュアルコアCPUなiPhonenなら楽々処理してしまうのかもしれません、本物のFlashが再生されるiPhoneになってることを祈りたいものです。

update 2010-01-26
2010-01-18 にソースコードの一部がアップデートされています。
Twitter情報によれば最適化を施したようでiPhoneのCPUを使いまくりはしなくなったらしいです。

update 2010-02-02
2010-01-31 にソースがアップデートされています。

some bug fixes and performance improvements

らしいので gordon 使いは must update です。

update 2010-02-21
gordon 作者の @tobeytailor のツイート

After reading several posts about Gordon, i’ve to clarify one important detail: It’s NOT a Flash Player emulator, it’s a SWF interpreter!

別にFlash Player エミュレータを作った訳じゃないよってことかな。

Bookmark and Share

Gordon, iPhoneでFlashを再生する魔法のJavascriptライブラリ

Flash Javascript iPhone

つ、ついにiPhone SafariでFlashが再生されました。

ajaxian.com
http://ajaxian.com/archives/gordon-flash-runtime-implemented-in-javascript

github
http://github.com/tobeytailor/gordon

Twitter
http://twitter.com/tobeytailor

githubのダウンロードファイルにサンプルファイルが添付されています。
tobeytailorさんのGordonライブラリはJavascriptです。
iPhone Safari の HTML 5機能を使っているようです。
swfを解析してSVG分解してるのかなぁー。
Actionscriptも使えるようです。

Button Demo
http://jancona.com/gordon/demos/buttons.html

ajaxian.comにはオンラインファイルへのリンクがあります。

See Gordon in action (demos hosted by Paul Irish).

確かに、iPhone Safari でFlashが再生されています。

残念ながらFlashファイルの作成方法がよくわかりません。
Actionscript 2 でないといけないらしいのは@tobeytailorさんのTLにでています。
サンプルファイルのswfサイズがFlashで作成できる上限サイズ2880pxなのはどういうこと・・・

これからボチボチ試していこう。。。

update 2010-01-14 19:50
Demo の blue.swf は 2834 x 2805, 30fps
こうやって作らないといけないのかなぁー

update 2010-01-14 21:04
gordonライブラリ作者の@tobeytailorさんのTwiiterによれば・・・

@all Gordon will not aim to be Flash for the iPhone…well, not yet.

だそうです。

gordonライブラリはswfを解析しHTML 5 のSVGにしてしまおうとしてるようです。
そのためにswfの作成には、それようの作り方How toがあるのだと思います。

update 2010-01-15 10:12
いくつか分かりました。
Flash Player 1をターゲットに作成する。
サイズはマックスサイズで作成する。

WebKit系で再生できるファイルができました。
iPhone で Flash(swf)再生

update 2010-01-15 10:29
iPhoneで再生できるけどなぁー。
なんか微妙。
これはFlashを再生してるとは言えないよね。
FlashでHTML 5+SVGのアニメーションが作成できました。としか言えない気がする。
@tobeytailorさんのチャレンジはすばらしいと思いますが、やっぱり無理がある。。

Appleが素直にFlash Playerを実装してくれたら良いのですが、Appストアの兼合いで「イイヨ」ってなかなか言えないのでしょう。
これは政治の話になるんだよね、残念。

続きgordon, runtime written in pure JavaScript 続報

Bookmark and Share

shadowbox.js, Flash Player バージョンを指定できる?

Javascript

shadowbox.js がとっても便利、swf と flv の再生時に Flash Player のバージョン指定が可能か調べてみた。

flv

swfobject.js を使って player.swf を読み込んで表示している。
ただ swfobject.js のパラメタの version は「9.0.0」にハードコードされている。
expressInstall.swf はインクルードされていないのとコードではブランク設定されているのでシームレスインストールは使えない。
shadowbox-flv.js

73
74
version = '9.0.0',
express = '',

swf

まだ良くわからないけど、
object タグを直接書いているような・・・
swfobject を使っている形跡が見つけられない。
だったらバージョン指定は無理てことかな?

Player バージョン指定が必要な時は回避策を考えなくては・・・

update
swf の時もswfobject.jsをインクルードしている。

Bookmark and Share

JavascriptでBox2D

Javascript

Physics engine の Box2D を Javascript にコンバートしたライブラリが公開されている。
作者は ANDO Yasushi さん。

sourceforge でデモが見られる。
Box2DJS – Physics Engine for JavaScript
Box2DFlashをもとにコンバートしたらしい・・・

DEMOの部分だけ抜き出してみた。
左クリック:丸や四角が生成され落ちてくる
右クリック:次のでも画面へ移動

Box2D js

さて、できることは分かった。
どう使うかが問題だ。

Bookmark and Share

Google, AJAX Libraries APIにSWFObject登場

Flash Javascript News

GoogleのAJAX Libraries APIでは有名どころのAJXAライブラリを提供するAPIを公開している。
AJAX Libraries API Developer’s Guide

例えばjQueryが必要な時は

<script src="http://www.google.com/jsapi"></script>
と jsapi を読み込み <script>タグ内で

  // Load jQuery
  google.load("jquery", "1.2.3");

とするとGoogleのサイトからjQueryを入手できる。

今までのPrototype, jQuery, jQuery UI, script.aculo.us, MooTools, Dojoに加えて
SWFObjectとYahoo! User Interface Library (YUI)が追加された。

Google経由にするとサイトにアップロードする手間が省ける、のかな。

Bookmark and Share

Wordpress, ShadowBox JSプラグインでFlash(swf)再生

Flash Javascript

shadowbox swf

shadowbox swf

Wordpressのイケテル プラグインShadowbox JSを使ってFlash再生。

Shadowbox JSは良くできたプラグインで画像の時は勝手に処理をしてくれる。
Space Invaders again なつかしゲームで遊んでみた


<a title="some title" rel="shadowbox;width=N;height=N" href="path to swf"></a>

title
入れるとコンテンツ上部に表示。

rel
shadowbox;width=swf width(px);height=swf height(px)

href
swfまでのパス

後は勝手にShadowBox JSが処理してくれる。

プラグインShadowBox JSはShadowbox.jsを使用している。
Shadowbox.js by Michael J. I. Jackson

update 2009-06-25
Wordpress Plugin, Shadowbox JSアップグレードする時の注意点をポストしました。
Wordpress Plugin, Shadowbox-JS を 3.0 へアップグレードする

Bookmark and Share

Actionscript 3, ColorMatrix ColorMatrixFilterを調べてみた

Actionscript3 Javascript

AS3でのColorMatrixFilter, ColorMatrix、Flash特有の機能ではなくグラフィックに関する基本的要件のひとつらしい。

Mario KlingemannさんのColorMatrix ver.2.1をながめているとapplyColorDeficiencyメソッドのクレジットに
the values of this method are copied from http://www.nofunc.com/Color_Matrix_Library/
とある。

クレジット記載のサイトNomadic FunctionsではJavascriptで作られたColorMatrix,Color Pickerライブラリのデモとソースが公開されている。
Nomadic FunctionsではAS2 Flash8版のMario KlingemannさんのColorMatrixクラスにインスパイアされてこのライブラリを作った、だって。

Mario Klingemann->Nomadic Functions->Mario Klingemann

と、できる人はお互いに触発されてるんだなぁ。

ColorMatrixへapplyColorDeficiencyが2008-04に追加されver.2.1にアップデートされている。
Nomadic FunctionsのColor Blindnessが移植されている。

“Color Blindness”,聞き慣れない言葉で直訳すると「色覚異常」とでもなるのかもしれない?
色彩にハンディキャップのある人たちがどう見えているかをシュミュレートするグラフィック用語として使われているらしい。
Normal
Protanopia
Protanomaly
Deuteranopia
Deuteranomaly
Tritanopia
Tritanomaly
Achromatopsia
Achromatomaly
などの設定があり
'Achromatopsia':[0.299,0.587,0.114,0,0, 0.299,0.587,0.114,0,0, 0.299,0.587,0.114,0,0, 0,0,0,1,0, 0,0,0,0,1]は色彩が無いグレースケールになる。
Color Blindnessでデモが見られる。

またこの設定値をPhotoshopのチャンネルミキサーに設定できるから試してごらんて書いてあったので、やってみた。
チャンネルミキサーには整数しか入力できなかったが結果はデモ通りだった。

Photoshopチャンネルミキサ

Photoshop チャンネルミキサー

チャンネルミキサーなんて使うのは初めてだった。どういう時につかうのだろう。
他にも使ったことのないメニューはいっぱいあるけど・・・
Photoshopのプリセットから画像効果をかけられるはず、どんな時に使う???

Nomadic FunctionsのColor Pickerを見るとRGBとHSVの関係がよくわかる。
ColorMatrixFilterで色を変えることもできるんだとあらためて実感。

有用な情報を提供してくれている両氏に感謝。

情報と情報がリンクしているのが見えてきて、ぼんやりとでもわかってくるとちょっと楽しくなる。

Bookmark and Share
WP Theme & Icons by N.Design Studio
RSS