2011年9月3日土曜日

第9回新技術研究会(Flashの基礎)

開催日時  平成23年9月2日(金)午後1時30分~4時30分

開催場所  大阪産業創造館6階会議室D

参 加 者  (敬称略)
(講師)  らくさん
(PC持参)まっさん、SHIG、なんこう、ろろ、Ami、シマ、アイ、すみれ、林檎、
しんちゃん、ひろろ、たかきみ、Kom、うさこ、わかな、ストレインジャー
スカッパー、にっしゃん、みなちゃん、Teddy、NAGON、レールシティ、
(見学者) ようよう、クッキー、WAKO、  (計26名)
上記以外に、本日の勉強会テーマの補助者として、らくさんの知り合いの
棚橋知子さんの支援を戴きました。

学習項目  「ParaFla」 ソフトで Flash の基礎を勉強しました。
1.ParaFla ソフトの起動
2.Flash の基本動作(基礎)の習得
3.テキストエフェクトの楽しみ方

学習内容
1.ParaFla ソフトの起動

配布のDVDから音楽ソフトを除いた他のフォルダ、ファイルをトップ画面にFlash
というフォルダにまとめた。

フォルダ内のParaFla139を開き、ParaFla.exe アプリケーションのショートカット
の起動アイコンをトップ画面に作成した。

2.Flash の基本動作の習得

1) 左ペインへの画像の取り込み

① トップ画面の ピンクのParaflaアイコンをクリックして作業画面を開く。


② ファイル →「プロジェクトのプロパティ」 →基本設定でファイルの幅と高さ
       のサイズを決定する。
③ ファイル →「詳細設定」 →「SWF生成時にHTMLも保存する」にチェック。
④ 左ペインで右クリック→「アイテムの追加」で予め用意されたsora,yama,taiyou,
kumoの画像ファイルを選択し開く。左ペインに登録された。(ドラッグでも良い)

2) 画像soraのイベントでの作業   

① 右ペインの最上段をクリックし青くして、左ペインの画像ファイルsora を右クリ
ックし、「イベントに追加」をクリックするとイベントに表示(登録)された。


② 上記イベントに登録された画像sora を右クリック、プロパティをクリックし、
イベントのプロパティを表示させる。
⑦ sora(空)は画像の重なりでは一番奥(下)にあるので、「深度」は0にする。
また、画像soraは動きを伴わないため、「固定画面にする」をクリックし
「通常画面にする」と表示させておく。
soraは画面全体に表示させるものであるので、「描画位置」は指定しない。

⑧  「適用」をクリック

  3) 画像 yama でのイベント作業

① 画像yama(やま)の稜線上部の白色の部分を透明化する。
左ペインの yama の画像を右クリックし、プロパティをクリック。
② ファイルのプロパティで「透過色を使用する」にチェックを入れる。
③ R.G.Bの文字の横▼の左のスライドバーをいずれも最右端に移動させる。
数値はいずれも255になり、色表示が白色になれば、「左上のドット」を
クリックしOKをクリックする。


④ 予め右ペインの2段目をクリック青くする。
左ペインのyama を右クリック、「イベントに追加」をクリックすると、右ペイン
の画像sora の下に 画像yama が表示された。
⑤ 右ペインのyama を右クリック、プロパティをクリックする。
⑥ イベントのプロパティで、深度は2番目で30とします。山は移動しませんので
「固定画面にする」をクリックし、「適用」をクリックする。

4) 画像 taiyo のイベント作業

① 画像 taiyo 太陽の周囲の白色部分を予め、透明化しておく。 
3)yama の作業の①から③に準じて行っておく。  
② 予め右ペインのyamaの下の3段目をクリック青くしておきます。 
左ペインの taiyo を右クリック、「イベントに追加」をクリックすると、右ペイン
の yama の下に画像taiyo が表示された。
③ 右ペインの taiyo を右クリック、「プロパティ」をクリックすると、「イベントの
プロパティ」が開く。
④ フレームカウントに50と入力すると、「描画位置」の下に「移動先」が追加
表示される。
⑤ 「描画位置」「移動先」のどちらのX指標も154に、Yの指標をどちらも86に
する。
「通常画面」の「深度」は10とする。
⑥ 「中心位置」の「画像の中央に設定」をクリックする。「移動先」の「角度」を
360に設定する。


⑦ 「イベントプレビュー」をクリックし、taiyo (太陽)の画像が右回りしているかを
確認し、「適用「をクリックする。

5) 画像 kumo のイベント作業。

同じ画面の中で2つ以上の動く画像を作成する場合は「スプライト」を使用します。

① 右ペインの3段目画像2を青くする。
左ペインの下辺空白部分を右クリック、「アイテムを追加」→「スプライト」
をクリックする。「ファイルのプロパティ」の表が表示されるが、OKクリック。
② 右ペインに「スプライト(1)」のファイルができました。青く表示されます。
青くなっていないときは選択する青くなります。上段の「プレビューペイン」
に「スプライトを編集」の文字が表示された。それをクリックする。
③ 右側のイベントリストが消えるが、オレンジ色のスプライトのイベントの目次
が表示された。
④ 左ペインの画像 kumo を右クリック、「イベントに追加」をクリックすると、右
ペインに表示された。
⑤ 右ペインの kumo を右クリック、プロパティをクリック、「イベントのプロパティ」
が表示される
⑥ 「フレームカウント」に数値50を入れると、「移動先」が表示された。
「描画位置」のX は250に、「移動先」のXはー250(マイナス250)とする。
「通常画面」で「深度」は 0のままとする。
⑦ 「イベントプレビュー」をクリックし、雲が右から左に流れていく画面を確認し
「適用」をクリックする。
⑧ 右ペインのオレンジ色のバーをWクリックすると、最初のメイン画面に戻り
ます。
⑨ 左ペインの「スプライト(1)」を右ペインに挿入する位置として、taiyo とyama
の間を選択する。
⑩ 右ペインの「スプライト(1)」を右クリック、「イベントへ追加」をクリックする。
                     
⑪ 右ペインの「スプライト(1)」を右クリックで、さらにプロパティをクリックする。
「イベントのプロパティ」の画面で、「深度」を20とし、「固定画面にする」の
表示のままとします。「適用」をクリックする。
⑫ メニューバーの「プレビュー」をクリックし、「プレビューウインドウ」をクリック
すると、右回りの太陽の上を、雲が右から左に流れていけば成功です。


 6) 保存の仕方
A プロジェクトで保存 
「ファイル」→「名前を付けて保存」→「ファイル名記入」→「保存」
拡張子はpflで保存された。(再度の編集は可能)

B  フラッシュ で保存
「ふぁイル」→「SWFファイル生成」→「ファイル名記入」→「保存」
拡張子はswf で保存された。

C  DropBox の使用
「Publicフオルダ」に入れ、リンクのコピーから、URLをメールに貼りつけて
相手に送る方法(相手はこれをクリックして閲覧します)

3.テキストエフェクトの楽しみかた
タイトル等に各種の動くエフェクトを設定して変化をつけます。

① Parafla を起動し、作業画面の右イベントで右クリック、「アイテムを追加」
→「テキスト」をクリック。
② 「ファイルのプロパティ」→ 「テキストの設定」画面に文字を打ち込みます。
プレビューにチェックを入れて、フォントの設定、文字の大きさ20、
行間を決めます。
③ 「テキストエフェクト」にチェックを入れ、「設定」をクリックする。
④ 「テキストエフェクト」の設定画面が開く。
フレームカウントの「フレームイン」「フレームアウト」に60w入力、
「エフェクトの種類」を例として、「フレームイン」は「虹色に変化」を「フレーム
アウト」を「爆発」を選択する。
⑤ 「プレビュー」で内容を確認して、ONをクリックする。さらにOKする。


⑥ 左ペインに登録された。それを右クリック、「イベントに追加」をクリック。
⑦ 右ペインのテキストファイルを右クリック、プロパティをクリック。
⑧ 「イベントのプロパティ」で「フレームカウント」に126と入力、「描画位置」
「移動先」のXはともに80を入力、Yは126を入力する。
⑨ 「プレビュー」でみて確認し、「適用」をクリックする。
「保存」は2の6)に準じて行う。
           
* テキスト エフェクトの見本は下記をクリックしてご覧ください。
http://dl.dropbox.com/u/18525408/txthenkei.swf

上記以外にMP3のBGMをつける方法も教わったが、説明を省略します。

---------------------------------------------------------------------------------------------------------
教室内の光景です。
----------------------------------------------------------------------------------------------------------  
後  述

色々な無料のソフトがあるものです。
今回のParaFlaソフトでのFlashはこのようなことが出来るとの
基本的な勉強会で、予め作成された
空、山、太陽、雲のファイルを使用しての
Flash の基礎的な勉強会であった。

これらのアイコンや他のアイコンの作成には
Para Drawの画像作成ツールを使用する必要があります。

一番面白く興味があったのは、「テキストエフェクト」の
各種組合せの変化でした。

本日の講師を務められたらくさんは台風が接近している雨降りのなか、
個人のプロジェクターを持参いただいたこと、
また、時間一杯熱弁をふるって戴き有難うございました。

ご支援を戴いた棚橋知子さんには忙しくして戴きました。
相当なご指導をいただき、感謝を申し上げます。
-----------------------------------------------

次回の新技術研究会は12月14日です。
------------------------------------------------
記述と写真は:しんちゃん


2 件のコメント:

  1. しんちゃん
    分かりやすい活動報告で復習に役立ちます。
    教室で聞きもらしたParaDrawのことも教えていただきありがとうございました。しかし難しそうですので、ペイントで「機関車の煙」を作り、ParaFlaに使い、Dropboxに保存し、しんちゃんに教えていただいた、ブログに張り付けました。
    ストレインジャー

    返信削除
  2. ストレインジャーさん

    活動報告をここまで書けば、利用していただける方もおられますので、嬉しいです。

    ストレインジャーさんのブログを拝見しました。
    早速に吹き出しが動いておりましたですね。
    ついでに、機関車を切り抜き左から右へ動かして戴ければ
    嬉しいですがーーーー。

    しんちゃん

    返信削除