SHOEISHA iD

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

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

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

Adobe Edge Animateを触ってみよう!

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

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

作ってみましょう

 それでは、どのように作っていくのかを理解するために、簡単なインタラクティブコンテンツを作ってみましょう。

 「ボタンを押したら、文字をアニメーションで表示する」という簡単なコンテンツです。せっかくなので「天気占い」を作ってみます(ただし、天気予報ではなくあくまで占いなので、適当な結果が表示されるだけです)。

エレメントを配置して画面を作る

 まずは画面を作ります。ボタンとテキストを作り、背景には空の写真を配置します。

1)角丸長方形ツールで、角丸の長方形を配置します

 角丸長方形ツールを選択し、ステージ上でドラッグします。

2)テキストツールでテキストを配置します

 テキストツールを選択し、ステージ上でドラッグします。テキスト入力エリアが表示されるので「いい天気でしょう」と入力します。角丸長方形の上にも文字を表示させたいので、もう一つテキストを作ります。こちらは「明日の天気は?」と入力して、角丸長方形の上に重ねます(角丸長方形が小さいときは上下左右の点をドラッグして大きさを変更します)。

3)角丸長方形とテキストを、1つのシンボルにまとめます

 角丸長方形の上にテキストを乗せているだけだと、バラバラなエレメントの状態のままなので、1つのシンボルにまとめます。2つを選択して、メニューから「修正>シンボルに変換」を選択します(または右クリックして「シンボルに変換」を選択します)。

4)シンボルに指カーソルを設定します

 そのままだとシンボルの上にマウスカーソルが乗っても矢印のままなので、指カーソルに変わるように設定します。シンボルを選択して、プロパティの「カーソル」で「auto」ボタンを押し「指カーソル」を選択します。これで、このシンボルの上にマウスカーソルが乗ったとき指カーソルに変わるようになります。

5)画像を読み込みます

 メニュー「ファイル>読み込み」で画像ファイル(PNG/GIF/JPG/SVG)を読み込みます(または画像ファイルをステージ上へドラッグ&ドロップします)。

6)重なり順を入れ替えます

 そのままだと画像が一番上に読み込まれて下のエレメントが隠れてしまいます。エレメントパネルで画像をドラッグして一番下に移動させます(リストの上にあるものが上に、下にあるものが下に表示されます)。

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

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

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング