2013年04月09日

Edge + img入れ替え

 adobeの「Edge」なる物に手を出してみた。そも、Edgeとは何ぞやと問われると、ぶっちゃけFlashにあった「タイムライン」を、HTML5 + javascriptにあった形で実装した物の作成環境とでも言おうか。まぁ、HTML5でアニメーション的な物を簡単に作るための環境である、といったところであろう。

 要するに、iOSやらAndroidやらにFlashでそっぽ向かれたAdobeが、半泣き顔でFlash作成環境をHTML5に移行しようとしたら、Flash professionalのエクスポート機能では表面的な物しかHTML5に変換する事が出来なかったのが原因ではなかろうか。というのも、Flash professionalは表向きはHTML5を吐き出せるとうたいつつ、実際のところはActionScriptのコードがjavascriptに変換できないので、少しでもスクリプトを使っていると詰んでしまうという仕様。いや、ActionScriptで書いた物と同じルーチンを、自分でjavascriptでも書けば出来るんだけど、それではどう考えても自動生成の類ではなく、ぶっちゃけ広告に偽りありまくりなのである。何にせよ、HTML5への出力はコードが一切入らない、アニメーション的な物しかダメ。つまり、動画的な物以外であれば、せいぜい小規模な「部品」を作る以外はHTML5環境では役に立たないのである。まぁ、Adobeがこの辺をどうしようもなくて「半泣き顔」が「3/4泣き顔」くらいに進歩した時点で、「そうだ、ActionScript切り捨てて似たような物を1から作ればいいじゃいか」的な発想をしたのではなかろうか。というわけで、新たに開発したFlash代替作成環境が「Edge」である…というのが、小生の偏見に満ちた理解である。おそらくは、このおかげでFlashでスクリプトを書いていた小生のような人間が、近いうちに「半泣き顔」どころか「全泣き顔」になってHTML5とjavascriptを勉強するハメになってしまうのであろう。ならば…Adobeなぞに泣かされる位なら、今のうちに自分の意志で泣いてやる!ActionScriptもHTML5もjavascriptも、全部勉強して、抱えたまま突っ走ってやるぜ!!

 と、まぁ、毒を吐くのはこのくらいにしておこうか。とにかくAdobe Edgeは新しい環境故、文献的なものが少ない。ぶっちゃけ今何か書いた所でpreview版しかない訳だから、今後どんな変更が入るかわからない故、何か書く意味も薄い気もしなくもないのだが…。まぁ、それでもちょっといじってみた感じを書いてみたいと思う。

 まず、Adobe Edge Animateをダウンロードして実行してみた。インストールその他は、他にいくらでもページがあるので、それに譲る。で、最初にやるべきと思ったのは、チュートリアルをひと通り、である。このチュートリアルが、内容的にはよく練られているように思える。スクリプトの細かい部分以外は、結構これで把握出来るんじゃないかな。Flashでタイムラインにムービークリップを乗っけて、トゥイーンとかやっていた人にとっては、このチュートリアルだけでもEdgeをそこそこ使える状態になれるだろう。とはいえ…基本的に全部GUI操作なアプリの癖に、チュートリアル内で〇〇ボタンをクリックしろなどと名称で呼ばれたってそのボタンがどこにあるかわからない上に、ボタンの上にマウスカーソル持って行かないとその名称が出ないんだから、チュートリアルをこなす上で最も難解かつ時間のかかる作業が「該当するボタンを見つける」という作業なあたり、結構ダメダメであったりもするのだが。

 さて。ひと通りチュートリアルをこなして、だいたいやり方は見えてきた。エレメントをクリックした時などのような、イベント時の書き方も、チュートリアルである程度想像もついた。毎フレームの処理みたいな物は追い追い勉強するとして、ボタンを押した時の動作くらいなら普通にjavascriptを書いてやれば良いわけだ。

 というわけで、適当に画像をStageにドロップして配置してみる。これは、問題なし。じゃぁ、この画像を書き換えてみようか、と思った所で問題発生。javascriptで出来る事はだいたい分かっているつもりだが、このAdobe Edge AnimateのAPI周りがよくわからない。

 Edge Animateの中では、描画されるオブジェクトは「エレメント」という単位で呼ばれる。これは、HTML上では特定の「div」エレメントに当たる物らしい。divだから、当然その子要素にも同様な物を持てるわけで、それでレイヤー階層的な物も表現出来る訳だ。その辺りは、何となく理解出来る。

 じゃぁ、ボタンを押した時に、特定の「エレメント」とやらをいじってみよう、と思った時に、ちょっと困った。基本的な、EdgeのAPIで出来そうな事をやる分には、何となくEdgeのコード補完で出来るように思える。では、APIになさそうな事をしようとした時はどうだろうかというと、この「エレメント」の名前から、HTML内で実態として存在するdivタグへ辿り着く方法がわからなくて悩んだ。

edge_01_01.png が…色々調べてみたら、そう難しくない命名規則で「id」が決まっていたため、何とか出来そうな雰囲気である。例えば、「Stage」の下に「pic」という「エレメント」があったとしたら、それには「Stage_pic」というidがつく。故に、
var obj = document.getElementById("Stage_pic");
みたいなコードを書いてやれば、あとは「obj」という変数にアクセスすれば、好きなだけjavascriptで扱う事ができる。こういう書き方は、おそらくAdobeの思惑からは外れる物だとは思うものの、かなりネイティブなjavascriptのコードを書き込める事を意味するので、使いでがありそうである。

 余談ながら、上で「エレメント」は「div」タグと書いたのだが、画像ファイルをドロップした場合、プロパティウィンドウの一番上の行、エレメント名をいじる場所のすぐ右にあるボタンを押すと、エレメントが「img」になる(余談ながらチュートリアルでは、こういうのを「divボタンをクリック」みたいな書き方しているせいで、本気でどこにそのボタンがあるかわからないのだ)。この「img」の状態にしておけば、imgのソースを書き換えるとかも可能だ。つまり、適当にボタンチックなエレメントを用意して、clickイベントに
var img = document.getElementById("Stage_pic");
img.src = [イメージ画像のurl];

的なコードを書いてやれば、ボタンを押した時に画像を変えるような事が出来ることになる。もしかしたら、ドロップした画像ファイルとimgみたいな関係が他にも何かあるのかもしれないので、今度少し調べてみたいとは思う。

 でも…たぶんAdobeはこういう書き方よりも、自分とこのAPIを使う方法で来るんだろうなぁ。とはいえ、現状ブラウザごとで差異があるjavascriptの動作を、もしEdgeのAPIが吸収してくれるのなら、それはそれでものすごく幸せな状況っちゃ状況なのかもしれないなぁ。

 2013/06/05追記
もう少し楽に画像を入れ替える方法を発見。こちらにて。
posted by 管理人 at 01:31| Comment(0) | Adobe Edge | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。