2013年5月20日月曜日

【スクリプト】ライブラリのMCを配置する

今回はFlashのライブラリにあるムービークリップ(以下MC)をスクリプトを用いて配置していきます。

LWF_Publish.jsflを使用すると、全てのMCにASリンケージ名が設定されます。
そのリンケージ名を使用します。
下記の図にあるMC名tori_mcを配置してみます。


その場合、下記のように記述します



<配置先MC>.attachMovie(<リンケージ名>,<配置MCのインスタンス名>,<option>);
という記述をします。
<option>はあってもなくても構いません。
また、返り値として配置されたMCが返ってくるので配置後、下記のように扱うこともできます。




第３引数のoptionには下記の設定を行うことができます
    ・load:MCが配置された時点で実行
    ・postLoad:MCの描画準備が終わった時点で実行
    ・enterFrame:毎フレーム処理
    ・render:描画された時に実行
   　等







下記は今回の配置を利用したサンプルになります。

上記を見ていただくとwebkitcss版とcanvas版,webgl版には違いがあることがわかると思います。
canvas版とwebgl版では加算合成になっていると思います。



次回は、上記の加算合成の方法やマスクといった部分に触れていきたいと思います。
投稿者 時刻: 0 件のコメント:
ラベル: ,

2013年5月12日日曜日

【スクリプト】ボタンを使おう


前回から今回までの間にLWFSが最新版が公開されています。

自分のOSに合った最新版を選んでください。
https://code.google.com/p/lwfs/downloads/list


(今回使用したLWFS:LWFS-win-20130508-1233.zip)

今回はボタンを扱う方法になります。
LWFでボタンを使う場合はFlashのボタンインスタンスを利用します。





ボタンインスタンスにはヒット領域以外設定することができません。
かつ、ヒット領域は矩形のみ使用することができます。なお、ヒット領域の設定は
シェイプでも設定出来ます。





そうするとこのようなヒット領域のみのボタンインスタンスが出来上がります。
※ボタンインスタンスはパブリッシュすると見えなくなるので、何か別のインスタンスの上にかぶせる形で利用してください




このボタンにスクリプトを適用していくことになりますが、主に下記の２つの方法があります

・ボタンに直にスクリプトを記述する
・ボタンにインスタンス名をつけてフレームスクリプト側で制御する

【ボタンに直にスクリプトを記述する】
ボタンにスクリプトを直接書き込んでいくAS1ライクな方法です。
ボタンインスタンスに下記のスクリプトを記述するとボタンを押した時にalertが発生します。


【ボタンにインスタンス名をつけてフレームスクリプト側で制御する】
ボタンにイベントリスナーを設定するAS3ライクな方法です。
ボタンに"button"というインスタンス名をつけて、フレームスクリプトで設定を行います



"press"となっている部分はそれぞれ下記の設定を行うことができます

・"press" : 押した時に実行
・"release" : 離した時に実行
・"rollOver : 領域内に入った時に実行
・"rollOut" : 領域外に出た時に実行



下記はボタンを利用したLWFサンプルです。attachボタンを押すと、ムービークリップがどんどん増えていきます。


ソースはこちらになります



次回はスクリプトによる動的なムービークリップの生成に触れていきたいと思います。


投稿者 時刻: 0 件のコメント:
ラベル: ,

2013年5月8日水曜日

LWFのスクリプト

今回はスクリプトでタイムラインの制御をやってみたいと思います。

ですが、まずLWF for HTML5での基本的なスクリプトの記述について触れたいと思います。

基本的にスクリプトはフレームに記述していきます。
また、actionScriptではなくjavaScriptで記述します。



上記の画像のように

/* js

*/

と記述し、その間にjavascriptを記述していきます。
また、ムービークリップの1フレーム目の記述に限り、下記の記述を行うことができます。

/* js_load    （MCが生成された時点で1回だけ実行)
/*js_postLoad    (MCの再生準備が整った時に1回だけ実行)

ですが、ひとまず上記は置いておきます。後に詳しく触れたいと思います。




では、本題に入ります。
前回作った鳥が跳ねるムービークリップを改造したいと思います。
下記のような感じにして1フレーム目と最後のフレームにスクリプトの記述を行いました。


1フレーム目には下記のように記述しています


上記のスクリプトでまず、ラベル名[start]のフレームにジャンプしています。このように
ラベル名を指定してgotoAndPlay(),gotoAndStop()を行うことができます。
もちろんフレーム数でも指定することができます。Flashと同じく最初は1フレームから始まります。

スクリプト中のthisはムービークリップ自身を指しています。
ムービークリップ(LWF上ではMovieクラス)はこの他にも様々なメソッドがあります。

また、最後のフレームも上記と同じような記述になっておりアニメーションをループしています。




他にもplay()やstop()などで再生、停止を行ったりすることもできます。
サンプルLWFを下記の場所に置いてみましたのでご参考にどうぞ

http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part1/index-webkitcss.html
http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part1/index-canvas.html
http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part1/index-webgl.html

元のflaファイルはこちらになります。

http://lwfs.tamagokobo.com/source/part1/part1.fla

上記のLWFを見ていただければわかると思いますがボタンが使用されていると思います。
次回は、このボタンについて詳しく触れていきたいと思います。








投稿者 時刻: 0 件のコメント:
ラベル: ,

2013年5月6日月曜日

実機で確認してみよう

作業を始める前に・・・
前回から今回までの間にLWFSが最新版になっているのでDLしておきましょう。
(前回までLWFS-win-20130328-1500を使っていました)

自分のOSに合った最新版を選んでください。
https://code.google.com/p/lwfs/downloads/list


追加された機能などについては後々触れていきたいと思います。




では、先ほどLWFSで作ったものをAndroidやiPhoneといった端末で実機確認をしてみましょう。
LWFSで作品を見た時に右上にQRコードが出ていたと思いますが、このままでは見ることが
できません。
（※ローカルで仮想環境を作っているので他の端末からはアクセスできないため)

なので、LWFSで生成されたファイルを他の端末からでも閲覧可能な環境にアップする必要
があります。

生成されたファイルはデスクトップの「LWFS_work_output」フォルダに格納されています。
自分でアップロードできる環境がある方は、このフォルダの中身をアップロードしてみましょう。
LWFS_work_output/html5/list/[作成されたフォルダ名]/にcss,canvas,webglそれぞれの描画用ページがあります。

アップロード環境がない。または面倒だ。という方のために前回作ったLWFを
下記の場所にアップロードしました。

http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/test/index-canvas.html
http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/test/index-webkitcss.html
http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/test/index-webgl.html

各ページの右上にQRコードがあると思います。
これを端末で読み込んでアクセスすると、各描画に対応していれば再生が始まります。
生成されたHTMLに既にスマートフォンで閲覧する際に最適な設定がされているため
スマートフォン確認用のHTMLなどをいちいち用意する必要がありません。
このようにアップロードする手間はありますが、比較的気軽に制作したLWFを実機で
確認することができます。



また、LWFSの閲覧ページにはいくつかの機能があります。
下記のページでは以下のキーでLWFの再生設定を行うことができます


SPACE:リスタート
S:停止、再開
F:コマ送り(Sで停止した場合のみ)
UP/DOWN:フレームレートの変更
D:ステージサイズの変更
ESC:停止(再開不可)

上記の設定を反映した状態で実機確認したい場合は設定を行った後で
ページ上部の(open with current settings)を開いてください。
その設定が反映された状態のページが新しく開きます。そのページのQRコードを読み込むと
その設定が反映された状態で実機確認を行うことができます。
下記のリンクは先ほどのLWFの再生設定を変更したページになります。

http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/test/index-canvas.html?fr=10&fs=1&ds=0.5

フレームレートが落ちて、ステージサイズも半分になっており低スペックの端末でも
先程のものより比較的スムーズに再生されると思います。
このように色々と設定を変えて再生を行うこともできます。



次回はスクリプトを用いて簡単な再生の制御等を行なってみたいと思います。









投稿者 時刻: 0 件のコメント:
ラベル: ,

2013年4月18日木曜日

動かしてみよう

まずは解答したLWFSのフォルダを開き「start.js」をコマンドプロンプトで実行しましょう。
「start.js」を右クリックすると「コマンドプロンプトで開く」という項目があると思いますので
そちらからでも大丈夫です。
※start.jsを実行しても反応がない場合はLWFS\.a.start.batを実行してみてください

そうすると、デスクトップに下記のフォルダが作られると思います。
「LWFS_work」(作業フォルダ)　
「LWFS_work_output」(出力フォルダ)

基本的には「LWFS_work」フォルダにファイルを置いて作業をする感じになります。

また、ブラウザが立ち上がりLWFSのページが開くと思います。
こちらがプレビュー画面になります。
※chromeかfirefox以外のブラウザが立ち上がる場合デフォルトのブラウザを
　どちらに設定するか、LWFSのURLをコピーして開いてください。





ではまず、試しになにか適当に動くものを作ってみましょう。
まず、「LWFS_work」フォルダに「test」フォルダを作ってみましょう。
そして、Flashを開き「test」フォルダの中に「test.fla」というファイル名で保存しましょう。
これでひとまず準備は完了です。


あとはFlashで制作を進めていくのですが、下記の制限があるので注意しましょう。

・シェイプ（ベクターグラフィック）は使えません。

基本的に全て画像（ラスターグラフィック）のみ使用して制作していきます。
というわけで、画像のみを使用して何か適当なアニメーションを作ってみましょう。

基本的に、ムービークリップもグラフィックインスタンスも使えますが
画像自体に傾斜をかけるのはNGです。


あと、ムービークリップのフィルタは透明度のみ設定することができます。
着色などは使用することができません。




そんなわけでこんな感じのFlashを作ってみました




これをLWFにしたいと思います、まずはFlashのコマンドから「コマンドの実行」を選びます
(※LWF_Publishが表示されている場合はそれを選んでください)

コマンドの実行選択後、LWFSを解凍したフォルダにいき

LWFS\.a\lwfs\lib\LWF_Publish.jsfl
を実行してください。

実行すると色々出てくると思いますが、LWFデータに書き出す際の設定と違うので
必要なパブリッシュ設定にしましたよー。 & リンケージ名がついてないので自動でつけましたよー
という警告が大半なので大丈夫です。

パブリッシュが成功するとtestフォルダ内にswfファイルとbitmapを格納したフォルダが作られます。





また、LWFSに下記のような感じでリストが追加されると思います。






追加されない場合はLWFSのページの左上にある「force to update all」を押してください。
リスト内の「canvas」や「webkitcss」や「webgl」を押すとそれぞれの描画方法で
閲覧することができます。

こんな感じでLWFを制作していくことになります。
次回はもう少しLWFSについて詳しく書きたいと思います。

※LWFSの動作を止めたい場合は「stop.js」をstart.jsと同じ要領で実行してください。






このページの説明だけではわかりにくかった場合はこちらのスライドも参考にしてみてください。









今回使ったflaファイルはコチラ







投稿者 時刻: 0 件のコメント:
ラベル: , ,

2013年4月17日水曜日

はじめてのLWF



LWF　の中でも主にLWF for HTML5 についてゆるゆると何か提供できたらと思います。
LWFってなんぞや。って場合は↓を見てもらえれば何とかなくわかると思います。

http://labs.gree.jp/blog/category/lwf/

LWFがcreateJSなどのライブラリと違うところはグリーが開発してるだけあって
スマートフォンでの動作を大前提としているところだと思います。
また、canvasやwebkit css、webglなど様々な描画方式にも対応しています。
そして、なんとUnityやcocos2d用の2Dアニメーション素材の制作にも活用できたりします。
これでオープンソースというところが非常に良いと思います。


さて、LWFをまず始めるにあたって、絶対必要なものがあります。

・Adobe Flash

↑これがないことには始まりません。
FlashPlayer7 、AS1で書き出せるバージョンなら大体OKだと思います。

次に↓にアクセスしてLWFSというツールをダウンロードしてきます。
自分のOSに合った最新版を選んでください。
ダウンロード

ダウンロードが終わったらファイルを解凍しましょう。
ひとまずはこのツールを使ってLWFに触れていきたいと思います。
LWFSは簡単にLWFデータをつくることができてプレビューも行えるツールです
実際にLWFデータを実装する方法等はいずれ触れられたらいいなと思います。


次は、実際に簡単なものを動かしていきたいと思います。
基本的にFlashの扱いにはある程度、慣れているという前提で話を進めていきます。

投稿者 時刻: 0 件のコメント:
ラベル: , ,
登録: 投稿 (Atom)