Adobe Edge サンプル制作

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

Adobe Edge preview 版でサンプル作ってみました.

SAMPLE And DATA

実際に作ったプログラムはこちら

ダウンロードはこちら

プロジェクトファイル(.adge)も一緒に含めているので実際に開いていじってみてください.

FLOW

  1. Adobe Edge を起動

  2. Adobe Edge を起動したら ツールバーにある図形ボタンをクリックしてエレメントを生成します. 今回は四角形とテキストを生成します.

  3. 左にあるプロパティビューを編集. 今回は四角形の背景色を青に, テキストを中央揃えにしてテキストカラーを白にしています.

  4. タイムラインを操作して, モーションを付けます. 今回は四角形を画面外から回転させながら中央に来るように調整しています.

  5. テキストのアルファ値を0にしておいて, 四角形が中央に来てから 0 ~ 100 に変化するように設定.

  6. 最後に保存. .edge というプロジェクトファイルと html ファイル, 動作に必要なファイルが出力されます.

  7. html を chrome もしくは safari, firefox で開いてみてください. 設定した通りにアニメーションすれば成功です. 決してIEでは開かないでください!

次は何作ろうかなぁ~

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。