SHOEISHA iD

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

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

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

Adobe Edge Animateを触ってみよう!

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

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

ピンボタンで自動的にキーフレームアニメーションを作る

 文字が空から降ってくるアニメを作ります。

1)開始位置を指定して、ピンボタンを押します

 画面の上から文字が降ってくるようにしたいので、まずテキストをステージの外(上側)に移動させておきます。

 タイムラインで、再生ヘッド(タイムラインの現在位置を表すつまみ)を開始位置(一番左端)に移動し、タイムラインのピンボタンを押して(または、Pキーを押して)、ONにします。

2)終了位置を指定して、エレメントを移動します

 再生ヘッドを終了位置(1秒後:0:01)に移動し、テキストを画面中央まで移動します。移動するだけで、開始時、終了時のキーフレームと、間のトランジションが自動的に作られます。アニメーションができたら、ピンボタンを押して(または、Pキーを押して)OFFにしておきます。

3)テストします

 「再生ボタン」を押すとステージ上でアニメーションが動きます。

 ブラウザで動く様子をテストする場合は、メニュー「ファイル>ブラウザでプレビュー」を選択すると、ブラウザが起動して動く様子が確認できます。

4)イージングを設定します

 直線的な速度で移動するだけでなく、イージング(加減速)を設定することもできます。

 空から降ってくる文字をバウンドさせてみましょう。

 トランジションを選択し、イージングボタンを押すとパネルが表示されます。「イーズアウト>Bounce」を選択すると、終了位置に対して弾むような動きになります。

  • イーズイン:最初遅くてだんだん速くなるような加速の動き
  • イーズアウト:最初速くてだんだん遅くなる減速の動き

次のページ
インタラクションをつける

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング