TOP > はじめてのFlash
はじめてのFlash

ようやくFlashを作成できる段階になりました。 今回の作業内容は以下の通りです
  • 絵を描く
  • ブラウザで表示してみる
  • キーフレーム1のコピーを最終フレームに追加しキーフレーム2の内容を変更する
  • キーフレーム1のコピーを最終フレームに追加しキーフレーム3にする
  • パブリッシュする
  • ソースファイルを保存する ←体験版では保存できません

    ちなみに今回作るものはこんな感じです
    え?!こんなのつまんないって…
    いきなり複雑なものだと説明が面倒ですから
    とりあえず最初はこんなもんで許してください

    絵を描く
    ではステージ(画面の白い部分)に円を描いてみます
    ツールボックスの上から4番目右側の[一般的な図形]
    というところを円を描くツールにしてください
    円を描くツールになってない人はそのアイコンの右下向きの
    小さな三角をクリックすると使用可能なアイコンの一覧が表示
    されますので[円(スプライン付き)を描く]を選択して下さい
    上手く出来ない人は
    [図形]メニュー → [ドロー] →
    [円(直線と曲線の図形に変形可能)]
    でもできます

    円を描くツールになりましたか?
    では実際に円を描いてみましょう
    やり方は描きたい位置で斜めにドラッグすれば円が描けます
    ステージ中央より上側に描いてみましょう
    思った大きさ・位置に描けましたか?
    この辺は慣れが必要ですね


    ブラウザで表示してみる
    思ったような円が描けましたか?出来たらブラウザで表示してみましょう
    [再生]メニュー(または[ムービーを再生]アイコン) → [Webブラウザで再生]を選択します
    もしくはショートカットキー[Ctrl]+[スペースバー]を使ってみてもいいですね
    どうです?ブラウザで表示できましたか?まだ動きが無いのでFlashを作った感じがしませんよね
    それでもコレは立派なFlashなんですよ

    「待ってくれ。オレのデフォルトブラウザはieじゃないんだよ」という人は

    1.[ファイル] → [環境設定] で環境設定サブ画面を表示
    2.[再生]タブのWebブラウザ:"デフォルトのブラウザ"を選択する


    3.[OK]ボタンをクリックして設定を保存する

    これで次回からご使用のブラウザで表示する事が出来るはずです


    キーフレーム1のコピーを最終フレームに追加し
    キーフレーム2の内容を変更する

    描いた絵を無事ブラウザで表示する事ができましたね

    さて今度の作業は
    1.キーフレーム1のコピーを作成する
    2.キーフレーム2の図形を移動する
    の2つがあります

    ですがそれほど難しい事ではないのでサックリ進めます

    1.キーフレーム1のコピーを作成する
    [フレーム]メニュー → [フレームのコピーを追加]を選択します
    もしくは、このアイコンをクリックしてください
    これでキーフレーム1のコピー、キーフレーム2が出来たはずです

    2.キーフレーム2の図形を移動する
    キーフレームの表示がになっている事を確認して
    図形を移動します
    図形の移動はツールボックスの一番上の左[図形を選択/移動]
    選択しドラッグします
    選択中の図形はポイント(小さなピンクの)が表示されています
    今回は図形を下に移動させてください

    ここまで出来たら、もう一度ブラウザで表示してみましょう
    無事に上から下へ動きましたか?
    動いた人、チョット感動…でもないですか(笑)

    ようやくFlashっぽくなってきましたね
    もう少し頑張りましょうか


    キーフレーム1のコピーを最終フレームに追加し
    キーフレーム3にする

    さて、この作業で動きとしては完成です
    ここでの作業はキーフレーム1のコピー作業を行うだけです
    まず編集フレーム(表示中のフレーム)をキーフレーム1にします
    このアイコンでキーフレーム1に移動します
    キーフレームの表示がになっている事を確認してください
    次に[フレーム]メニュー → [フレームのコピーを最終フレームに追加]を選択します
    または、このアイコンをクリックしてください

    では動きをブラウザで確認してみましょう
    どうです、今度はサンプルのように行ったり来たりしてますよね

    このFlashは、下図のような流れで動いています

    なんとな〜く分かりますでしょうか?
    このように繰り返す動きを『ループ』といいます
    以後ときどき出てくる言葉なので覚えておいてください


    パブリッシュする
    取り合えず簡単ではありますがFlashが出来ました。ですが
    このまま終了してしまうと、体験版の皆さんは作成中の状態を保存する事が
    出来ませんのでせっかく作ったものが何も残りません
    ですからこれを皆さんのサイト等で公開できる形のFlash(swfファイル)にする作業
    これを『パブリッシュ』する。と言います

    耳慣れない言葉なので難しそうに思えるかもしれませんが、やる事はいたって簡単!!
    では早速やり方を

    1.[ファイル]→[ムービーの書出]→[SWFファイル(Flashムービー)とHTMLファイル]を選択する
      またはアイコンをクリック[SWFファイル(Flashムービー)と新しいHTMLファイルを書き出し]
    2.名前を付けて保存画面で保存する場所ファイル名を決めて[保存]ボタンをクリックする


    今回のファイル名は皆さん統一するとして ball と付けましょうか
    そして保存する場所のフォルダは覚えておいてくださいね。後で探すのも大変ですから
    [保存]ボタンをクリックすると正常な場合、何事も無く元のエディタ画面に戻るはずです
    また既に同一のファイル名が存在するときは上書きしても良いか確認画面が出ますので
    良ければ[はい]ボタンを、悪ければ[いいえ]ボタンをクリックして別名を入力して保存してください

    これで保存する場所に指定したフォルダに"ball.html"と"ball.swf"が出来ているはずです
    この2つのファイルを皆さんのサイトにアップすればインターネットで見ることが出来ます

    体験版の皆さんは以上で今回の作業は終わりです。お疲れ様でした
    製品版の皆さんはソースファイルの保存をしましょう


    ソースファイルを保存する ※体験版では保存できません
    さて、いよいよ最後の工程です
    せっかく作ったこの作業内容、保存せずに終了すると何も残りません
    この作業中のファイルのことを『ソースファイル(funファイル)』といいます
    人によっては単にソースとも言います

    やり方はいたって簡単!! ExcelやWordのファイルを保存とほとんど同じです

    1.[ファイル] → [保存(または別名で保存)]を選択する
      またはアイコンをクリックする
    2.名前を付けて保存画面で保存する場所ファイル名を決めて[保存]ボタンをクリックする


    今回のファイル名は皆さん統一するとして ball.fun と付けましょうか
    そして保存する場所のフォルダは覚えておいてくださいね。後で探すのも大変ですから
    [保存]ボタンをクリックすると正常な場合、何事も無く元のエディタ画面に戻るはずです
    また既に同一のファイル名が存在するときは上書きしても良いか確認画面が出ますので
    良ければ[はい]ボタンを、悪ければ[いいえ]ボタンをクリックして別名を入力して保存してください

    …書いてあることがパブリッシュすると変わらない…ですって?パソコンなんてそんなもんです
    ちなみに修正を加えたソースファイルを保存せずに終了しようとすると保存するか聞いてくるので
    必要であれば保存してください
    なおEazyFlashは結構貧弱なところがあってよく落ちるのでこまめに保存しておく事をオススメします
    保存するときは ball_01.fun、ball_02.fun…の様に履歴が残るようにしておくと便利です

    以上で今回の作業は終わりです。お疲れ様でした
    最後までお付き合いいただきまして本当にありがとうございました


    あとがき
    今回の内容はいかがだったでしょうか?簡単でしたか?難しかったですか?
    ページのボリュームがそれなりにあるので読むのが大変だったと思いますが
    慣れてくればこの位のFlashなら5分(早い人なら1分?)で出来るようになると思います
    それからご感想・ご要望、「こんな事は出来るの?」と言ったご質問等ございましたら
    掲示板に書き込んでいただけますと俄然やる気が出ます

    次は『はじめてのムービークリップ』です


  • フレームを表示



    SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送