はじめまして、こんにちは。趣味は朝練のウエニシです。
既にweb上には業界の諸先輩方が書いておられるTipsなどが星の数ほどありますが、
上級者向けに書かれた記事などで内容が省略されていて、初心者や中級者にとってはもう少し詳しく説明されているとありがたいなあと思う事がよくあります。
自分自身もその一人で、調べたい事に関して説明しているサイトをいくつか見て、要約してまとめる事が多いです。ので、
そういったものを自分のメモの中で終わらせるのではなく、自分の備忘録的な意味も込めて、
このブログで公開していきたいと思います。
もちろんその他の事もいろいろ書いて行きたいと思っております！
記念すべきブログ1号目は、弊社の代表の木村が作りました、
複数のブロック要素の高さを、一行ごとに一番高い高さに揃えてくれるJavaScriptライブラリ「fixHeight.js」の事について書きたいと思います。
FLASHムービーの書き出し「パブリッシュ」
パブリッシュは、FLASHで作ったムービーを実際にある形式に書き出すことをいいます。
【ファイル】>【パブリッシュ設定】
Flash Playerのバージョンを選択します。（2007年9月時点のFlash Playerバージョン毎の普及率は、Flash Player 7...99.5%、Flash Player 8...99.0%、Flash Player 9...93.7%）
画質の調整を行えます。デフォルト値が80ですが、100にすると最大限に綺麗な画像で出力されます。
出力する形式についてチェックをいれます。WEBで公開する場合はswf、htmlにチェックをいれておくと良いでしょう。
形式で「HTML」にチェックが入っている場合に、HTMLに関する細かい設定をすることができます。画像の読み込みと、パスの読み込み
さて、ステージで画像を作る際に、外部からの画像をもってきたり、パスデータを読み込みたい場合が出てくると思います。ここでは、外部からの画像やパスの取り込み方について説明していきます。
画像の読み込み方
FLASHには、jpgやgif、アルファチャンネルつきのPNG画像などが読み込めます。
画像の読み込みの手順としては...
パスデータの読み込み
イラストレーターでつくったパスデータをFLASHに読み込みたい場合の手順は...
パスデータを読み込む場合、イラストレータのデータが、ある条件を満たしているとうまくいかないことがあるので、下記に挙げます。
などです。イラストレータのパスデータは極力シンプルなものにし、グラデーション等はFLASH側に読み込んでから、FLASH側で再設定するのが無難です。
手頃なモーションタイポグラフィー
WEBサイトでFLASHを設置するとき、せっかくFLASHで制作するのだからキャッチコピーなどの文字を動かしてみたい...でも具体的にどんな動きにすれば良いのかわからない...
今回は、そんなときに手頃につかえるモーションタイポグラフィーをいくつか紹介します。
マスク機能について
イラストレーターやフォトショップにも「マスク」機能があるように、FLASHにも「マスク」機能があります。FLASHのマスク機能は、イラストレーターやフォトショップのように、マスクの対象が静止画だけではなく、動的なものにもかけることができたり、マスク自身を動的に動かしたりできるので面白いです。
マスク機能の使い方
マスク機能の使い方は、前回のモーションガイドの使い方とほぼ同じで、レイヤーを選択して【タイプ】を「マスク」、「マスクの対象」にそれぞれ設定するだけです。マスクは応用すれば、とても変わった表現が可能になるので覚えておくとよいでしょう。
空を飛ぶ鳥の軌跡を操る
以前は、「ハネを羽ばたかせた鳥が空を飛ぶムービー」の作り方について簡単に説明しました。さて、第1章の最後は「モーションガイド」についてのレクチャーとなります
「モーションガイド」って？
モーションガイドとは、トゥイーンを使用する際に、合わせて使えるトゥイーンの軌跡を設定できる機能です。
前回の、鳥の体をトゥイーンで動かすところを思い浮かべて下さい。この場合、トゥイーンで始点と終点を決め、直線に鳥を飛ばしてもなんだか無機質な感じがしますよね。
では直線ではなく、曲線で動かすとどうでしょう。少しはそれっぽくなりそうです。
シンボルのおさらい
FLASH WORKSHOP 1-05でシンボルについて少し触れましたが、覚えているでしょうか。
●おさらい●
ステージで作った部品をまとめてシンボル化（F8または、【修正】>【シンボルに変換】>名前をつけ、【ムービークリップ】を選択してから【OK】）してライブラリに格納（これは自動的に格納されます）すると、シンボル化したアイテムをライブラリからドラッグ＆ドロップで、大量に複製することが可能でした。
さらに、シンボルのひとつを改造すると、複製されたすべてのシンボルに、改造が適応されました。
前回までは、ボールにトゥイーンをかけて、アニメーションの補完を手伝ってもらいました。
トゥイーンには大きく分けて、二つのトゥイーンがあります。
前回までのボールを動かす機能は「モーショントゥイーン」とよばれるトゥイーンです。
イージング
ボールが落下するとき、車が青信号になって動きだしたとき、雪山のてっぺんからそりを走らせたとき。 動きは徐々に「加速」します。
ボールが跳ね上がるとき、丸太が水底から水面へ浮かび上がるとき、電車が駅に停車するとき。 動きは徐々に「減速」します。
前回、シンボル（ムービークリップ）の開始点と終了点の間にモーショントゥイーンという機能をかけ、等速の動きを再現しましたが、覚えていますでしょうか。
FLASHではなんと、モーショントゥイーンの設定を変更する事で、「加速」「減速」を簡単に表現することができるのです！
今回は、前回のボールの動きにこの「イージング」を適応させ、あたかもボールが飛び跳ねているかのような動作を作ってみましょう。
トゥイーン機能
「トゥイーン」機能。それはフレーム〜フレーム間のシンボルの動きを予想して、アニメーションを自動的に作成してくれる機能です。
前回まで、弾むボールを作る目的でアニメーションの作り方を考えてきましたが、
（ボールなど、）1つのシンボルの動きを操作するのに、このトゥイーン機能は非常によく使えます。
↓そんなさっくり言われても、イメージがよく湧かないよ。というあなたに・・・↓
前回の記事では、FLASHでボールの弾む動きを作ってみよう！というところで話が止まっていました。さて、実際に弾む動きをFLASHで表現するとしたら・・・？
ボールの弾む動きを１フレーム１フレーム描くのには、あまりに無理がありますよね。
ボールがただの円であれば、まだ100フレーム分くらいは乗り切れる気がする・・・けれど、これがサッカーボールだったら？
前回では、フレームと時間の概念についてお話ししました。
「１つのフレーム」は、ぱらぱら漫画でいう、「１ページ」に該当するもので、タイムラインに沿った「フレームの配置」は、ページをめくる「タイミングを決めること」に該当します。
さて、このぱらぱら漫画ですが、（実際に作ったことのある人は分かると思うのですが）、意外と思った通りにキャラクターや物が動いてくれなくて困ったという経験はなかったでしょうか。
タイムラインとフレーム
まずは下の画面を見て下さい。
これはタイムラインと呼ばれる物で、右へ進めば進む程、時間が経過していきます。
ここに、「フレーム」と呼ばれる枠を作っていき、アニメーション等を表示させるタイミングを決定します。
（つまり…私達がよく目にするアニメーションがあのように動いて見えるのは、ぱらぱら漫画のように、いくつもの静止画が連続的に流れているからで、FLASHでは、このフレームを何個も作り、ぱらぱらするタイミングをタイムラインに沿ったフレームの配置で決めていくのです。）
FLASHを起動すると画面下側に表示される「プロパティウィンドウ」や、画面左側に表示される「ツールウィンドウ」の中の主なツールについて説明します。
プロパティウィンドウ
画面の下にあるプロパティウィンドウでは、シェイプの幅、高さ、X座標、Y座標や線の色／太さ／種類、塗りの色などが設定できます。
ここではFLASHで新規ドキュメントの作成やパブリッシュの設定、ステージサイズやフレームレートの設定、各操作パネルの名称などFLASHの基本的な使い方について説明します。
新規ドキュメントの作成
「ファイル」メニューから「新規...」を選択するかCommand+N（Windowsの場合はCtrl+N）で新規ドキュメントを作成できます。
STARRYWORKSのFLASH制作スタッフが社内のスタッフと、キムラの友人デザイナー向けにFLASH WORKSHOPを８月３０日（木）２０：００〜始めます。
今後、毎週続けていこうと思います。 復習や参加できなかった人、その他の将来WEBデザイナーを目指している人の役に立つよう、毎回やった内容をできる限り詳しく、このブログにアップしていく予定です。 基本的にIllustratorとPhotoshopを使いこなせる人を対象にしているので、FLASHの基本操作や簡単なアニメーションの作成は２回くらいで終わらせて、そこからActionScriptをじっくりやっていくつもりです。
まず、第一回目は以下の内容で考えてますが、時間が足らなければ残りを次回に実施します。
講師：キムラ、ウエッキー
参加予定者：ムライ、カメイ、テラウチ、タキイ、ヨシダ、コンちゃん、トンカ、ウラッチ
