SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Flashプログラマーによる「Adobe Edge」プレビュー (AD)

Adobe Edge Animateを触ってみよう!

タイムラインを使ってインタラクションアニメを制作

  • X ポスト
  • このエントリーをはてなブックマークに追加

コードを修正する

 この降ってくるテキストがいろいろ変化するように修正してみます。

1)テキストの名前を確認します

 テキストの内容を変更するので名前を確認します。テキストを選択して、プロパティの一番上を見ると「Text」となっています。

2)エレメントアクションのパネルを開きます

 シンボル化したボタンを選択して、プロパティの「アクションを開く」ボタンをクリックします。

3)JavaScriptを変更します

 「文字を用意して、その中からランダムに1つを選んで、「Text」に設定します」

tenki = new Array("快晴かもね","時雨かもね","あわ雪かもね");
r = Math.floor(Math.random()*3);
sym.$("Text").html(tenki[r]);

と追加しましょう。

 日本語入力がうまくいかないことがあります。そのようなときは、別の場所に書いたテキストをコピー&ペーストするなどしてみてください。

3)テストします

 メニュー「ファイル>ブラウザでプレビュー」を選択します。

 「明日の天気は?」ボタンを押すごとにいろいろな文字が降ってきます。

4)フルコードで確認することもできます

 メニュー「ウィンドウ>コード」を選択すると、全部のJavaScriptを確認できるコードパネルが表示されます。個々のJavaScriptを確認することもできますが、「フルコード」ボタンをクリックすると全部のJavaScriptの確認をすることができます。個々の「トリガーアクション」や「エレメントアクション」では最小限の表示で分かりやすくされていましたが、フルコードではその背景のコードまで見ることができるようになっています。

書き出しを行う

1)パブリッシュします。

 メニュー「ファイル>パブリッシュ」を選択します。すると、ファイルを保存したフォルダの中に「publish」というフォルダができます。この中の「web」の中に必要なファイル一式が入っています。

最後に

 Edge Animateには、いろいろ便利な機能がついています。

 「新規作成」からアニメーションを新しく作るだけでなく、「既存のhtmlにアニメーションを追加する」こともできます。

 ファイルを開くときhtmlを選択すると、htmlを読み込んで開きます。そこにアニメーションを追加したり、divタグがエレメントとして読み込まれるので、それを移動させたりすることもできます。

 また、データが多くなってプリローダーが必要な場合も、簡単にプリローダーを追加できるようになっています(プロパティの「プリローダー」で、「プリローダークリップアートを挿入」で選択して挿入するだけで作れます)。

 Edge Animateは、FlashやAfter Effectsのように直感的にモーションアニメが作れて、HTML/CSS/JavaScript形式で出力できるお手軽なソフトです。ぜひ触ってみてください。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Flashプログラマーによる「Adobe Edge」プレビュー 連載記事一覧
この記事の著者

森 巧尚(モリ ヨシナオ)

http://www.ymori.comこの世にパソコンが誕生したばかりの時代から作り続けて30年。現在は主にFlashやiPhoneアプリなどのオリジナルゲーム制作、執筆活動、関西学院大学非常勤講師、セミナー講師などを行っています。著書: 『やさしくはじめるiPhoneアプリ開発の学校』(マイナビ) ...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6875 2013/10/07 14:54

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング