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制作

スポンサー リンク

  関連記事

csssprite00

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

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

git-shiz-eye

オプトキャットと戯れてきました。〜静岡Developers勉強会 GitHubハンズオン〜|2012年9月1日

GItの勉強会に参加してきました。git打ってみたり、vim使ってみたり、SSHの設定をしてみたり、プルしてみたり・・・。途中、完全についていけていなかったのですが、発表者や参加者の方々が優しく丁寧に教えてくれました。

edge-animate_eye

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

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

jscafe12-eyecatch

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

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

nekobean_with_cat

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

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

130626_jscafe_eyecatch

jsCafe勉強会でjQuery animationについて発表させて頂きました。

jsCafe勉強会にてjQuery アニメーションについて発表させて頂きました。
この勉強会は、約2週間ごとに行われ次の発表者を決めて準備するといった、ゼミのような特徴があります。
主催者の方の実演(コンソールとかconsoleとか)されながらの説明がとても面白く興味テンション全てが上がるような勉強会です。

api_130921

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

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

eyecatch-git

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

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

edge_animate1-5_sample_eye

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

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

edge-animate_eye2

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

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

スポンサー リンク

  Comment

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

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

  Message

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

スポンサー リンク

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

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

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

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

57179600-239c-4dfa-8e47-40530ad899d1
瀬戸内海にある島★小豆島シャルソンに参加してきました!(小豆島ギルドハウス!!)

目次1 小豆島(しょうどしま)に行ってきました2 小豆島シャルソン2.1 世界一狭い海峡が小豆島に!

2015-image
2015年を振り返って。

2015年は変化の年でした。 今年始めたこと★ 1. 東京から福岡へ10年ぶりに戻りました。 2.

スクリーンショット 2015-09-29 13.16.44
MovableType.netでアロマのサイトをリニューアルしました。

お久しぶりです。前回の更新から結構経ってしまいました。 よく人から「忙しそう」と言われますが、フリー