Edge Animate Tips 2

Edge AnimateがポストFlashとして全然盛り上がっていないのはEdge Animateの日本語情報が少なすぎるせいだと思う。
というわけで、エレメントのプロパティの取得、変更について。

Edge Animateに興味がある人は大体Flashは知っているんじゃないでしょうか？
でもFlashはモバイルデバイスでは表示できない、だからEdge Animateを使ってみたい。
そうゆう流れだと思います。

Flash経験者がEdge Animateをお試しで使ってみて、一番最初に躓くのが「プロパティってどうやって操作するの？」だと思います。

Adobeのヘルプを見ても独自ライブラリについて少し書いてあるだけで、Edge Animate上でJavaScriptをどう使えばいいのかについてはまったく書かれていません。

これじゃ、流行らないよねぇ。
ActionScript並にヘルプを充実させろとは言いませんけど、せめてEdge Animate上でサポートしているメソッドとプロパティの扱いくらいは初心者にもわかるように書いてほしい。

というわけで、まずはプロパティの取得と変更について最低限書いておきます。


まず最初に『Edge AnimateはCSSを使ってアニメーションさせている』ということを知る必要があります。
canvasやsvgは使っていません。（使おうと思えば使えます。自分で苦労すればｗ）
CSSってなんぞやっていうと、HTMLを見栄えよくレイアウトするためのものです。
CSSが普及する前はHTMLを<table>タグでレイアウトしていたりしていましたねｗ

このCSSのプロパティをJavaScriptで操作すると、Edge Animateでインタラクティブなコンテンツが作れるようになります。

では、実際にどうやってJavaScriptでCSSにアクセスするのかコードを書きましょう。
Edge Animateでは二通りの方法があります。
一つはAdobeが作ったEdgeライブラリを使用した方法。

	// xxxは操作したいエレメント名、iには変数など
	sym.$("xxx").css("top", i);
	// 複数の場合は{}でとじます
	sym.$("xxx").css({"top": i, "left": j});
	// 取得したいときはこう
	i = sym.$("xxx").css("top");

view raw gistfile1.js hosted with ❤ by GitHub

以前のEdge AnimateはjQueryという、有名なライブラリを使用していましたが、最新版のEdge Animateでは独自のライブラリを使っています。
（注意しないといけないのは、ブログに書かれている古いコードはjQueryが使われている場合があって、それらは最新のEdge Animateではデフォルトで動作しません）

それでもいくつかのメソッドはjQueryと互換性があって、例えばCSSプロパティを操作するcss()は同じです。
なので、詳しい使い方は"jquery css"などで検索すると見つかりますよ。
CSSのプロパティ名については、Edge Animateのプロパティタブの各プロパティにマウスカーソルを重ねると、そのプロパティ名がポップアップするので、それを参照するのが一番簡単かも。

もう一つは素のJavaScriptを使った方法です。

	// xxxにはシンボル名やエレメント名。入れ子のシンボルはアンダーバーシンタックスで参照
	document.getElementById("Stage_xxx_xxx").style.width = i + "px";
	//取得する場合は反対にすればOK。parseInt()を使うと文字が含まれているプロパティを数字のみにしてくれる
	i = parseInt(document.getElementById("Stage_xxx_xxx").style.width);

view raw gistfile1.js hosted with ❤ by GitHub

Edge Animateから素のJavaScriptを使ってエレメントにアクセスする時はIDを指定します。
IDはエレメント名だけではなくてステージからのパスも含まれます。
Stageからアンダーバーで区切って表記します。

どっちを使えばいいか迷ったら、基本的にライブラリを使った方法がいいです。
というのも素のCSSはブラウザ毎に特別な書き方をする必要があったりするんですが、ライブラリを使った方法なら、そうゆうめんどくさい部分は自動でなんとかしてくれます（してくれない場合もありますけど…）

ただ、グローバルな関数やEdge Animateでサポートされていない機能を追加する場合には、素のJavaScriptを使う必要が出てきたりします。

とにかく、CSSを直接操作する方法さえ覚えておけば、できることがぐんと広がりますよ。