Adobe Edge Animate 基本操作の説明 vol.3

      2016/06/30

edge-animate3_000
vol1.ではEdge Animateについて大まかな説明をしました。
今回は操作画面について説明します。

edgeanimatevol3_01
左上から時計回りに説明します。

ツールパネル

edgeanimate_panel_01
ツールパネルについて説明します。

edge_animate3_13

左から、
1)選択ツール(V)
2)変形ツール(Q)
3)切り抜きツール(C)
4)長方形ツール(M)
5)角丸長方形ツール(R)
6)楕円形ツール(O)
7)テキストツール(T)
8)背景色指定
9)ボーダー色指定

1)〜9)
長方形や楕円などの図形を作成したり出来ます。
(V)などはショートカットキーです。
ショートカットキーLOVEなので有り難いです!
便利なのでじゃんじゃん使っていきたいところですね。

10)新しいエレメントのレイアウトの初期設定
ここから色々と設定出来ます。

edge_animate3_9

プロパティパネル

edgeanimate_panel_02
プロパティパネルの説明をします。
edge_animate3_02

1)ステージ幅・高さ
ステージで幅や高さを指定します。
widthとheightをリンクづけることも出来ます。

2)背景色
左側は単一の背景色
右側はグラデーションを指定

右側をクリックしてカラーパネルを表示させた画像です。
edgeanimate3_03

3)最小幅/最大幅
最小幅と最大幅を設定することも出来ます。
他の箇所もですがカーソルをあてるとソースが表示されます。
最大幅100%の場合はstyle="width:100%;"です。
なんだか、テンション上がりますね!

画像を可変にする場合は%で作成します。

【pxと%の切り替え方法】
edge_animate3_14
すぐ右にあるつまみ
上→px
下→%

4)オーバーフロー
はみ出た分をどうするか。
overflow:hidden;)など

5)自動再生
表示した時に自動で再生させるかどうかをチェックで選択。
onmouseなど任意のタイミングで動かしたい場合は外します。

6)コンポジションクラス
Edge Animateで作成したアニメーションに割り当てられるClass名を指定出来ます。
【EDGE-ichigoとした場合】

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=Edge" />
1.5からはじめるIT勉強会
<!--Adobe Edge Runtime--><script charset="utf-8" type="text/javascript" src="sample01_edgePreload.js"></script>
<!--Adobe Edge Runtime End-->

7)下位ステージ
レガシーブラウザ(IE8以下)で表示させる代替画像を設定出来ます。
edge_animate3_10

レガシーブラウザ対策として、代替画像以外の方法もあります。
「Google Chrome Frame」
これは、ユーザー側がダウンロードして使用している必要があります。
また、有効にするには ファイル>パブリッシュ設定 で設定します。
edge_animate3_11
Google Chrome Frame使用ユーザーの割合が多くても少なくても代替画像はまだまだ必須ですね。

8)ポスター
下位ステージをクリック。
edge_animate3_10

9)プリローダー
プリローダーも設定出来ます。
好きな画像からでも選択画像からでも選べます。

edge_animate3_12

リンクURLやサイズなど色々変更出来ます。

(※)について
edge_animate3_6
clickイベントなど設定出来ます。
次の次あたりのサンプルまたは勉強会で説明したいと思います。

上の説明はステージに対するプロパティでしたが、
図形を作成したりテキストを入力するとそれ用のプロパティパネルへと項目が変わります。

edge_animate3_29

シャドウやフィルターなどがあります!!
セピア、色相循環、彩度ですっ!
もうphotoshopにしか見えなくなってきましたね。←イヤイヤ違います。
photoshopと違って出力はソースなので、出来る範囲が限られており、
ゆがみや表現手法などcssで再現出来ない効果はできません。

また、効果以外に、図形やテキストに任意のclass名を付けたりカーソルマークを選べたりアクションを付けることも出来ます。

ステージ

edgeanimate_panel_03
ステージについて説明します。

edge_animate3_16

描画領域です。
ここに画像をD&Dしたりテキストを記述したりします。

エレメントパネル

edgeanimate_panel_04
ステージに色々と画像やテキストを置くと下の画像のようになります。
edge_animate3_17

DOMの構造が表示されています。
エレメントパネル内はD&Dで順番を入れ替えることが出来ます。
(ライブラリパネルは×)
なんだかレイヤーっぽですね。

ライブラリーパネル

edgeanimate_panel_05
画像を読み込むとライブラリーパネルに表示されます。

edge_animate3_18
順番が上の方ほど手前に表示されます。
下のシンボル・フォントも同じように表示されます。

タイムラインパネル

edgeanimate_panel_06

タイムラインには、ステージ内の画像やテキストなどが表示されます。
edge_animate3_20

1)自動キーフレームモード
edge_animate3_22

自動キーフレームをクリックします。

edge_animate3_23

1.図形をスタート地点に移動させます。
2.つまみを横スライドさせます。

edge_animate3_24
3.動かしたい位置へ移動させます。

再生すると、左下にある図形が1秒経つと右上へと瞬間移動のように移動します。

2)自動トランジションモード
段階的な遷移のあるキーフレームが挿入されます。
使用する時は自動キーフレームモードと一緒にONにします。

自動キーレフームの例では瞬間移動のような動きでしたが、作成時に自動トランジションモードをONにするだけで、
左下から右上へ、滑らかな移動になります。

3)ピンの切り替え
タイムライン上の編集が記録されます。
余計な動きをする場合はそのつど切っておいた方が作成しやすいです。
(余計な動き=画像の位置を調整するなど再生時の動きとは関係ない変化)

4)イージング
edge_animate3_25
上の項目を選択するだけで直線的な移動に動きをつけることが出来ます。

5)トリガーを挿入
クリックすると、スニペットとソースが表示されます。
下の画像は右のスニペットを上から順にクリックした状態です。
edge_animate3_21

JSが書けなくてもイベントを付けることが出来ます!

Webフォントの使い方を説明していなかったり、サンプルが一切なかったりと
ツッコミどころのある記事ですが、最後まで読んで頂きありがとうございます。

まだまだ続く予定です★

 -Web制作

スポンサー リンク

スポンサー リンク

  関連記事

スクリーンショット-2015-03-15-15.45.38

MAMPにバーチャルホストを設定してWordPressのサイトを見る方法

MAMPは数年前から使っていましたが今のMacではデフォルト設定のままで、そこにWordPressを

html5_eye

CSS Nite 「HTML5+CSS3 Web Camp 2012」行ってきました。

CSS Nite in Shinagawa, Vol.2「HTML5+CSS3 Web Camp 2

edge_animate1-5_sample_eye

【it_ichigo開催】第1回「いまはじめよう Adobe Edge Animate」

勉強会を開催しました。内容はAdobe Edge Animateです。ご参加頂いた方々、協力して下さった方々、ありがとうございました。

eyecatch-git

初心者のための初心者によるGit紹介ーおすすめなサイトなどー

先日、Gitの勉強会に参加しました。gitって色々インストールやら設定やらしなきゃいけないし、コマンドも覚えないといけないし・・・
ちょっと始めづらいイメージしませんか。

nekobean_with_cat

NetBeansを使いこなそう!ーインデントタブで空白文字を入れない方法ー

<使用バージョン:NetBeans IDE 7.1> Netbeansは無償のオープンソースソフトウ

api_130921

思わずWeb APIを使った「何か」を作りたくなる★Web API紹介

9/21にWeb APIを使ってWebサービスを作るハッカソンを行います!!
色々と調べたのでブログ記事にまとめようかと思います。

edge-animate_eye

Flashの代替?!Adobe Edge Animateは凄い vol.1

Adobe Edge Animate って何?
「HTML5アニメーション・オーサリングツール」
この言葉から推測出来るように、HTML5のソースです。
どんなことが出来るの?

jscafe12-eyecatch

jsCafe12回目に参加してきました。

jsCafe12回目に参加してきました。
今回はNode.js入門(ハンズオン)とLESSについてでした。
メモをとったところ、感想を書き連ねたいと思います。

edge-animate_eye2

Adobe Edge Animateをインストールしよう vol.2

前回、大絶賛したAdobe Edge Animate
今回はインストール方法をご説明します。

csssprite00

CSS Sprite × スマフォでハマったこと

複数の画像を一つにまとめることでHTTPリクエストを減らし、表示速度を上げる手法「CSS Sprit

スポンサー リンク

スポンサー リンク

  Comment

  1. プログラミング参考サイト | android manifest configChanges より:

    […] Adobe Edge Animate 基本操作の説明 vol.3 […]

  Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

スポンサー リンク

スポンサー リンク
13466461_1080596415348300_6215793119731330108_n
【読了】ビジネスサイトをこれからつくるWordPressデザイン入門サイト制作から納品までのはじめての一歩

目次1 CONTENTS2 この本の対象3 この本について思ったこと4 個人的に嬉しい点5 感謝 C

IMG_2070
今までとこれからについて – 2016年

目次1 個人事業になるまでの経緯2 Webの仕事はどんなところからスタートしたか。3 個人事業はどう

41GszYmIi6L._SL250
【読了】勇気の心理学 アルフレッド・アドラーが1時間でわかる本

最近よく耳にする「アドラーの心理学」 学生の頃、心理学を専攻しその中でも行動分析心理学を選択しました

hackathon_2016
はじめてのハッカソンでうまく進めるために事前に説明していること。

3年目に突入したはじめてのハッカソンは次回で16回目を迎えます。 どう運営すれば良いかあれこれ悩む日

13177978_1047233092017966_7433723915237920700_n
【読了】一歩先にいくwordpressのカスタマイズがわかる本

一歩先にいくwordpressのカスタマイズがわかる本を著者の方から献本いただきました。ありがとうご