tips : tips/02.プログラミングなど/Flex/Flashめも.txt

tips >> 02.プログラミングなど >> Flex >> Flashめも.txt

Flashめも

図形を描く

    図形を描くとき
        1. 矩形ツールで四角形を描く
        2. 頂点を他の2点を結ぶ線の上にドラッグすると、頂点がひとつ消える
            ※ こうすると三角形になる
        3. 辺の上をドラッグすると丸みを帯びた変形
            ※ Altを押しながらドラッグすると尖った変形

        ※ ただ頂点増やしたい場合（5角形にしたい場合とか）はどうするんだろう

    線を引きたいとき
        線ツール    : 直線
        鉛筆ツール  : フリーハンドで描きたいとき（「スムーズ」をオンにすると滑らか線に）
        ペンツール  : ベジェ曲線みたいのを描きたいとき

    消しゴムツールで連続した図形をまとめて消したい
        左側の消しゴムツールのアイコン - [流し消す] をオンにする
        ※「流し消す」ってすごい日本語だなあ

    図形を重ねて移動させたら重なった部分が消えてしまう。。
        以下のどちらかで対応
        ・レイヤーを分ける
        ・[オブジェクトの描画]ボタンをオンにして、1個1個の図形をオブジェクトにする

    ペンツールでの操作
        1点目はクリック、2点目はクリックしたままドラッグして終点を定義、、
        という感じ

    コントロールハンドルのない点(角とか)をベジェ曲線で変形したい
        Alt押しながらドラッグするとコントロールハンドルが出てくる

描画オブジェクトの操作

    各図形のプロパティが見たいとき
        「ライブラリ」パネルで見る

    図形を描画オブジェクトに変換したい（[オブジェクトの描画]ボタンを押し忘れた）
        [修正]-[オブジェクトの結合]-[結合]

    図形を変形させたい
        変形する種類は、伸縮、回転、傾斜、歪曲、エンベロープ
        ※「エンベロープ」は、図形を囲む枠を自由に変形させる
            （変形するためのアンカーポイントが表示される）
        ※ 回転の中心は移動できる（デフォルトは図形の中心にある）

    線を滑らかにしたりまっすぐにしたい
        選択ツール（黒矢印ポインタ）でオブジェクトを選択して
        「スムーズ」ボタンまたは「ストレート」ボタンを押す

    スポットライトみたいな効果を出したい
        「マスクレイヤー」を使う
        ※ レイヤーを右クリックして「マスク」

    シンボルに変換した図形を、複数とか別の場所で表示したい
        「ライブラリ」の一覧からシンボルをステージにドラッグする
        こうやって作られた図形を「インスタンス」と呼ぶ。
        ※ オブジェクトをコピーする場合と比べて、サイズの節約になる
        ※ 何箇所でも使ってる場合は修正しやすいという利点も？

    インスタンスとして作った図形をやっぱり独立したオブジェクトにしたい
        [修正]-[分解]

    シンボルの種類
        ・ムービークリップシンボル
            シンボル内のタイムラインはメインタイムラインから独立している
            ※「Flash Playerで停止しているはずなのに一部だけ動く」という現象はこのため
        ・グラフィックシンボル
            タイムラインが上の階層のタイムラインと連動する
        ・ボタンシンボル
            アップ、オーバー、ダウン、ヒットの4つのステータスでの表示を設定できる

    ショートカット
        F8 : シンボルに変換

テキストの操作

    2種類ある
        静止テキスト         : 通常の文字入力
        ダイナミックテキスト : ActionScriptから操作可能なオブジェクト
                               HTML入力可能

    文字を図形に変換したい
        [飾り]-[分解] で、「静止テキスト」が「シェイプ」に変換される

    アンチエイリアス
        プロパティでアンチエイリアスを利かすことが出来る

タイムラインの操作

    他の図形を操作したくないとき
        レイヤーをロックする（南京錠マーク）
        ※ 「不可視にする（目のマーク）」ではない

    モーショントゥイーン
        1. 図形を「シンボル」に変換する
        2. 先頭フレームを右クリック - モーショントゥイーンを作成
        3. 終点のフレームを右クリック - キーフレーム挿入
            ※ こうすると作成したシンボルが終点フレームにコピーされる
        4. 終点フレームのシンボルを移動、回転
            ※ 変形させたら「シェイプ・トゥイーン」？ == モーフィング

    モーショントゥイーンの軌跡が見たい
        「オニオンスキン」という機能を使うといい。
        タイムラインの下にあるバーに、「オニオンスキン」ボタン
        ※ パブリッシュ時ではなく編集時に出来る
        ※ 本を見て最初これは「モーションブラー」の機能なのかと思った・・

    モーショントゥイーンの速度に変化を持たせたい
        「イージング」というパラメータをいじる

    モーショントゥイーンの軌跡をまっすぐでなくて曲線にしたい
        タイムラインの下のバーにある「モーションガイドの追加」ボタンで
        モーションガイドを作成する

    タイムラインエフェクト
        「タイムラインエフェクト」という機能でもモーショントゥイーンが作成できる
        ウィザードみたいなもの？
        ※ タイムライン上ではなく、シンボル内にトゥイーンの情報が作成されるそうだ
        ※ 他にぼかし、爆発、影を付ける、フェードインとか出来るそうだ

    ガイドラインの線に沿ってオブジェクトの向きを変えたい
        「パスに沿って回転」をオンにする

    シェイプトゥイーンで、線が切り離されてぐちゃっとなってしまう
        [修正]-[シェイプ]-[シェイプヒントの追加] で
        作成される「シェイプヒント」の位置を調整する
        ※ つながっていてほしい線の結合点辺りに置くとよい？？

    ActionScriptの埋め込み
        フレームを右クリック - アクション
        ※ 埋め込まれているフレームは「a」という文字が表示される

    各フレームに何が描かれているか、タイムライン上で見たい
        タイムラインの右上のほうの「三」という形のアイコン - [プレビュー] を選択

    フレーム操作のショートカット
        F5         : フレームの挿入
        F6         : キーフレームの挿入
        F7         : 空白キーフレームの挿入 : 次のキーフレームまでオブジェクトが表示されない
        Shift + F5 : フレームの削除         : 後ろのフレームが前に詰まる
        Shift + F6 : キーフレームの削除     : 前のフレームが伸びる

        Ctrl + Alt + C : フレームのコピー
        Ctrl + Alt + V : フレームのペースト

    フレームのアイコンの意味が知りたい
        ○  ：
        ●  ：
        []  ：
        a   ： ActionScriptが埋め込まれているフレーム
        ●> ：

    TODO: 確認
        ・タイムラインで上の方に表示されてるレイヤーが「手前」のレイヤー？

用語
    ・ステージ
    ・ライブラリ
    ・シンボル
    ・インスタンス

        この説明でイメージが沸いた
                ↓
            ライブラリ内のシンボルは、ステージ上にドラッグして使用します。
            ステージ上に配置されたものを「インスタンス」と呼び、これがシンボルの分身となります。

    ・ステージ
    ・ワークエリア
        パブリッシュしたときに表示される部分が「ステージ」
        その外側にあって、flaファイル編集時にしか見れない部分を「ワークエリア」というらしい。

    ・キーフレーム
        アニメーションの中でキーとなる変化が定義されているフレーム。
        アクションはキーフレームにしか設定できない。

その他

Q. 使われてないオブジェクトを削除したい

A.
    ライブラリの一覧の、右上のアイコンをクリックして出てくるプルダウンの
    「使われていないオブジェクトの選択」を選んで[右クリック]-[削除]を選択

    ※1回で全部消えない場合があるので、何回か繰り返す

Q. フレームやライブラリを削除したがFLAファイルのサイズが減らない

A.
    [ファイル]-[保存して最適化] と操作すればOK。

    ※ 同じディレクトリに temp000x.fla というファイルが出来るが、これは消してOK。

Q. シーンの削除をしたときに
「Ctrlを押しながらゴミ箱アイコンをクリックすると、確認画面出さずに消せるよ」
といったメッセージが出るが、そのとおりにしても何も起きない。

A. そうですね

Q. 動画をWebサイトに載せたい

A.
    movとかmpgとかwavとかなら EMBEDタグに指定してあげるだけでいいみたいです。
    FLVよりこっちの方が簡単かも。

    <embed src="xxxx.mpg" width="88" height="31">

    ※ 参考：http://www.htmq.com/html/embed.shtml

    FLV形式のファイルについてはプレイヤーを落としてこないといけないらしいです。

    http://c-kom.homeip.net/review/blog/archives/2007/01/_flash_movie_fl.html

    ココを参考に、次のようにやるそうです。

    (1) 「FLASH VIDEO PLAYER」(flvplayer.swf)を自分のWebサーバ上のどこかに置く。
    (2)  載せたいページのHTMLには、次のような感じで載せる
         （flvplayer.swf が落としてきたファイルで、xxxxx.flv が公開したい動画）
      <object .....>
         ....
         <embed name=.... src="flvplayer.swf?file=xxxxxx.flv">
         </embed>
      </object>

Q. flvファイルを作りたい

A.
    「Riva FLV Encoder 2.0」というソフトを使うと良いらしい

    http://c-kom.homeip.net/review/blog/archives/2007/01/_flash_movie_fl.html

Q. HTMLと一緒に吐かれるJavaScriptファイル（AC_RunActiveContents.js）は何のためのもの？

A. Internet Explorerで、「1回クリックしないとアクティブに出来ない」という仕様を回避するためのもの。

    ※ この目的には SWFObject というのを使うのが良いと、どっかに書いてあったけど、
        Flashが吐いたものを使わずにそれを使うのはどういう意図だろう？

Q.
    よくWebで見る「メニューがあってそれをクリックすると表示される文字と絵が
    切り替わって・・・」という構成のFlashは、どうやって作っているのか。

A.
    ・0 ～10フレーム目で 1ページ目
    ・11～20フレーム目で 2ページ目
    ・・・・

    という感じでムービーを作成して、
    10フレーム目まで行ったら止まる（this.stop()）、
    ボタンを押したときに頭出しする（this.gotoAndPlay("chapter2")）、

    という具合に表示を切り替えているらしい。。

Q.
    なんか「トゥイーン」が本に書いてあるように動かない

A.
    CS3で使っていた「トゥイーン」は、
    CS4では「クラシックトゥイーン」   という機能のようだ。

ActionScript 2.0のコードを埋め込む場合の話

    フレームアクション
        ・キーフレームに設定する
            → キーフレームを右クリックして「アクション」
        ・そのフレームを再生するときに、そこに書いたコードが実行される
        ・例えばそのフレームで停止する場合は次のように書く
            this.stop();

        ・キーフレームからイベントハンドラを設定する方法
            ・ムービークリップ
                my_mc.onPress = function() {
                }

    ボタンアクション
        ・ボタンに設定する
            → ボタンを右クリックして「アクション」
        ・次のように書く
            on (press) {
                gotoAndPlay(xx);      // xx : フレームのラベル名またはフレーム番号
            }

            ※ 他に press, release, rollOver, rollOut

        ・[sample] 背景（mcBackgroundだとする）をクリックすると、丸（mcCircleだとする）をそこに移動させる（AS2版）

            背景（mcBackground）のインスタンスを右クリック → アクション → 次のソースを書く

            on (press) {
                _root.mcCircle._x = _xmouse + _x;
                _root.mcCircle._y = _ymouse + _y;
                trace("mcCircle: x:" + _root.mcCircle._x + ", y:" + _root.mcCircle._y);

                // 注1：ここで this は、mcBackground だから、this.mcCircle としても見れない
                // 注2：マウス座標は _xmouse, _ymouse 。これは mcBackground のローカル座標。
            }

    ※ AS3と比べたときの注意点
        ・クリックイベントについて
            AS3だと MouseEvent.CLICK があるけど、
            AS2 に onClick は無いので、onPress を使う
        ・this について
            ○ this.onEnterFrame = ...
            ○ my_mc.onPress = ...
            ○ _root.my_mc.onPress = ...
            ？ this.my_mc.onPress = ...  ← これはOK？
        ・MovieClipクラスのメソッド
            ○ gotoAndPlay(3)
            ？ gotoAndPlay(labelname)

ActionScript 3.0 のコードを埋め込むときのメモ

    ・描画オブジェクトをコードから操作したいとき

        (1) シンボルに変換
            → ここでの名前は何でも良い

        (2) インスタンス名をつける
            → たとえば mcXxxx としたとして

            ※ シンボル名ではなくてインスタンス名であることに注意
                「ライブラリ」のなかにあるシンボルを選択したときのプロパティではなく、
                ステージ上にある、インスタンスを選択したときのプロパティで「インスタンス名」を指定

        (3) つけた名前（this.mcXxxx）で参照できる。
            これは MovieClipクラスのインスタンス。
            ということは Sprite の子クラスなので Spriteと同じように操作できる。

            ※ ちなみに this も MovieClip型。

    ・2.0と違って「ボタンにアクションを追加する」とか出来ない
        代わりに、どこかのフレームで btnXxx.addEventListener(...); とやってリスナを登録する。

    ・[sample] 背景（mcBackgroundだとする）をクリックすると、丸（mcCircleだとする）をそこに移動させる（AS3版）

        タイムラインの1フレーム目を右クリック → アクション → 次のソースを書く

        mcBackground.addEventListener(MouseEvent.CLICK, function (e:MouseEvent):void {
            mcCircle.x = e.stageX;
            mcCircle.y = e.stageY;
            trace("mcCircle: x:" + mcCircle.x + ", y:" + mcCircle.y);

            // 注1：マウス座標はリスナの引数からわたってきた MouseEventオブジェクトの stageX, stageY または localX, localY で取得。
        });

知りたいこと

・DRM的なものとか、サーバサイドとの連携とかについての実例
・

読んだ本/使っていた本

	「これで完璧 Flash CS3」(伊佐恵子) とても分かりやすかった。やはり画面と公式のヘルプだけでやろうとするよりずっと効率的ですね・・
	「Flashデザインラボ」(デザインラボ編集部) 伊佐恵子さんの方が初級編、これが実践編、という感じ。実際のWeb製作、という感じ。
	「macromedia FLASH ActionScriptスーパーサンプル集」(大重美幸) ActionScript 2.0 の本。AS3.0ではなく2.0を使う必要が出たので目を通した。分かりやすい。

「ここは違う」、「ここはこうするといいよ」等あったら下記フォームから連絡ください。
※ 何も来なさすぎて寂しいので、雑談とかグチのメールでも歓迎です。

お名前
e-mail
本文