Home > 2008年03月 Archives

« 2008年02月 | 2008年04月 »

2008年03月 Archives

2008年03月04日

第4回 東京てら子で Progression 講座受けてきたよ。 [ ActionScript 3.0 ] 

3/1(土)の 第4回 東京てら子 で Progression の講座を受けてきました。

ver 2.0.1 の mxp はここからダウンロードできます。正式リリース(今週の金くらい?)の直前バージョンです。
http://progression.libspark.org/trac/browser/tags/2.x.x/2.0.1


Progression の初めの一歩

ダウンロードした Progression2.mxp ファイルをダブルクリックするとインストールできます。Adobe Extension Manager があった方がいいのかも。

インストールすると、メニューの 「 ウィンドウ 」 > 「 その他のパネル 」 のところに 「 Progression Framework 」 ってのが出てきます。↓

progression


メニューをクリックすると、↓のようなパネルが出てきます。

progression

↑ 名前を決めて、種類を選びます。「 クラス 」 は AS でゴリゴリ書いていくモードです。「 EasyCastingXML 」 は、「 Adobe - デベロッパーセンター : Progression Framework 2 初級編:ActionScriptを書かずにFlashサイトを簡単に構築する 」 が参考になるかと思います。「 標準XML 」 と 「 タイムライン 」 はまだよく分かってません。


↓幅と高さは stage の wifth と height です。「 100% 」 のチェックボックスにチェックを入れると、生成される HTML 内の CSS で div要素の width と height として設定されます。「 中央に表示する 」 も CSS で flash 領域を画面中央に指定してくれます。

progression


設定したら、「 作成する 」 をクリック。
すると、勝手に関連するファイルを自動生成してくれます。
↓こんな感じ。

progression

deploy フォルダの中には他にもファイルが生成されていて、swfmacmousewheel.js、swfaddress.js、swfobject.js の3つは標準装備されていて、それも簡単に設定可能。src フォルダ内 のclasses の中には Tweener も入ってるという至れり尽くせり仕様w
すごーい! nium さんグッジョブ!!!w
いや、グッジョブどころではないよ、コレは@


てら子でもらったサンプルを元にページを作ってみる。

上で紹介したパネルで設定しようと思ってもできなかったこと。
・ width も height も 100% 設定で、 StageScaleMode.NO_SCALE にしてセンタリングする。

要するにやりたいことは、こういうこと です。ブラウザ内いっぱいに flash 領域を広げたいのだけれど、ScaleMode.NO_SCALE でいくとコンテンツ(ステージ)が左上に行っちゃうんですよね。センタリングしようと思ったら、resize イベントを取らないといけない。

さすがにそれは自分でやらなきゃってな話でしたw

というわけで progression のコードを色々見てたのですが、IndexScene.as 内に 「 progression 」 を発見。これは IndexScene が継承している SceneObject のプロパティで、Index.as で new Progression() した時にセットされる模様。

// Progression.as
542 // root を設定する
543 _root.progression_internal::progression = this; // (this is Progression)==true


で、この Progression オブジェクトは stage の参照を持っている ( Progression.stage ) ので、

// IndexScene.as
_page = new IndexPage(progression.stage);

とでもして、IndexPage に stage の参照を渡し、

//IndexPage.as
private var _stage:Stage;

public function IndexPage(stage:Stage) {
_stage = stage;
positioning(0);
_stage.addEventListener(Event.RESIZE, positioning);
}

private function positioning(e:Object):void {
x = (_stage.stageWidth - width) / 2;
y = (_stage.stageHeight - height) / 2-20;
}

という感じで、ようやくステージリサイズに対応。。

走り書きな感じのメモ。詳しく説明できたら、次回以降のエントリーにでも。
もっといいやり方があるやも?


てら子のサンプルファイル

Progression 作者の taka:nium さんの blog の この記事 から てら子のサンプルをダウンロードできますよ。

2008年03月08日

AS3.0 : Progression Framework 2.0.3 を使って Flash サイトを構築する。 [ ActionScript 3.0 ] 

正式リリースお疲れ様です!> taka:niumさん
Progression Framework 2.0.1 りるぃーすぅー!!

気合の入りっぷりが ここ とか、ここら辺 からひしひしと伝わってきますよね。インストールとかは チュートリアル を見ていただくと超詳しく解説されてますのでそちらをどぞー。

めっちゃくちゃ簡単に このようなサイト ( の構造 ) が作れてしまいますよ、それが Progression!


SceneObject とか、CastSprite のイベント

リファレンスの SceneObjectCastSprite にどんなイベントがあるのかが載ってますが、イベントの起こる順番とかが最初はよく分からないですよね。
Load と Init 、Unload と Goto 、といった具合に。。
そこで、全部のイベントにTrace文を書いてイベントの遷移を調べてみました。( Progression.verboseを使わないのは敢えてw )

シーン構成は↓こんな感じ。

/Index
/Index/Categories
/Index/Categories/AS3
/Index/Categories/AS3/PV3D
/Index/Links


まず、最初の画面からスタートします。

//Index シーンで 下にある Navigation の 「 Categories 」 ボタンを押す
@IndexScene : onGoto
@IndexScene : onSceneStateChange
@CategoriesScene : onSceneStateChange
@AS3Scene : onSceneStateChange
@Pv3dScene : onSceneStateChange
@LinksScene : onSceneStateChange
@CategoriesScene : onLoad
■CategoriesPage : onCastAdded
@CategoriesScene : onSceneStateChange
@CategoriesScene : onInit

「 Categories 」 ボタンを押すと、シーンの移動が始まります。
@ の行は SceneObject のイベント、■の行は CastSprite のイベントです。
IndexScene から離れるわけですから、goto イベントが出るわけですね。
その後の SceneStateChange ですが、IndexScene から出るのは分かりますが、その他の Scene でも出ていますね。。?
んで、CategoriesScene の load イベントがあって、_onload() 内で、CategoriesPageの表示処理をしてるので、CategoriesPage の CastAdded イベントがあり、CategoriesScene の中身が生成される。
Scene に到着すると、init イベントが出る、と。 以下、リファレンス より。

goto : シーンオブジェクトが出発地だった場合に、移動を開始した瞬間に送出されます。
init : シーンオブジェクトが目的地だった場合に、到達した瞬間に送出されます。
load : シーン移動時に目的地がシーンオブジェクト自身もしくは子階層だった場合に、階層が変更された瞬間に送出されます。
sceneStateChange : シーンオブジェクトの状態が変更された場合に送出されます。

init と load の違いがミソですな。 load が先で、 init が後。


Scene の中身を表示するタイミング。 load と init イベントの違い

では、続けてシーンを移動していきます。

//Categories シーンで 「 AS3 」 ボタンを押す
@CategoriesScene : onGoto
@CategoriesScene : onSceneStateChange
@AS3Scene : onSceneStateChange
@Pv3d2Scene : onSceneStateChange
@LinksScene : onSceneStateChange
@AS3Scene : onLoad
@AS3Scene : onSceneStateChange
@AS3Scene : onInit
■AS3Page : onCastAdded

「 Categories 」 ボタンを押した時と同じ流れですね。
ただ、AS3Page が init イベントの後に来てるのは、new AS3Page() をするのに _onload() ではなく、_onInit() を使ったからです。_onload() と _onInit() 、どちらを使ってもページ遷移は同じに見えます。

// 「 PV3D 」 ボタンを押す
@AS3Scene : onGoto
@CategoriesScene : onSceneStateChange
@AS3Scene : onSceneStateChange
@Pv3d2Scene : onSceneStateChange
@LinksScene : onSceneStateChange
@Pv3dScene : onLoad
■Pv3dPage : onCastAdded
@Pv3d2Scene : onSceneStateChange
@Pv3d2Scene : onInit

この流れは 「 Categories 」 ボタンを押した時と全く同じです。
実際に表示されているページ遷移も同じですね。
さて、load と init 、何か違いは無いのか~?って思ってたのですが、ありました。

今度はトップページから、PV3D シーンに一気に下りてみます。

// IndexPage にある、「 PV3D 」 ボタンを押す
@CategoriesScene : onSceneStateChange
@AS3Scene : onSceneStateChange
@Pv3d2Scene : onSceneStateChange
@LinksScene : onSceneStateChange
@CategoriesScene : onLoad
■CategoriesPage : onCastAdded
@CategoriesScene : onDescend
@CategoriesScene : onSceneStateChange
@AS3Scene : onSceneStateChange
@Pv3d2Scene : onSceneStateChange
@LinksScene : onSceneStateChange
@AS3Scene : onLoad
@AS3Scene : onDescend
@CategoriesScene : onSceneStateChange
@AS3Scene : onSceneStateChange
@Pv3d2Scene : onSceneStateChange
@LinksScene : onSceneStateChange
@Pv3d2Scene : onLoad
■Pv3d : onCastAdded
@Pv3d2Scene : onInit

なるほどねー。一気に階層を降りていくときは、途中の AS3Scene で init イベントが出てない。
確かに、init イベントは そのシーンに到着したときに発生するイベントだから、素通りするときは init イベントは発生しないんですねぇ!
さっき上で書きましたが、AS3Scene の内容を表示する処理は _oninit() に書いていたのでした。
なので、IndexScene にある PV3Dボタンを押した時のシーン遷移では、AS3Scene の内容が表示されなかったわけですね。


よく分からない><

_onSceneStateChange() の使いどころ。。 イベントの発生条件?


その他の Progression 情報 & Blog

Progression フォーラム
emzah Blog : 東京てら子+Progression
studio-hedgehog blog : 第4回 東京てら子 その1 その2
trick7.com blog : Progression Framework 2.0.2 リリース

2008年03月15日

Flex3 SDK で AIR ブラウザを作ってみた。 [ AIR ] 

参考にした記事は↓こちらです。ベータ版の時の記事ですが。
【連載】今からはじめるAIRプログラミング (9) HTMLレンダリング用API(1) - Webページの表示とイベントの捕捉|エンタープライズ|マイコミジャーナル


AS3 と mxml を書く

mxml を使うと↓のような感じになります。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="800" height="450">
<mx:Script>
<![CDATA[
import flash.events.Event;
private const DEFAULT_HOME:String = "http://www.google.co.jp";
// アプリケーションの初期化
private function init():void {
// テキストフィールドにホームページのアドレスをセット
locationInput.text = DEFAULT_HOME;
changeLocation();
htmlPage.addEventListener(Event.LOCATION_CHANGE, onLocationChange);
}
// HTML コンポーネントのロケーションが変化した際呼び出される
private function onLocationChange(e:Event):void {
// テキストフィールドに表示されたURLを変更
locationInput.text = htmlPage.location;
}
// ページの移動を行うメソッド
private function changeLocation():void {
htmlPage.location = locationInput.text;
}
]]>
</mx:Script>
<mx:Style>
WindowedApplication {
background-color:"0x999999";
background-alpha:"0.5";
}
</mx:Style>
<mx:VBox x="10" y="10" height="100%" width="100%">
<mx:HBox height="25" width="100%">
<mx:TextInput id="locationInput" width="100%"/>
<mx:Button label="Go" click="changeLocation()" />
</mx:HBox>
<mx:HTML id="htmlPage" width="100%" height="100%" />
</mx:VBox>
</mx:WindowedApplication>

AS3 は基本的な書き方は Flash CS3 と全く一緒ですね。ただ、Event.LOCATION_CHANGE は Flash にはありません。後、注意すべきは、WindowedApplication 内の creationComplete で初期化メソッドを呼び出すことくらいでしょうか。


AS3 のみでやってみる。

AS3 のみで書いていくこともできますが、コンポーネントではないので、スクロールバーとか自分で実装していかないといけないんですね。そういうのを一切省いたら、とりあえず↓だけでウェブページを読み込んで表示させられます。

package {	
import flash.html.HTMLLoader;
import flash.net.URLRequest;
import flash.display.*;
public class browserAs extends Sprite {
private var html:HTMLLoader;
private var url:String;
public function browserAs() {
stage.scaleMode = StageScaleMode.NO_SCALE;
html = new HTMLLoader();
html.width = 800;
html.height = 450;
html.load(new URLRequest("http://www.google.co.jp/"));
addChild(html);
}
}
}

AS3 で気をつけたいのは、HTMLLoader のデフォルトサイズが 0 x 0 px であること。

HTMLLoader クラスの詳しい説明は↓のリファレンスをどうぞ。
http://livedocs.adobe.com/flex/3_jp/langref/index.html?flash/html/HTMLLoader.html&flash/html/class-list.html

html 内での日本語入力ができないみたいですね。日本語入力を可能にする方法があるのでしょうかね。。

2008年03月17日

Flex3 で AIR ブラウザ : その2 リンク先をサムネイル表示 [ AIR ] 

Flex の HTML コンポーネントってこういうことだったのですね。
http://livedocs.adobe.com/flex/3_jp/langref/index.html?mx/controls/HTML.html&mx/controls/class-list.html

プロパティに htmlLoader がある。なるほど。

前回の例で言うと、htmlPage が HTML コンポーネント(コントロール)のインスタンスであって、

htmlPage.htmlLoader.addEventListener(Event.COMPLETE, onHtmlLoadComplete);

とでもすれば、html をロードし終わった後に何かしらの操作を行えるわけです。

それと、htmlLoader は window プロパティを持っていて、それ経由で DOM にアクセスできたりもする、と。

例えば、

var doc:Object = htmlPage.htmlLoader.window.document;

とやれば、document も取れてしまう。

つまり、
doc.links
doc.forms
doc.styleSheets
とかで、html 内の要素にアクセス可能。これはおもしろい。

前回はできなかったけど、サムネイルの表示もこれでできそうだからやってみました。


ソースコード

先ずはソースコードを。前回のエントリーと同じく、↓こちらの記事を参考にしました。
【連載】今からはじめるAIRプログラミング (9) HTMLレンダリング用API(1) - Webページの表示とイベントの捕捉|エンタープライズ|マイコミジャーナル

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
<mx:Script>
<![CDATA[

import flash.net.URLRequest;
import flash.html.HTMLLoader;

private const DEFAULT_HOME:String = "http://www.google.com";

// サムネイルに表示するページの幅と高さ
private const THUMBNAIL_WIDTH:uint = 1024;
private const THUMBNAIL_HEIGHT:uint = 800;

// アプリケーションの初期化
private function init():void {
// nativeWindow の位置調整
var initialBounds:Rectangle = new Rectangle((Screen.mainScreen.bounds.width / 2 - 500), (Screen.mainScreen.bounds.height / 2 - 400), 1000, 800);
this.nativeWindow.bounds = initialBounds;
// HTMLコントロールにリスナを登録
htmlPage.addEventListener(Event.LOCATION_CHANGE, onLocationChange);
htmlPage.htmlLoader.addEventListener(Event.COMPLETE, onHTMLComplete);

// テキストフィールドにホームページのアドレスをセット
locationInput.text = DEFAULT_HOME;
changeLocation();
}

// HTMLControlのロケーションが変化した際呼び出される
private function onLocationChange(event:Event):void {
// テキストフィールドに表示されたURLを変更
locationInput.text = htmlPage.location;
}

// ページの移動を行うメソッド
private function changeLocation():void {
htmlPage.location = locationInput.text;
}

// ページ内で、一度表示したサムネイルのキャッシュ
private var thumbnailCache:Object;

// WEBページの読み込みが完了した際呼び出される
private function onHTMLComplete(event:Event):void {
thumbnailCache = {};
// ページ内のリンクを全て取得
var links:Object = htmlPage.htmlLoader.window.document.links;
for (var i:uint = 0; i < links.length; i++) {
// リンクにイベントハンドラを登録
links[i].addEventListener("mouseover", thumbnailLoadFunc);
links[i].addEventListener("mouseout", thumbnailHideFunc);
links[i].addEventListener("click", thumbnailHideFunc);
}
}

// サムネイルを非表示にする
private function thumbnailHideFunc(mouseEvent:Object):void { var html:HTMLLoader = thumbnailCache[mouseEvent.target.href];
if (!html) {
return;
}
htmlPage.removeChild(html);
}

// サムネイルをロードし、表示する
private function thumbnailLoadFunc(mouseEvent:Object):void {
var href:String = mouseEvent.target.href;
// URLをキーとしてキャッシュされているサムネイルを取得
var html:HTMLLoader = thumbnailCache[href];
// キャッシュに存在しない場合は、新たにロード
if (!html) {
html = new HTMLLoader();
html.load(new URLRequest(href));
// Webページを縮小して表示
html.scaleX = .3;
html.scaleY = .3;
html.width = THUMBNAIL_WIDTH;
html.height = THUMBNAIL_HEIGHT;
thumbnailCache[href] = html;
}
html.x = mouseEvent.x;
html.y = mouseEvent.y;
htmlPage.addChild(html);
}
]]>
</mx:Script>
<mx:VBox x="10" y="10" height="100%" width="100%">
<mx:HBox height="20" width="100%">
<mx:TextInput id="locationInput" width="100%"/>
<mx:Button label="Go"/>
</mx:HBox>
<mx:HTML id="htmlPage" width="100%" height="100%" />
</mx:VBox>
</mx:WindowedApplication>

ベータの時と違いが分かるように、書き直した部分の箇所を全部ではないですが強調してみました。HTMLControl や、JavaScriptObject というクラスが無くなっています。でも、基本的な構造は大きく変わっていないみたいですね。

それから、Link オブジェクトに addEventListener で 引っ掛けてる関数は AS なわけですが、受け取る Event オブジェクトは DOM のだったりしてますね。AS と JS がごちゃ混ぜになってるのが、面白いです



サンプル AIR ファイル

今回はサンプルをアップロードしてみましたんで、興味のある方はインストールしてみてください。 Windows だとデフォルトで C:\Program Files\ictriumphs にインストールされます。削除する時は、コントロールパネルのプログラムの追加と削除から。「 browser3 」 という名前になってます。あと、アンインストール後のフォルダだけが自動で消えないので手動よろしくお願いします。
AIR Browser

AIR Browser

↑左上のメニューの Maps にマウスオーバーさせると、こんな感じですね。サムネイル表示させてるのも HTMLLoader オブジェクトだから、小さいながらもリンクをクリックできるという。
あ、Runtime をインストールしてない方は、まずそちらを先にインストールしてくださいませ。
http://get.adobe.com/air/

2008年03月22日

YouTube の chromeless player を使ってみる。 [ YouTube ] 

chromeless player というのは、↓のように、chrome ( 操作部分 ) が表示されない player です。
動画の下の 「 ビデオを読み込んで再生する。 」 というリンクをクリックすると再生が始まります。ビデオの読み込み、再生を javascript で制御できたりするのが面白いですよね。
*OPERA でご覧になっている方は、動画の下にが表示されていないかもしれません(理由はよく分かりませんが)。 その場合は、リロードすると表示されると思います。


You need Flash player 8+ and JavaScript enabled to view this video.




← そしてこれを貼っといてやー、と Attribution に書いてある。。


chromeless player を使うには

まずは dashboad で登録して、developer Key を入手します。

youtubeAPI

↑Company Name を聞かれてますが、サイト名とか、適当でよいかと。サイトURL、住所などを入力し(後で編集可)、最後に 「 I agree to the Terms of Service above. 」 にチェックを入れて、「 Register 」 をクリック↓。

youtubeAPI


↓次に 「 Register new product 」 をクリック。

youtubeAPI

↓ここも、それなりに入力して、 「 Register Product 」 をクリック。

youtubeAPI


↓これで Developer Key を取得できました。Client ID については、詳しくは Using a developer key and client ID を見てください。YouTubeAPI を使ったウェブアプリを作る時に必要だとか。 Chromeless Player を使うのには要らないです。

youtubeAPI



JavaScript の テンプレート

Embedding the YouTube player using SWFObject にも JavaScript の例が載ってますが、これは Chrome 有りの場合です。Chromeless にしたい場合は、上記の Developer Key を取得してから、↓のように記述します。

<script type="text/javascript" src="swfobject.js"></script>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>

<script type="text/javascript">
var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
// swfobject によって書き出される、object タグの id 属性の値
var atts = { id: "myytplayer" };
var devKey ="ここに Developer Key";
var videoId="ここに VideoId";
swfobject.embedSWF("http://gdata.youtube.com/apiplayer?key="+devKey+"&enablejsapi=1&playerapiid=myytplayer","ytapiplayer", "425", "356", "8", null, null, params, atts);
// player がダウンロードされて、準備ができた時に呼び出される関数
function onYouTubePlayerReady(playerId) {
// player の参照を取得
ytplayer = document.getElementById(playerId);
ytplayer.loadVideoById(videoId,0);
}
</script>

swfobject は v2.0 です。
第1引数で、player のURL を指定してますが、"enablejsapi=1" を入れないと JavaScript API が使えるようになりません。

"playerapiid" は option ですが、ここで id を指定しておくと、後述の onYouTubePlayerReady イベントが発生した時に引数として id を受け取ることができます。上の例では id が myytplayer となっていますが、これは swfobject.embedSWF メソッドの第9引数の attr で指定した id で、swfobject によって書き出される object タグの id 属性となります。

あと、ポイントは onYouTubePlayerReady イベントですね。
これは player がロードされて、API の呼び出し準備が整ったときに起きるイベントで、定義しておけば勝手に呼び出されます。object タグの id 属性 ( この場合は "myytplayer" ) が分かっていれば、player の 参照を取得することができます。


リファレンス & ドキュメント & サンプル

JavaScript Player API リファレンス。
YouTube JavaScript Player API Reference

JavaScript API サンプルページ。
YouTube Javascript API Example page

swfobject のドキュメント
SWFObject v2.0 documentation for JavaScript developers

Chromeless Player のリファレンスはこちら。
YouTube Chromeless Player Reference

Chromeless Player のサンプルページ。 ビデオを最後まで見ると Steve が。。。!w
Chromeless Player Example Page

Google Friend Connect

What's New!?

最近のコメント

Ko:ki on 東京ライフハック研究会vol.1 に参加してきました!: neti2さん、昨日
neti2 on 東京ライフハック研究会vol.1 に参加してきました!: neti2です。 昨
ひまわりマミー。 on ご献本いただきました > 『100円ノートで「超」メモ術』: 初めまして!読書記事
Ko:ki on Flash CS3 と amfphp 1.9 beta2 で Flash Remoting + クラスマッピング: flasher の方
やばい on Flash CS3 と amfphp 1.9 beta2 で Flash Remoting + クラスマッピング: やばいくらい参考にな
超メモ術著者 on ご献本いただきました > 『100円ノートで「超」メモ術』: 100円ノート「超」
Ko:ki on 携帯を新しくしました、が。: かんちゃ~ん!!お久
かんちゃん on 携帯を新しくしました、が。: ありゃりゃ〜!だね┐
Ko:ki on AS2.0 で Papervision3D を使ってみた。: >ひょっとしたら編集
Ko:ki on AS2.0 で Papervision3D を使ってみた。: > もしかしたらCS
akii on AS2.0 で Papervision3D を使ってみた。: 今日も作業をしていて
akii on AS2.0 で Papervision3D を使ってみた。: ありがとうございます
Ko:ki on AS2.0 で Papervision3D を使ってみた。: akii さん始めま
akii on AS2.0 で Papervision3D を使ってみた。: 初めまして、突然です
Ko:ki on JavaScript から ActionScript 3.0 を呼び出すって話。: うれしさがすごく伝わ
あきら on JavaScript から ActionScript 3.0 を呼び出すって話。: いやあ、助かりました
ゆぼ on Google Co-op ( カスタム・サーチ・エンジン ) の設置方法・その1: Ko:ki さん
Ko:ki on Google Co-op ( カスタム・サーチ・エンジン ) の設置方法・その1: ゆぼさん、始めまして

bookmarkedEntries

タグ