東洋大学講義資料                 2004.8~2012.10(c)旭貴朗

Flashプログラミング:Top

 Macromedia社のFlash技術によりブラウザで動画を気軽に体験することができるようになった。ボタンをクリックすると何かが動き出す。簡単なスクリプトを使って、プログラミングを体験したり、アニメーションやゲームを作成し、遊びたい。
flash状況

□ 全体状況

 作るためのソフトと見るためのソフトは異なる。あなたはFlash作成ソフトで動画/ゲームを作成する。作成途中では、各社独自の形式で保存したり、読み込んだりして修正する。保存形式はFlash MXの場合は.fla、EazyFlashの場合は.funとなる。
 コンテンツが完成したら、それをSWF形式で書き出す。書き出したファイルの拡張子は.swfである。
 そのSWFファイルをWebサイトにアップロードしておくと、他人がそれをFlash Player(プラグイン)が組込まれたブラウザで閲覧し、Flashコンテンツを鑑賞することができる。

Flashを見るためのソフト

 見るためのソフトは実は複数あるが、代表的なものはMacromedia社のFlash Playerであり、無料である。多くのパソコンには事前にFlash Playerがプリインストールされているだろう。

Flash作成ソフト

 Flash作成ソフトも複数のものがある。本家のMacromedia社は、Flash MXを出している。
  例:Flash MX http://www.macromedia.com/jp/
  Flash MX 30日体験版 http://www.macromedia.com/jp/software/downloads/ 正規学生料金は23,800円(2001年)

 他社のFlash作成ソフトもある。以下では、無料の「EazyFlash体験版」あるいは同等の「KoolMoves体験版」を使って説明します。最近は日本語版のKoolMovesがあるようです。
  act2社:EazyFlash http://www.act2.co.jp/eazyflash/ (~2004)
  NetJapan社:日本語KoolMoves体験版 http://www.netjapan.co.jp/
体験版は日本語だし無期限に利用可能で、何回でもflashアニメを作成できる。それを自分のホームページにくっつけよう。ただし体験版ですから「作成途中の全体保存」ができません。しかし、ActionScriptも使えるし、部分的な保存(オブジェクト保存)は可能なので、入門レベルならなんとか使えそうです(copy & ファイルへ貼付け)。今後(授業範囲を超えて)本格的にやるときは、正規版を各自で購入してください。正規版でも安価です。


□ 授業の準備

 市販の教科書はありません.
 このページと下記の「とりあえず小手調べ」と3つの図(アイコン)をクリックして得られる資料を印刷して持ってくること.


□ 開発準備

ダウンロード,インストール(セットアップ)
 ダウンロードしたzipファイルをダブルクリックで解凍する(解凍中の警告は無視する)
 setup.exeをクリックしてインストールすると,デスクトップにショートカットができる.

フォルダーを作る
 「flash開発」フォルダーを作成し,その中に「小手調べ」「歩く人」「interaction」「ゲーム」フォルダーをつくる.
 それら4つのフォルダーにEazyFlashショートカットを複製して移動させる.

とりあえず小手調べ
 「小手調べ」フォルダーにて,複数のキーフレームを作成し,移動する図形の動画を作ってみよう


□ マニュアルなど参考資料

マニュアル
 EazyFlash(またはKoolMoves)のマニュアルは,起動後に「?」ボタンを押すとでてくる。または,ヘルプ>トピック検索>目次タブ ででくる(ただし,目次タブは「キーワード」タブの左側にあるが見えないので注意)
 ActiveScriptのマニュアルは,コンテンツ作成中にActiveScript編集ウインドウ(後述)上端の「?」ボタンを押すとでてくる。
  EazyFlashなら,すべて目を通しておきましょう。
  KoolMovesなら,KoolMoves環境(画面コンポーネントの説明)およびツールボックスを重点的に読みましょう.

実例
 また,本体を起動せず、exampleフォルダを見てみよう。実例があるので参考になる。
  c:\Program Files\EazyFlash\example
 とくにゲーム作成と音楽のコントロール方法は役立ちます。
  c:\Program Files\EazyFlash\example\ActionScript\Invaders

USBメモリー
 自宅のパソコンで動かすことが前提で授業をします
 しかし,もしも必要なら,以下の内容すべてをUSBメモリーに複写しておくと,大学のパソコンでも動かせるはず
  c:\Program Files\EazyFlash

Web検索
 Googleなどで検索すれば、若干の情報も得られます。キーワードは、EazyFlashの他にも、英語版名称のKoolMovesでも出てくるはずです。
 参考:初めてのEazyFlash http://eazyflash.fc2web.com/beginners/index.html
 参考:Flashの超基本的な質問はここでしろ! FAQ http://z-temp.hp.infoseek.co.jp/2ch/flash_faq.htm
 参考:Flash ActionScript Helper http://homepage3.nifty.com/ginga-b/

□ 授業内容

 そもそもFlashコンテンツ製作の方向としては、Webページなどビジネス向け、アニメーション向け、ゲーム向けと多彩です。ここではゲーム作成を目指して,アニメーション,ボタン,MovieClipなどの技術を学びます.

1 Flashアニメーションの作成

 少しずつ異なる図形を描いてパラパラめくるとアニメーションができる.人間とのインタラクションのないアニメーションは、ただ見ていればいいので簡単そうですが、実は奥の深い芸術なので、未熟なわたしは解説なんぞできません。
 参考:Flashアニメ作成講座 http://www.ae-suck.com/amazing/index.html
   このHPの上端「モーション」が役立ちます.
 宿題:人が歩いているアニメを作成し,公開せよ.締切1週間


2 Flashインタラクション

 図形はどれもボタンになれる。ボタンを押したら何かが起こる。ここでは、ActionScriptを書き込んだボタンをクリックすると、テキストが変更されるコンテンツを作成する。
 参考:素材の泉(無料素材リンクナビ)http://www.mlg.jp/
 宿題:授業内容と似ているが異なるものを作成し,公開し,自作のものを説明するレポートを提出せよ。締切2週間→レポート形式


3 Flashでゲーム作成

 図形はどれもMovieClipになれる.ムービー内ムービーである.MovieClipを矢印キーで動かし,弾を発射し,音をだしたりしてゲームを作成したい.これまで学習した方法を総合的に使うことになる.
 参考:Flashゲーム講座&アクションスクリプトサンプル集 http://hakuhin.jp/as.html
 参考:Flash(ActionScript)でゲーム作成入門 http://ponk.jp/flash/basic/index.php
 上記のサイトでの作成ソフトはFlash MXなので操作方法は異なるが、作成時の考え方やActionScriptの書き方が非常に参考になります.
 宿題:独自のflashゲームを計画し,作成し,公開し,自作コンテンツを説明するレポートを提出せよ。締切4週間→ コンテンツの構造


4 関連サイト

 参考:HTML5ゲーム作成ソフトTululoo http://www.tululoo.com/ ←EazyFlash(KoolMoves)と似ている
 参考:HTML5ゲーム作成ソフトConstruct 2 https://www.scirra.com/
 参考:素材から作るHTML5ゲーム http://homepage2.nifty.com/t_ishii/site/html5game/index.html
 参考:簡単Flashアニメ作成 http://www.swishzone.com/
 参考:ドコモ携帯電話: i モード対応Flash作成 http://www.nttdocomo.co.jp/p_s/imode/make/index.html
 挑戦:上記3つの宿題ができれば(ほぼ)準備はOK.Macromedia社のFlash MX体験版を入手し、有効期限内(30日間)で、自分で考えたゲームを作ってみよう。
 参考:3dゲーム作成ソフト unity http://japan.unity3d.com 無料版もあり

go back