SHOEISHA iD

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

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

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

Adobe Edge Animateを触ってみよう!

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

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

インタラクションをつける

 アニメーションができたので、次に「しかけ」を作っていきます。

 Edge Animateは、JavaScriptを使ってインタラクションをつけることができます。

 インタラクションは、タイムラインにつける「トリガーアクション」と、エレメントにつける「エレメントアクション」の2種類があります。

 タイムライン上につける「トリガーアクション」は、タイムライン上の指定した時間で行うインタラクションです。

 エレメント上につける「エレメントアクション」は、ユーザーの操作(「クリックした」「マウスオーバーした」など)で反応するインタラクションです。

 Flashの「フレームアクション」「ボタンアクション」に似ていますね。

タイムラインにインタラクションをつける

 いまのままでは、ボタンを押さなくてもアニメーションが動いてしまっているので、最初に停止させるJavaScriptを記述します。

1)タイムラインを、JavaScriptを入れる位置に移動します

 一番最初で停止させるので、再生ヘッドを一番左に移動します。

2)トリガーアクションのパネルを開きます

 タイムラインの「トリガーを挿入ボタン」を押すか、またはメニュー「タイムライン>トリガーを挿入」を選択します。すると、トリガーアクションのパネルが開きます。

3)停止するJavaScriptを記述します

 直接記述してもよいですが、右に並んでいるスニペットの中から「停止」をクリックしましょう。

 「sym.stop();」と自動的に記述してくれます。

エレメントにインタラクションをつける

 次に、ボタンをクリックしたら再生するJavaScriptを記述します。

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

 シンボル化したボタンを選択して、プロパティの「アクションを開く」ボタンをクリックします(または、エレメントを右クリックして「アクションを開く」を選択します)。イベントリストが出るので「click」を選択します(エレメントをクリックしたときに行うJavaScriptの記述を行います)。

2)再生するJavaScriptを記述します

 直接記述してもよいですが、右に並んでいるスニペットの中から「再生」をクリックしましょう。

 「sym.stop();」と自動的に記述してくれます。

3)テストします

 インタラクション付きの動作はタイムラインの再生では確認できないので、ブラウザでテストします。メニュー「ファイル>ブラウザでプレビュー」を選択します。

 「明日の天気は?」ボタンを押すと「いい天気でしょう」という文字が降ってきます。

次のページ
最後に

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

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

森 巧尚(モリ ヨシナオ)

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

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング