FLASH8 Professional New Technology 新機能

FLASH 8 Professional New Technology

＿FLASH8 Professional 新機能の紹介と使い方（まだ２ページしか作ってません...）

　2005年10月12日水曜日未明、衝撃のデビューを果たしたFLASH８。今回のリリースは風化しつつあるMXから脱却したいという気持ちとスゴイ機能があるらしいという情報を聞きつけていたということもあって、自分もいち早く購入を決意し、製品を手にしました。でも、制作には時間がかかるし、全機能を把握するのは難しい．．．だったら、とりあえず全機能を使ってみようということで、こんな記事を作ることにしました。ますます「下手なものは作れないなぁ」と思わせられる製品FLASH8！コイツの新機能を余すことなく紹介できたらいいなぁと思います(すんごい難しい機能もありますので、たぶん無理)。さて、そんなわけで以下に目次を明記します。

＿記事の目次

　１．線

　２．塗りの変形

　３．オブジェクトの描画

　４．テキスト

　５．自動選択

　６．カラーミキサー

　７．フィルタ

　８．パネル

　９．タイムラインエフェクト

１０．９スライス

１１．環境設定

１２．ASOファイル

１３．ActionScript

　このコンテンツでは、上部に設置しているページ切り替えようのボタンを使ってページを移動するようになっています。このコンテンツがアクティブなっているのであれば、キーボードの矢印キー［Left Arrow］で前のページへ、［Right Arrow］で次のページへと移動できるようになっています。お好みの方法でページ切り替えを行って下さい。　ちなみにこの記事の目的は、近々発売されるであろう「おしえて！Macromedia Flash8」と勝手に張り合うためのものです。世の中に反発する愚か者を見下すかのような、冷ややかな目で、ご支援頂けたら幸いでございます。

＿１．線

　線の端の処理を決める［先端］プロパティには、なし、丸型、直線型が選択できます。細い線では違いがわかり辛いので、太い線で例を以下に示します。

　＿なし

　＿丸型

　＿直線型

　上記の例では、丸型だけが形状が違うということが明らかですが、なしの場合と直線型においても明らかな違いがあります。このことは、ダイレクト選択ツールで線を選択し、パスを表示した時にはっきりとわかります。

　このように、なしの場合はパスの終端がぴったりと線の先端となるように処理されているのに対して、直線型では線の太さの半分を加えた形で線の先端が処理されています。このタイプの違いがDesignする作業において、どのような影響を与えるのでしょうか？その答えを考えて見ましょう。例えば、多角形ツールで枠有りの四角を描いてから、辺として描画されていた線を削除したときはどうなるのかやってみます。二つの先端の違いはFig1.3のようになります。

　似たような二つですが、辺を削除したときは、なしの場合にすっきりした形状が現れます。それでは、直線型というのはどういうときに活路を見出すのでしょうか？それは、Fig1.4の赤い線をインクボトルツールで足したときの例を見るとわかりやすいですね。このように二つの線が交わるような四角を作る場合にすっきりするのは、直線型のようです。上記の例では、なしと直線型を併用することがDesignとしては優れたものになりそうです。

　線は後からでも思いのままに太さを変えられるというのが利点なのですが、線端の処理がうまくDesign出来ないので、塗りに変換して先端の処理をしたり、最初から塗りだけを使ったりするというのは多くのクリエイタが通ってきた道でした。今回のVersionUpによって、線をそのままの状態で利用する機会は増えそうです。

　＿なしと直線型を併用した例

　青い線がなし、赤い線が直線型。

赤い線を後から上に乗せたので、

綺麗に見えます。

　線ツール自体は、以前のバージョンから存在するツールですが、新たに次のような［線端］オプションが加わりました。オプションは線ツールを選択したときや線オブジェクトを選択したときに表示されるプロパティインスペクタにおいて、以下の部分から設定できます。

　前の項目で説明したとおり、線端を３つの方法で処理が出来るという選択肢が増えたのですが、［結合］オプションが加わり、線の結合部分の処理も選択肢が増えました。線の結合部分というのは、簡単に言ってしまうと折れ曲がっている部分や線の端が重なっているような部分のことです。結合の判定は、同じ線の種類であるという条件が付くようです。オプションは線ツールを選択したときや線オブジェクトを選択したときに表示されるプロパティインスペクタにおいて、以下の部分から設定できます。

_Fig1.6

　線の［結合］オプションにはマイター、丸型、ベベルの３種類があり、マイターを選択した場合は、結合部分のシャープさを調整することができます。以下にそれぞれの結合オプションを使った場合の例を示します。

＿マイター

＿丸型

＿ベベル

_Fig1.7

　マイターの場合、線の結合部分が角張った形状になります。念のためマイターのシャープさを調整する数値も入れてみましたが、値に1を入れた場合だけ、角が削り取られたような形状になりました。Fig1.6の＿マイター部分に描いた、1と記述した所の赤い色の線の角の部分をよく見てみるとわかると思います。2と記した、緑色の線は値を3として描いた、青色の四角と比べても何ら変化を感じられません。3以降同様で、線の太さを変えても変わり映えしません。かなり大きな数値を設定できることから、もっと何か変化を得られても良さそうなのですが...深追いは禁物なので、これ以上のことはここでは追求しません。

　丸型の場合、結合部分に丸みを感じられます。内側は角張った形状を保っております。多角形ツールの角丸半径の設定を行ったときとの違いは、わずかですがDesignを追求する人にとっては大きな違いであると感じられるのではないでしょうか。

　ベベルの場合は角が削り取られたような形状を感じられます。

劇的な変化を見せる機能ではありませんがDesignの繊細さ重要視した機能だと思いませんか？

　このセクションの最後の説明になりますが、この機能は線ツールの機能変更の中で最も劇的な変化をもたらした機能でありますし、最もお世話になる回数が多い機能であると思います。従来は線を拡大したり縮小したりすると線の太さも拡大縮小され、アニメーションの縁取りや輪郭に線を使っている場合、拡大や縮小によるトゥイーンやシンボルの再利用は、Designという概念を考慮した場合にはとても扱いづらい要素でもありました。革新的な変更です！線の［伸縮］オプションは線ツールを選択したときや線オブジェクトを選択したときに表示されるプロパティインスペクタにおいて、以下の部分から設定できます。では、実際にどのように変わったのか試してみましょう。

_Fig1.8

　［伸縮］オプションは、標準、水平方向、垂直方向、なしの４種類から選択できます。以下のそれぞれの伸縮オプションを用いた場合の例を示します。赤色の部分が線になっています。

何だコレｗ

＿標準

通常時

拡大後

縮小後

＿なし

＿水平方向

＿垂直方向

　標準の場合は、拡大するとバランスを保ったまま太くなりますし、縮小するとバランスを保ったまま細くなります。なしの場合は、線の太さを維持してくれるので、プロパティインスペクタで設定した線の太さが値によって厳密に管理出来ます。輪郭線の太さを一定の太さにしたいというシチュエーションの多いアニメーション制作には便利かもしれません。水平方向の場合は水平方向の拡大・縮小にあわせて線の太さが変化します。従って、縦横の比率を維持したまま拡大・縮小する分には標準の場合となんら変わりません。垂直方向の場合は、水平方向の場合の動作が垂直方向に変わるだけです。例をみてもわかるように拡大縮小をしていると線のバランスが悪いと感じるものがあります。そのような場合に、この機能を利用して線の太さを調整することが出来ます。

＿２．１．グラデーション・塗りの変形「線のグラデーション」

　線にも塗りと同様のグラデーションが適用できるようになりました。あまり利用用途は思いつかなかったのですが、WebDesignを行う場合やもっと繊細なDesign作業を行う場合には、使い甲斐のある機能だと思います。使い方は塗りの場合と同様ですが、実際にやってみましょう。

_Fig2.1

①カラーミキサーパネルを展開します。（カラーミキサーパネルは標準状態でウィンドウに配置されているパネルですが、表示されていない場合は、メニューの[ウィンドウ]-[カラーミキサー]を選択して、パネルを表示します。）以降はパネルの展開について図解しません。

②線のカラー調整付近をクリックするか、線のカラーを一度選択するなどして、線のカラー調整をアクティブした状態にします。アクティブになっている状態を確認した上で、タイプ属性コンボボックスから、線状もしくは、放射状を選択するとグラデーションのかかった線を描くことが出来ます。ここでは線状を選択することにします。放射状を選択した場合については、このあとで説明します。

説明文書作るのって大変過ぎるのに、

なんでこんなに細かく説明してんだっけ、おいら…

ゴミ人間、よねっと氏

つづかない．．（うそ

_Fig2.0

展開する

このように線のカラー調整部分がへこんでいる状態をアクティブになっている状態とここでは表現しています。

今回は、

線状を選択します。

Click!!

＿２．１．グラデーション・塗りの変形「線のグラデーション」（続き）

③カラーミキサーパネルがFig2.2のような状態に変わります。パネルの項目のオーバーフローとリニアRGBが今回追加された機能です。グラデーションの設定に関する操作方法についても改良が見られます。この項目の目的は線のグラデーションを試してみるのことなので、グラデーションの新機能に関する説明は次の項目以降で説明します。

　ここでは、グラデーションの色を赤、オレンジ、白の３段階で設定してみます。このような設定を行うには、Fig2.3のグラデーション設定用の帯の鉛筆マークを調整します。デフォルトでは黒から白への２段階のグラデーション設定が表示されているはずなので、今回は左側の鉛筆マークを一度クリックして、#990000という値が表示されるところをパレットから選択しました。真ん中の鉛筆マークは表示されていないので、追加したい部分でマウスをクリックし、鉛筆マークを追加し、#FF6600という値が表示されるところをパレットから選択しました。鉛筆マークを追加しすぎた場合は、削除したい鉛筆マークをグラデーション見本へドラッグすると取り除くことが出来ます。

　説明と図解だけではわからない人のためにムービーも用意しました。説明がわからないという人は、「Mov2.0を見る」をクリックしてムービーを確認してみて下さい。

グラデーション見本

④Fig2.4の矩形ツールで、塗りは赤色を選択します。線端のオプションはなしで線の太さは8を選択して長方形を描きます。描いた後で両端の線は消してしまいます。ついでだから、何かテキストも付けてみましょう。そのようにして出来上がったのがFig2.5のような長方形です。線のグラデーションを使えば、作業効率も上がる場面がありそうですね。

デザインする楽しさが広がりましたね。

_Fig2.2

_Fig2.4

_Fig2.3

_Fig2.5

New

Attribute！

なにもなかった中間部分をクリックすると新たに鉛筆マークが登録されます。鉛筆マークは横にスライドもできます。

鉛筆マークをグラデーション見本に

ドラッグすると鉛筆マークが消えます。

グラデーション設定用の帯にあるこの鉛筆

マークを選択してから任意の色をパレットから設定すると基点の色としてグラデーションの描画が設定されます。

＿２．２．グラデーション・塗りの変形「塗りの変形（焦点）」

　主にグラデーション・ビットマップ塗りの設定を変更する塗りの変形ツールにも追加の機能があります。カラーミキサーの[タイプ]属性で、放射状を選択した場合の塗りの変形ツールに、焦点を調整するハンドルが追加されました。焦点のハンドルで放射状のグラデーションに偏りが表現できるようになったと言えば、焦点の意味がわかりやすいのではないでしょうか？ん、余計わかりにくい？例えばFig2.6のような絵ではライトの効果を焦点を使って大げさに表現してみました。これは焦点のハンドルを調整したので、グラデーションに偏りが表現できています。放射状グラデーションの中心点を動かした場合は、Fig2.7のように、車の中心のあたりがもっと明るくなります。焦点のハンドルはグラデーションの偏りを設定していることに注意してください。

_Fig2.7

_Fig2.6

　大事なことはもう言えたので、これ以上は面倒だし、次の説明に移りたいのですが、そうもいかないので実際に焦点のハンドルを動かしてみましょう！今回は上の絵のライトの部分だけを描いてみます。一連の動作は動画にしてみました。説明と図解を読んでもよくわからない人は[Mov2.1をみる]をクリックしてみて下さい。

①黒い長方形を描いたレイヤーの上のレイヤーに淡い黄色から透明の淡い黄色になっていくような放射状グラデーションの楕円を描きます。このとき楕円の線は無しにします。放射状グラデーションは前の項目で線状と選択したカラーミキサーパネルの[タイプ]属性で選択できます。Fig2.8の塗りの変形ツールを使って、描いたグラデーション状の楕円をクリックFig2.9のような塗りの変形ハンドルが表示されます。焦点を調整するハンドルは三角のマークのものです。

こんな挿絵を入れなければいけないことも考えると、この先の説明書作りが思いやられますね。クォリティ低っ！！

②Fig2.10のように変化の調子を全体的にキツクしたいので、真っ直ぐな矢印が表示される丸いマークのハンドルを円の内側に向かってドラッグします。縦が楕円の中に収まるくらいまで小さくします。次にハンドルの四角マークを円の外側ドラッグして横方向の変化が緩やかになるグラデーションにします。最後に焦点を調整する三角マークを左にドラッグします。表示されている線上での焦点の位置が調整できます。違う方向に焦点を動かすには、回転する矢印が表示される丸いマークのハンドルで塗りの適用設定の全体を回転させる必要があります。必要に応じて、グラデーションの中心にある丸いマークのハンドルで中心点も調整して下さい。

　多段階調の表現をするための主要なツールにより柔軟な設定が増えたことで、効率よく複雑な色彩表現が出来るようになりました。特に例のような単純なライトの表現は、１つのオブジェクトだけで表現できることが多くなりそうです。むしろ、簡単だからこそ、今まではやらなかった表現に誰でも挑戦できるということなのかもしれません。

_Fig2.8

_Fig2.9

_Fig2.10

ｘ４倍

ｘ１倍

＿２．３．グラデーション・塗りの変形「オーバーフロー」

　グラデーションは塗りの設定で変化量を調整しますが、塗りや線の範囲のずっと内側に変化の終端があった場合のグラデーションの効果が設定出来るようになりました。Fig2.11のカラーミキサーパネルにある[オーバーフロー]属性で設定することができます。今までは塗りの設定の範囲外はグラデーション効果なし(つまり、終端の色から変化なし)の状態しか提供されていませんでしたが、新たに繰り返しグラデーションと折り返しグラデーションが増えました。これまでは、このような単調な繰り返しや折り返しのグラデーションを表現するするためにはグラデーションの基点となる鉛筆マークを沢山たしたり、塗りを何回かにわけて描くなどの手間が必要でした。ここでは円形の太い線に放射状の繰り返しグラデーションと折り返しグラデーションをつけたものを描いてみたいと思います。

_Fig2.11

①Fig2.12の楕円ツールで塗りの色は無しにして線だけの円を描きます。線の設定は太さ10を選択し、グラデーションは白と白色の透明を選択しました。Fig2.13のようにオーバーフローは、リストの上から二つ目の折り返しを選択します。白色のグラデーションを確認するために背景には青色の塗りを用意しておきました。描いた円状の線はFig2.14のようになりました。

　オーバフローの種類は３つです。オーバフロー属性のコンボボックスに表示されているリストの上から順に、効果なし、折り返しグラデーション、繰り返しグラデーションとなっています。

②塗りの変形ツールでまっすぐな矢印マークの丸いハンドルを円の内側に移動させて、塗りの変形の設定範囲を小さくします。Fig2.15のようになります。線を選択して、Fig2.16のオーバーフローを繰り返しに選びなおすと、Fig2.17のようになりました。説明と図解でわからない人はMov2.2をみるをクリックしてみて下さい。うまく使えば簡単に面白いグラデーションが作れそうです。

_Fig2.13

_Fig2.15

_Fig2.17

_Fig2.16

_Fig2.14

せまいっ！

_Fig2.12

楕円ツール

線を選択した状態で上から三つ目

繰り返しグラデ－ションを選択する。

見事な

気持ち悪い図形

が出来ました。

楕円ツール

上から二つ目

折り返しグラデ－ションを選択する。

正円を描く。

塗りの変形で、

設定範囲を

小さくする。

＿２．４．グラデーション・塗りの変形「リニアRGB」

_Fig2.19

　リニアRGBというグラデーションのモードが追加されました。これは広くはSVGと呼ばれている技術のことを示しているそうです。実は自分はFLASH8で始めてSVGという規格を知りました。SVGとは、Scarable Vector Graphicsの略でXMLで定義される滑らかなベクターグラフィックの技術だと言うことです。特徴としては、拡大しても品質が劣化しないということがあげられます。もっと詳しくSVGの技術を知りたい方はAdobeSystems Inc.のSVGビューワをインストールしてSVGデモコンテンツを確認してみて下さい。劣化の無いWebグラフィックスにうなづくはずです。リニアRGBを利用するには、Fig2.18に示したカラーミキサーパネルのリニアRGB属性のチェックボックスにチェックを入れるだけです。通常のグラデーションとの違いをFig2.19に示します。

従来型

リニアRGB(Scarable Vector Graphics)

_Fig2.18

　上記のように同じグラデーションでも描画方法の違いがあるため全く違うようなグラデーションになります。従来のものが駄目ということはありませんが、リニアRGBの方が滑らかな変化を表現できているようです。さすがは新しい規格です。しっかりしてる！

＿２．５．グラデーション・塗りの変形「パレットの利用」

　グラデーションの色を選択するときにカラーパレットやスポイトツールが利用できるようになりました。色の基点をきめるグラデーション設定用の帯にある鉛筆マークをダブルクリックすることでパレットが表示され、色の選択がスポイトツールで行えるようになりました。色の選択はパレットからではなくオーサリングツール画面上のどこの色でも取得できるようにりました。ダブルクリックしたときの画面はMov2.3を見るで確認できます。

＿３．１．オブジェクトの描画

_Fig3.2

　各種描画ツール(具体的には線・ペン・楕円・矩形・塗り・鉛筆)を選択時にFig3.1のようなオプションボタン「オブジェクトの描画」が追加されました。従来、描画ツールを使って、同じレイヤーに描いたものはグループ化などをしない限り、上書きされていくものでした。つまり、既に存在する塗りの同じレイヤーの同じ場所に改めて塗りを描くと元にあった塗りは消えてしまうということです。このことを上手く利用した描画方法もFLASHのテクニックとして存在します。このオブジェクトの描画オプションを選択すると、上書きされずに、描いた瞬間から、あたかもグループ化した塗りのように扱われます。言葉で表現するとこのように説明するしかないわけですが、これではさっぱりわからないと思うので、Fig3.2にオブジェクトの描画オプションを使った場合と使っていない場合の違いについて一例を示したいと思います。

_Fig3.1

　上記のようにオブジェクト描画オプションは重なりをあとで調整するような場合に最適です。従来はこれだけの作業をするためだけにレイヤーを作ったりしていたということを考えれば、この機能はFLASHオーサリングツール上での描画をしやすくしている新機能であると言えるでしょう。今まで、使わなくてもそれなりにやれていたということもあって、使いこなせないというクリエイターも多いのではないでしょうか。便利な機能なのですが、ついついレイヤーを増やしてしまいがちですね。因みにオブジェクトの描画オプション有りで描かれたものを選択すると、塗りや線の大きさの最外周に水色の線が表示されます。まるでグループ化された塗りや線のようになります。オブジェクト描画オプションを適用していない通常の塗りや線に変換するには、オブジェクト描画されたものを選択した状態でメニューの[修正]-[分解]を選択するか、「Ctrl＋B」ショートカットキーを押すとよいです。逆の変換はメニューの[修正]-[オブジェクトの結合]-[結合]です。

＿３．２．オブジェクトの描画を重ね合わせた状態からの編集

オブジェクトの描画オプション無しの場合

オブジェクトの描画オプション有りの場合

重ねて描画してから塗りを移動すると

重なっていた部分が消える

重ねて描画してから塗りを移動すると

重なっていた部分は元通りの状態が保持されている。

　オブジェクトの描画オプションを使う最大の利点ともいえる機能だと思います。これを知っていれば、オブジェクトの描画オプションボタンをクリックする回数が増えること請け合いであります。実は、重ね合わせた状態からの編集機能も追加されています。重ね合わせたオブジェクトの描画オプションを伴って作成された塗りや線同士を重ね合わせると「結合・交差・型抜き・切抜き」の４つの重ね合わせ編集を行うことが出来ます。実際に重ね合わせた状態からの編集をやってみた結果はFig3.3のようになります。

結合

交差

型抜き

切り抜き

_Fig3.3

　二つのオブジェクトを選択した状態でメニューの

[修正]-[オブジェクトの結合]-[結合]　結合は二つのオブジェクトをそのままの形でオブジェクト化、ひとつのオブジェクトに変換します。

[修正]-[オブジェクトの結合]-[交差]　交差は重なっている部分だけを残した状態のものになります。

[修正]-[オブジェクトの結合]-[型抜き]型抜きは上から被せたオブジェクトに覆われていない部分が残ります。

[修正]-[オブジェクトの結合]-[切抜き]切抜きは上から被せたオブジェクトに覆われている部分が残ります。

交差と切抜きは今までには簡単に実現できなかった表現だと思います。うまく使ってみるのも面白いでしょう。

_Fig1.9

_Fig1.1

_Fig1.2

_Fig1.3

_Fig1.4

_Fig1.5

_Fig1.0

＿４．１．テキストフォントのレンダリング設定

　テキストフォントのレンダリング設定が強化されています。具体的には動きを優先させた簡易アンチエイリアスとカスタムアンチエイリアスというものが追加されたということになります。テキストツールを使っている状態・テキストオブジェクト選択している状態からプロパティインスペクタのFig4.1のようなコンボボックスからその種類を設定することができます。まずは、基本からおさらいするためにFig4.2にアンチエイリアステキストとビットマップテキストの違いを示します。

_Fig4.1

_Fig4.3

　と、このように形状については良く見れば、アンチエイリアスが若干、雑に見えるのがアニメーション優先の方になると思います別Windowで用意したFig4.4も微妙ですが、若干スムースに動いているのはアニメーション優先の方であると見えます。ちりも積もれば山となるということでありまして、大量にこのような処理を使い始めると、その差は顕著になってくるものと思われます。質の高いアニメーション作成を目ざすならば、使い分けてみてはいかがでしょうか？次のページでは、カスタムアンチエイリアスについて記述したいと思います。

ビットマップテキストはフォントの曲線部分をごまかさないので、ギザギザが目立ちます。

_Fig4.2

プ

アンチエイリアステキストはフォントの曲線部分が綺麗に見えるように補完する処理をするので

それなりに美しく見えます(それぞれの人の感性にもよります。)

麗

ビットマップテキスト

(アンチエイリアスなし）

アンチエイリアステキスト

(アンチエイリアスあり)

　上記のように、アンチエイリアスは文字を一文字ごとに丁寧な処理が施されて、見栄えをよくするように働きかけています。しかし、テキストが動いているときには見栄えはそれほど重要ではないときがあります。ある程度読めて、それでいて美しさを損なわないくらいであり、アンチエイリアス処理にかかる負荷を下げつつ、スムースな動きを表現できることがベストだと考える場合があるからです。それを実現したのが新機能の「アンチエイリアス(アニメーション優先)」という設定です。さて、この機能を使うと、どれ位スムースで、どれ位美しくなくなるのかを確認することにしてみましょう。形状比較についてはFig4.3、動きの比較についてはFig4.4（別Windowの起動が必要です）を用意しました。

アンチエイリアス(読みやすさ優先)

アンチエイリアス(アニメーション優先)

＿４．１．テキストフォントのレンダリング設定（続き）

　テキストフォントのレンダリング設定として追加された、もう一つの設定カスタムアンチエイリアスでは、文字の太さや、シャープの度合いが簡単に設定できます。レンダリングタイプからカスタムアンチエイリアス...を選択するとFig4.5のような設定用のダイアログボックスが表示されます。ダイアログで表示された中の文字の太さとシャープさの二つの属性をスライダを動かして調整するか、数値を直接入力して設定します。文字の太さの値は-200～200の範囲で設定が可能で大きいほど太くなり、値が小さいほど細くなります。文字を大きく拡大すると線が太くなるので、大きな字で細い線がほしい時にとても便利です。FlashType(Flash8から導入されている再現性を向上した映像作成時のステージプレビューシステム機能のこと)の問題のせいか、オーサリングツール上の見た目とパブリッシュしたときの見え方が大きく異なることに注意しながら使ってみてください。また、シャープの度合いについての値も-400～400の範囲で設定ができ、値が大きいほどシャープになり、値が小さいほどぼやけたようになります。つまりアンチエイリアスがない状態が値の最大値のときの状態、アンチエイリアスが過度にかかった状態が値の最小値のときの状態となります。Fig4.6に具体的な例を示します。Mov4.1に具体的な設定手順につい明示します。言葉と図の説明でいまいちわからなかったという人は確認してみて下さい。

　上記のように、カスタムアンチエイリアスではアンチエイリアスをかける度合いを柔軟に設定することができます。オプションとして文字の太さが調整できる機能があるというところが面白い機能かもしれません。Fig4.5を見るとActionScriptパラメータなるものが、ダイアログボックスは調整できない値として表示されます。この値は既に存在するテキストを選択しているときに値が表示されるようになっています。FLASHのマニュアルを読むとなにやら専門的な用語で小難しく説明されていますが、要するにアクションスクリプトで設定可能な値でフォントアウトラインの文字内側という概念と外側という概念のラインがあって、その差分が文字の太さだということに他ならないのだとそのようなことを言っているようです。アクションスクリプトでこの設定を実施する方法については、後ほど、アクションスクリプトの項で解説できたらいいなぁなんて思っています。ことなかれ後回し主義。つうか、こんなアクションスクリプト使ったこと無いのでこれから勉強しますね。

_Fig4.5

_Fig4.6

ム

タ

ス

カ

を

さ

太

の

字

文

ム

タ

ス

カ

を

さ

プ

ー

ャ

シ

-200

200

-400

＿５．１．高画質ビットマップ処理

　ビットマップのレンダリング性能が格段に向上しています。高画質ビットマップ処理が必要なシーンで非常に有効な機能です。具体的にはどれほど違う画質が再現できるのかということを比較するためにfig5.1を用意しました。

_Fig5.1

原画

拡大

Flash8

Flash7以前

Flash8(高解像度の原画をFLASHで縮小)

　上記のようにFlash8のレンダリング技術は美しい表現処理をするため画像拡大時にも圧倒的な滑らかさを保持します。おまけで一番右の列のサンプルを作ってみたのですが、残念ながら高解像度の原画をFLASH上で縮小した場合の表示は少し雑なように感じます(感性にもよります)。今回のバージョンにおいても出来るだけ、主に表示を行うサイズと等倍になるように外部編集ツールで拡大縮小した画像を作成した後でFLASHに取り込んだ方が懸命なようです。拡大縮小したときの効果のバランスについても熟考する必要がありそうです。この機能についてはユーザは特に意識する必要なく使われる機能でありますので、知識として理解しておくことが必要なようです。

＿５．２．ビットマップキャッシュ

　ビットマップキャッシュという概念が増えました。これはビットマップ自体をキャッシュしておくという意味ではなく、ベクターデータのような再描画が必要なムービークリップをビットマップ化してメモリ空間にキャッシュしておくという機能なのです。これはベクターデータで作った背景などの複雑なムービークリップに有効です。ビットマップ化するのが目的なので、ムービークリップ内部には動きがないようなものに適用するのが普通です。間違えた使い方をするとかえってレスポンスが悪くなることに注意して下さい。テキストファイルのスクロールや大量に再利用するベクターデータにも有効です。ビットマップキャッシュとして利用するための設定はビットマップ化したいムービークリップもしくはボタンクリップを選択した状態でプロパティインスペクタのランタイムビットマップキャッシュを利用するというFig5.2の部分にチェックを入れるだけです。簡単に使用できるものですが、よく考えて使わないとかえって逆効果になるケースが多いです。ビットマップキャッシュ化したデータと通常のベクターデータを合わせたムービークリップを作成すると更にメモリ使用量は増大しま

_Fig5.2

す。CPUの演算処理回数も増加するケースもあります。使い方を間違わないよう今一度、FLASHのマニュアルを読み返すくらいの慎重さが必要です。しかし、うまく使えば、アニメーションに劇的な効果を生み出せます。

＿６．１．フィルタ（概要）

　ようやく、Flash8の革新的な機能の説明までたどり着けました。最もエキサイティングな新機能であるフィルタについて説明いたします。これを記述している２月２７日時点、発売されてから、かれこれ４ヶ月も経過しているので、知らない人はいないであろう機能の一つになっておりまして、なんとも今更な感が否めません。

　フィルタとは、グラフィック編集ツールでいうところの色眼鏡に相当する部分で、このフィルタとよばれている機能をしかけることによって、結果的にはエフェクト(視覚効果)がかけられた状態に変化することになります。Flash8で扱えるフィルタにはドロップシャドウ・ぼかし・グロー・ベベル・グラデーショングロー・グラデーションベベル・カラー効果の６種類のフィルタが用意されています。一般のグラフィック編集ツールとは違って、動的に変化する調子を変えることができる所がFlash8でのフィルタの大いなる魅力になっています。フィルタ効果をアニメーションするためには従来は何枚ものビットマップを予め、用意しておく必要がありました。少し筒変化を加えた程度の些細な違いしか無くても、この作業は強いられたのです。この新機能によって、その途方も無い作業から開放されたのです。フィルタを設定するにはフィルタをかけるムービークリップやボタンクリップ、グラフィックを選択した状態で、Fig6.1のフィルタパネルを開き、緑色の＋ボタンを押して表示されるメニューから挿入するフィルタの種類を選択するだけです。詳細な手順および各種フィルタの詳細な効果については後で紹介しますので、ここではフィルタパネルだけを図で示すことにします。Fig6.2にそれぞれのフィルタを選択したときのグラフィックの変化を例で示します。ちなみにベベルには淵（ふち）という意味があり、オブジェクトの淵を処理するフィルタを示します。グローには輝くという意味があり、放射輝度というものを追加し発光しているように処理する(オブジェクト周辺処理)フィルタを示します。このグローとベベルの処理およびドロップシャドウの処理についてはベクターオブジェクトの要素を含むムービークリップに適用するのが通常です。あとのフィルタはビットマップにもベクターオブジェクトにも共通して利用できるものです。

_Fig6.2

原画

ぼかし

カラー効果

_Fig6.1

ドロップシャドウ

グロー

グラデーショングロー

グラデーションベベル

ベベル

プロパティインスペクタパネルにあるフィルタタブをクリックしたときの画面

　上記のように、原画をもとに様々な効果を与えることが出来ます。グラデーショングローはグローの拡張版、グラデーションベベルはベベルの拡張版と考えると実際には５種類のフィルタということになりますが、それでもやはり、従来にはなかった機能だけに魅力的なフィルタです。ここでは示したものは、一例に過ぎません。各種フィルタには便利な属性が用意されていて、それらを利用すれば、もっと魅力的な表現も可能です。それでは、次ページ以降でフィルタの詳細な使い方と各種フィルタの詳細について解説します。

＿６．２．フィルタ（利用方法）

　例えば、ムービークリップにぼかしのフィルタを適用するには、適用するムービークリップを選択した状態で、前項で紹介したフィルタパネルのFig6.3－①のような[＋]マークボタンを選択して表示されるメニューで、Fig6.4－①のフィルタ群からぼかしを選択します。これが基本的なフィルタの適用方法です。同様の手順でぼかしの掛かったムービークリップにカラー調整のフィルタ適用します。このように、フィルタはいくつでも複合してフィルタ処理をすることが可能です。一つ一つのフィルタの効果を確認するため、一時的に所望のフィルタを無効化することができます。無効にするにはFig6.5－①のフィルタ有効無効チェック部分をクリックし、Fig6.5－②のフィルタの無効を示すマークの状態にします。もう一度クリックするとFig6.5－①のようなフィルタの有効を示すマークの状態に戻ります。一つのクリップに掛かっている全てのフィルタに対して一括して無効化するには[＋]マークボタンを選択して表示されるメニューで、Fig6.4－②の[全てを無効にする]を選択します。全てを有効にするにはFig6.4－③の「全てを有効にする」を選択します。フィルタを一時的に無効にするのではなく、削除する場合には、Fig6.5－③のように削除したいフィルタを選択した状態にしてFig6.3－②の[－]マークボタンを選択します。全てのフィルタを一括して削除するには[＋]マークボタンを選択して表示されるメニューで、Fig6.4－④の[全てを削除する]を選択します。また、幾つかのフィルタを挿入した複雑なフィルタ設定やフィルタ属性をカスタマイズした状態をプリセットとして保存し、何度でも再利用することができます。プリセットとして保存したいフィルタセットである場合には[＋]マークボタンを選択して表示されるメニューで、Fig6.4－⑤の[プリセット]-[名前を付けて保存．．．]を選択してプリセットを保存します。表示されたFig6.6のプリセット名入力ダイアログボックスで名前を入力してOKボタンを押下します。プリセット名を変更するには、Fig6.4－⑥の[プリセット]-[名前を変更．．．]を選択します。表示されたFig6.7のプリセット名変更ダイアログボックスで名前を変更するプリセットをダブルクリックして編集状態にし、名前を変更して、[名前を変更]ボタンを押下します。プリセット名を削除するにはFig6.4－⑥の[プリセット]-[削除．．．]を選択します。表示されたFig6.8のプリセット削除ダイアログボックスで削除するプリセットを選択した状態にし、[削除]ボタンを押下します。保存したプリセットはFig6.4－⑧の部分に表示されるので、所望のプリセットを一覧から選択するだけで保存していたプリセットの設定が適用されます。言葉と図の説明だけで理解できなかった方はMov6.1を確認してみて下さい。

_Fig6.3

_Fig6.4

_Fig6.5

_Fig6.7

_Fig6.8

_Fig6.6

項目をダブルクリックすると

上のような編集モードに

なるので名前を変更してから

名前を変更ボタンを押す。

削除する項目を選択してから

削除ボタンを押す。

保存

削除

変更

プリセット名を入力して、

ＯＫボタンを押す。

＿６．３．フィルタ（ぼかし）

　ここからは一つ一つのフィルタで表現できることを確認していきます。各フィルタにはそれぞれの属性が用意されています。FLASHの性能を最大限に引き出すために、軽く目を通して、ひととおり理解しておきましょう。

　Fig6.9のに示すとおりフィルタのぼかしには３つの属性が用意されています。水平方向のぼかし量、垂直方向のぼかし量、そして画質です。文字通り、水平方向のぼかし量は横方向のぼかし度合い、垂直方向のぼかし量は縦方向のぼかし度合いを設定し、画質はその精度を設定することになります。Fig6.10およびFig6.11に各属性を様々な設定にしてみた例を示します。

_Fig6.9

_Fig6.10

_Fig6.11

　上の例のようにぼかしはピントがずれているときの映像によく似ていることから遠近感やフォーカスずれを表現するために利用することが出来るほか、水平方向のぼかし量、垂直方向のぼかし量をそれぞれで設定することで、動きに残像をつけるような効果を表現できます。Mov6.2およびMov6.3にそれらの効果を使った例を示します。例のようなフィルタを使ったトゥイーンアニメーションについてはこの項の最後に説明します。

　各属性の設定を行うには、ぼかし量についてはテキスト入力もしくはスライダを操作することでの設定が可能でFig6.9－①のかぎマークをクリックすると水平方向と垂直方向が常に同じ値になるように連動して変化させることができます。水平と垂直の値が異なる状態でかぎマークをクリックすると水平方向に設定されている値が垂直方向の値となって合わせられます。画質はコンボボックスから低・中・高のいずかを選択します。言葉の説明だけでは実際の操作方法について、理解できないという人はMov6.4を確認してみて下さい。

３

水平

低

中

高

画質

_Mov6.2

_Mov6.3

３

水平

３

低

中

高

画質

５

水平

垂直

＿６．４．フィルタ（カラー調整）

　Fig6.12のに示すとおりフィルタのカラー調整には４つの属性が用意されています。明度、コントラスト、彩度、色相です。これらの４つの属性がどのような効果をもたらすのかを示したのがFig6.13のとおりです。文字通りの属性ですが、グラフィック用語にうといという人のために念のため説明しますと、明度は「暗い～明るい」、コントラストは明るい色と暗い色の差をどれくらい強調するかを示し「同一色化～白色部分と黒色部分ができるほどに強調」、彩度は「白黒表現～極めて原色表現」、色相は「色のシフト表現で最大値と最小値は同じ色」になります。前項までで、パネル操作には概ね理解を得られたと思いますので、ここからはパネルの操作説明は省略します。

-100

-60

値

-30

_Fig6.12

100

　上記のような表現ができます。色相の値の範囲は-180～180になっています。おそらく色相環を360度として表現したときに都合がよいからだと思います。色相環についての詳しい情報はマンセル色相環がもっともポピュラーな色相環ですので、この言葉を調べてみるとよいです。属性を組み合わせることもできますので、カラー調整次第で一つのオブジェクトが128の3乗×180=3億7748万7360通り！に表現できます。とは言うものの実際にデザインする場合にはこの3億7748万7360通りからひとつを素早く決めなくてはなりません。あるシーンで必要となるカラー調整はほんの一握りの組み合わせだと思います。明度は白みと黒みの調整、コントラストは色の違いの凸凹加減をまったいらにするか、激しい凹凸にするかという調整と考えるとよいですが、彩度は少し考え方が難しいでしょう。値を低くすれば白黒(無彩色)になり、値を高くすれば、ある色相においてもっとも高い鮮やかさをもつ色になります。この色こそが最大の彩度で適用される色です。この説明でも明度と彩度の違いがわからなかった人はマンセル色立体について調べてみるとよいでしょう。

_Fig6.13

-100

-60

-30

値

明度

100

コント

　ラスト

彩度

色相

＿６．５．フィルタ（ドロップシャドウ）

　Fig6.14に示すとおりフィルタのドロップシャドウには10もの属性が用意されています。シャドウとは影のことで、原画そっくりの影を属性値に基づいて、表現できます。ぼかし-水平・垂直はシャドウのぼかし量を調整します。強度はシャドウの濃さを調整します。画質はシャドウの精度を調整します。カラーでシャドウの色を調整し、角度ではシャドウの角度、幅ではオブジェクト(原画)とシャドウの距離を調整します、ノックアウトはOnにすると原画を透明で切抜きます、このとき生成されたシャドウ自身も切り抜かれます。シャドウ(内側)をOnにするとオブジェクトのある部分が落とし込まれたように見立ててドロップシャドウを生成します。オブジェクトを隠すにするとノックアウトのように原画を透明に切り抜きますが、ドロップシャドウで生成されたものは切り抜きません。これがノックアウトとオブジェクトを隠すの違いです。ノックアウトとオブジェクトを隠すの両方にチェックをいれた場合はもちろんノックアウトが優先されるような結果になります。これはオブジェクトを隠すという機能が原画を非表示にするだけの機能だからです。いくつかの使用例をFig6.15に示します。

_Fig6.14

　上記のように様々な影に関する表現ができます。平面状に投影するような影しか作れませんが、応用すると太陽の光をうけたような影を表現したりすることも可能です。オブジェクトを隠した影のムービークリップを地面を這わせるようにするとよさそうです。ここでは基本的な使い方しか説明する気が無いので、この程度の紹介に留めます。あなたの発想力でドロップシャドウの効果をさらに引き出してみて！影の色設定もできるので、影のような効果を必要とするものを「うまく」、「素早く」、「華麗」にデザインすることが出来るはずです。

_Fig6.15

シャドウ内側をOnにした場合に

文字の色に合わせたシャドウの

色を選択してみる例

※原画は隠してあります。

ぼかし量

水平 0

垂直 10

ぼかし量

水平 10

垂直 0

強度

100%

強度

30%

強度

1000%

ノックアウト

ぼかし量を大きく変化させたときの違い

強度を大きく変化させたときの違い

画質を変化させたときの違い

画質

低

画質

中

画質

高

※原画はノックアウトにしてあります。

角度

45°

角度

135°

角度

315°

角度

225°

角度を大きく変化させたときの違い

※原画カラーを着色してあります

幅

-5

幅

幅を大きく変化させたときの違い

カラーを調整したときの例

下地の色に合わせたシャドウの

色を選択してみる例

シャドウのチェックボックス属性利用時の比較

原画

ノックアウト＋シャドウ(内側)

オブジェクトを隠す

＿６．６．フィルタ（グロー）

　Fig6.16に示すとおりフィルタのグローには7つの属性が用意されています。グローとは輝きのことですが、放射輝度を表現して、あたかもオブジェクト(原画)が輝いているかのように効果をあたえるほか、従来機能のソフトエッジよりなめらかなソフトエッジを効果を表現できます。フィルタはビットマップ画像として処理され表現されますが、従来のソフトエッジはベクターのみで表現しますから、まだ利用価値はありそうです。各属性では以下に明記するような調整ができます。ぼかし-水平・垂直はグローのぼかし量を調整します。強度はグローの濃さを調整します。画質はグローの精度を調整します。カラーでグローの色を調整し、ノックアウトはOnにすると原画を透明で切抜きます、このとき生成されたグロー自身は切り抜かれません。このようにノックアウトはドロップシャドウのときと扱いが違いますが、グロー処理の性質上、オブジェクトをまたぐような処理ではないために、ノックアウトこそが、オブジェクトを隠す処理にしてしまって、オブジェクトを隠すという機能はいらないからです。ノックアウトがいらない機能のようにも感じますが、この辺りの統一性のなさは自分の知るところではありません。グロー(内側)をOnにするとオブジェクトのある側に向かってグローを生成します。発光現象を表現するためのものなので、背景を黒色系にしたほうが効果は引き立つでしょう。もちろん自然界では明るいところで光っているものもありますので、微妙な表現を行うためには、背景色が何色であるかは問いません。表現者の裁量によります。いくつかの使用例をFig6.17に示します。

_Fig6.16

　上記のように様々な発光体に関する表現ができます。カラー調整したときの例のように発光体のような表現をすることも可能です。これは色の扱いに関する感覚を研ぎ澄まさないといけないですが、慣れてくると面白い具合に複雑な表現が簡単に出来るようになってきます。グローだけでうまくいかないときはぼかしフィルタと複合してみるとか、試行錯誤してみて下さい。そして、複合フィルタで素敵な表現を見つけたら、先の項目でに紹介した方法でフィルタをプリセット化しておくと作業効率は上がるでしょう。グローだけで自然界の現象を表現するのは少し難しいので、グロー独特の持ち味をデザインに生かしてみるのも面白い使い方だと思います。次の項目で紹介するグラデーショングローでは、より設定が柔軟に出来るので、あなたの求めている効果にならないときはグラデーショングローを適用するようにしてみてください。もっと実用的なグローの使い方を発見したら、追って報告したいと思います。

_Fig6.17

※原画はノックアウトしてあります。

発光体のような表現をするためのカラー調整

フィルタのぼかし＋白色グロー

グローのチェックボックス属性利用時の比較

グロー(内側)

ノックアウト＋グロー(内側)

＿６．７．フィルタ（グラデーショングロー）

　Fig6.18に示すとおりフィルタのグラデーショングローには9つもの属性が用意されています。先の項目のグローの拡張版のようなフィルタで、放射輝度のカラーをより詳細に表現して、あたかもオブジェクト(原画)が輝いているかのように効果をあたえる表現ができます。また、グローを発生させる角度や幅がドロップシャドウの設定と同様の方法でできることから、グローとは違った使い方ができます。原画の外側にも内側にもグロー効果を与えるオプションも用意されています。ここまでに紹介したフィルタと組み合わせることで、より面白い残像効果が表現できます。各属性では以下に明記するような調整ができます。ぼかし-水平・垂直はグローのぼかし量を調整します。強度はグローの濃さを調整します。画質はグローの精度を調整します。角度はオブジェクト(原画)から離れた場所でグローを生成する場合のオブジェクトから見た角度を設定し、幅にはオブジェクトとグローの距離を設定します。グラデーション設定帯でグローの色を調整します。このグラデーション設定帯は、カラーミキサーと同様の扱い方ですが、一番左がグローの外側になり必ずアルファ値はグローの特性上、「0」になります。右側がグローの発生開始点の色になります。ノックアウトはOnにすると原画を透明で切抜きます、このとき生成されたグロー自身は切り抜かれません。タイプコンボボックスで外側を選択すると通常のグロー、内側を選択するとオブジェクトのある側だけを使ってグローを生成します。フルを選択するとオブジェクトと周辺を使ってグローを生成します。グラデーショングロー独自の機能について、いくつかの使用例をFig6.19に示します。

_Fig6.18

　上記のように前項のグローに加えて更に様々な発光体に関する表現ができます。やわらかい感じの発光体やどぎつい感じなど、表現者が思うままに設定できると考えてよいと思います。タイプの内側やフルを使うともともとあったオブジェクトのラインが無くなってしまいますので、少しやさしい感じになると思います。タイプ外側を使うともとのラインが残るのでちょっときつめの発光体を表現できます。表現したいと思うことの全てが、この機能で実現できるわけでもないですが、それぞれの特徴を掴んでおくと、作業効率は上がるでしょう。ちなみに角度と幅とぼかしの偏りを使ってFig6.20のような残像現象の表現としても使えそうです。ぼかしフィルタ単独よりは動きに方向性が表現できるように思います。

_Fig6.19

_Fig6.20

角度

270

角度

180

幅

-6

幅

角度を変化させたときの例

タイプを変化させたときの違い

タイプ

外側

タイプ

内側

タイプ

フル

発光体のような表現をするためのカラー調整

タイプ「フル」

グリーン→白(アルファ50%)→白の透明

グラデーションカラーを調整したときの例

単純な色変化のグローをあえて微調整した

タイプ「外側」

紫→紫(アルファ50%)→紫の透明

残像効果

その１

残像効果

その２

ぼかし-水平：15 ぼかし- 垂直：0

角度　　　：0 　　　　　幅：7

ぼかし-水平：9 ぼかし- 垂直：０

角度　　　 ：０　　　　　幅：５

＿６．８．フィルタ（ベベル）

　Fig6.21に示すとおりフィルタのベベルには10もの属性が用意されています。ベベルとは淵のことですが、淵の加工を行うことでオブジェクト(原画)の凹凸を表現し、あたかもオブジェクトに立体感があるかのように効果をあたえます。このとき、ある方向から光を当てられたように振る舞い少し角が削られたような凹凸表現をしようと働きます。各属性では以下に明記するような調整ができます。ぼかし-水平・垂直はベベル加工のぼかし量を調整します。強度はベベル加工の濃さを調整します。画質はベベルの精度を調整します。シャドウ・ハイライトでベベルの色を調整し、シャドウには立体になったときに光があたらず暗くなる部分の色、ハイライトには明るくなる部分の色を指定します。一般にオブジェクト浮き上がらせる場合、シャドウには明度・彩度の低い色をハイライトには明度・彩度の高い色を指定します。沈み込ませる場合はその逆を設定します。ノックアウトはOnにすると原画を透明で切抜きます、このとき生成されたベベル加工色自身は切り抜かれません。タイプの内側を選択するとオブジェクトのある側だけを加工して浮き上がるようにベベル加工し、外側を選択するとオブジェクトの外側だけを加工して浮き上がるようにベベル加工します。角度は光のあたる方向を指定し、幅にはベベルの浮き上がり量・もしくは沈み込み量を指定します。もちろんタイプ内側の場合はオブジェクトの大きさ以上に沈み込んだり、浮き上がったりはしません。適切な値を設定して下さい。いくつかの使用例をFig6.22に示します。

_Fig6.21

　上記のように擬似立体的表現ができます。上記をみてもわかるようにもともとの原画が細い線でできている場合、それほど明確な立体表現は望めないようです。原画を作る段階でベベル処理を加えるということを念頭においた設計が必要であると考えられます。その代わり、細い線でもタイプ外側を使うとそれなりに大きな立体効果が得られるようです。もともと立体的な表現をしていない構図の中に突然、このような立体図形が出てくるとアンバランスになりますので、利用するシーンについても深い考察が必要です。

_Fig6.22

ベベルのチェックボックスおよびコンボボックス属性利用時の比較

タイプ(外側)

タイプ(フル)

タイプ(内側

角度

135

角度

315

角度

225

シャドウに明度の高い色

ハイライトに明度の低い色

を設定すると青色部分が

沈みこむ

シャドウに明度の低い色

ハイライトに明度の高い色

を設定すると青色部分が

浮き上がる

＿６．９．フィルタ（グラデーションベベル）

　Fig6.23に示すとおりフィルタのグラデーションベベルには９つの属性が用意されています。先の項目ベベルと同様の機能ですが、シャドウとハイライトを２値で表現するのではなく滑らかな変化を与えることを目的としたフィルタです。各属性では先の項目のベベルで存在した属性のシャドウ・ハイライトの代わりにグラデーション帯で色を調整しするようになっています。グラデーション帯の真ん中を境に左側がハイライト色、右側がシャドウになります。真ん中はオブジェクト自身の色を表現するために透明の色が設定されています。これを消すことも動かすこともできません。基本的にグラデーションがかかることによって金属質な立体となると考えて問題ないでしょう。また、この設定でさまざまな配色を実施すると少し変わった質感を表面に持たせることも可能ですが、非常に緻密かつ計算された配色設定が必要になりますので、複雑な色合いを表現する場合の扱いは難しく高度な技術を必要とする場合があります。筆者も使いこなすのは難しいと感じている機能ですが、あえて、いくつかの使用例をFig6.24に示します。

_Fig6.23

　上記のようにグラデーションベベルにいても擬似立体的表現ができます。様々な場面で利用できそうですがやはりグラデーションベベルの肝心かなめはグラデーション帯にどのような設定をするかということにありそうです。このようなビットマップ化される複雑な表現をステージいっぱいに敷き並べて、変化するビットマップアニメーションというものを作っても面白いかもしれませんが、やはり色とこの形状を使いこなさないと素敵な映像にはなりにくいです。使い手次第で、これらフィルターの機能は100倍にも200倍にも引き出されるような気がしてならないです。みなさんもいろいろ考えておもしろい効果を見つけたら、作品に取り入れてみてはどうでしょうか。異彩を放つこと請け合いであります。ありきたりな使い方じゃ、簡単には驚かないよね！

_Fig6.24

質感をイメージしたグラデーションベベルの使い方の例

決してうまいとは言えませんが、上記のような複雑なグラデーションを設定することで、新しい金属のような質感をもった立体が出来上がります。これも透明部分を真中にもってきているので、オブジェクトの白色が浮かび上がってきます。

一般的なグラデーションベベルの使い方の例

上記のようなグラデーション設定を行ったグラデーションベベル処理では真中に透明の部分を設定しているためオブジェクト自信の淡い黄色が全体の色として浮かび上がってきます。真中に透明部分を設定していることは非常に重要です。

質感をイメージしたグラデーションベベルの使い方の例2

これも決してうまいとは言えませんが、上記のような複雑なグラデーションを設定で、同じ色合いを強調し、プラスチックのような質感にもなりそうです。

＿６．１０．フィルタ（トゥイーンアニメーション）

　ここまでフィルタの効果について説明してまいりましたが、フィルタの掛かり具合を動的に変化させることができるというのが、大きな魅力であります。従来のバージョンでも一枚のフィルタ効果を付けたビットマップを外部ツールを使って用意することはそれほど困難な作業ではありませんでした、これを何枚も作って連続的な動きを作るのは途方も無い労力が必要な上に、気に入らない動きだった場合の修正を考えると妥協も多く、このような効果をもったアニメーションを作るのは非常に根気のいる作業であったわけです。フィルタはFLASHにおける常套手段であるトィーンアニメーションでキーフレームを繋ぐだけで、フィルタ効果の変化量をキーフレーム間でごくシンプルな手法という制限があるものの、自動補完をしてくれるのです。使い方は従来のトゥイーンアニメーションとなんら変わらないやり方ですが、以下にその手順の一例を示します。ここではMov6.3のアニメーションを題材に作成方法を解説します。

まず、動かす絵を描きます。ここではFig6.25のような空き缶と空き缶を置いた台と人物画の３つを描かなければなりません。空き缶の概観と空き缶を置いた台は線ツール・矩形ツール・楕円ツール・バケツツールで描くことができます。空き缶の内側に描かれたプルタブや印刷物そして、人物画はブラシツールで描いています。人物画の内容自体は動かすつもりは無いし、多間接アニメーションのような動きを行う予定もないので、シンボルをたくさん作るようなこともしていません。このような状況で人物画を動かすとしたら、自分はコマアニメという手法を使います。とにかく何度も何度もペン入れをして、描いています。描くという行為自体はここではそれほど重要ではありませんし、感性によってもやりたいことは違うと思うので、描くという行為についてはここでは説明しません。

　描くということにアドバイスをするなら、実際はステージ表示サイズを800%にして描いているということです。縮小して表示される結果見えなくなる部分があってもかまわないから、ミクロなスケールで綺麗に見えるように描きます。その結果、上記のようなそれなりの見栄えにまで到達できると思います。絵をうまく描ける人はもっと高度なやり方をやっているようですが、自分は紙にも描かないし、スキャナーを使ったりもしません。とにかくFLASH上で描く、線ツールは使わない。これだけです。時間があったら、絵が出来上がるまでの工程についても説明してみたいと思います。デッサンで勉強中の身でもありますし自粛です。

　さて、できあがった３つの絵はそれぞれシンボルというものにしなければいけません。選択ツールで１つの素材を選んだ状態で右クリックして表示されるFig6.26に明示したシンボルに変換を選択します。因みにひとつのシンボルで複数レイヤーをもつ場合は最初のレイヤーの絵を書いたところでシンボル化します。人物画の場合は女の子の顔を描いたところでシンボル化しました。

　シンボルに変換を選択すると、Fig6.27のシンボルに変換ダイアログが表示されます(図はダイアログの一部分のスナップショットです)。ここでは特にライブラリに登録するときのシンボルのタイプとシンボルの名前を決めます。その他の設定は気にする必要は今の段階ではありません。自分の場合、ライブラリに登録する時点ではシンボルの名前を決めません。したがって、デフォルト値の「シンボル nn」を採用することになります。タイプはムービークリップを選択します。動きのあるシンボルを作るときはグラフィックで作ることもありますが、複数のシンボルを合わせたとき総合的な動きをチェックする必要の無い単純なループアニメやアクションスクリプト制御が必須のアニメおよび親のシンボルのタイムラインが停止しても動き続ける必要のあるアニメはムービークリップを選択します。迷ったときはムービークリップで作ってしまっていいと思います。ライブラリからステージに配置し、インスタンスにするときの型でしかありませんから、グラフィックとしての制御が必要な場合は配置したあとでグラフィックに変えればいいのです。ステージ上に配置した動きのあるシンボルのほとんどはグラフィックで扱いますオーサリングツール上で動きを確認したいからです。さて、シンボル化がすんでまだそのシンボルに描き終わっていない部分の絵があれば、インスタンスをダブルクリックしてシンボルをその場で編集する状態にし、全てを描きます。これで、ようやくシンボルが準備できました。図と言葉の説明だけでは到底、理解できないと思うので最後に動画も用意してあります。わからなかった人はなんとなくでいいので次のステップに移りましょう。ここまでの作業時間はお絵かき１時間、シンボル化に２分くらいかな？

_Fig6.27

_Fig6.26

_Fig6.25

＿６．１０．フィルタ（トゥイーンアニメーション）続き

　さて、前のページまでにおいて、シンボルを作ったのですが、ここでトゥイーンアニメについての仕組みをおさらいしておきましょう。●トゥイーンアニメーションは、キーフレームとキーフレームの間を補完するものである。

●トゥイーンアニメーションは、一つのシンボル（ステージに配置されたときの名称はインスタンス）のみを扱うアニメーションである。

●一つのシンボルしか扱えないのだから、トゥイーンアニメーションする１レイヤーには１つのシンボルしか配置してはいけない。

●トゥイーンアニメーションのトゥイーン設定はトゥイーンを開始するキーフレームのある側で設定する。後にくるキーフレームは単なる終着点でしかない。

●トゥイーン設定には回転・イージング・グラフィッククリップの同期・ガイドレイヤーに沿っての動き・吸着・カスタムイージング(変化のバランス・速度・変化の巻き戻し)の設定ができる。

●トゥイーンは回転・拡大縮小・座標移動・フィルタ適用量を自動補完する。

　と、上記のような制約・機能の元に成り立っているものです。特に赤色の部分は初心者の頃は、はまりやすい制約です。一度うまくモーショントゥイーンを設定できたのに、後からモーショントゥイーンのあるレイヤーに塗りなどの別のオブジェクトを配置してしまったりして、モーショントゥイーン構造を破壊してしまったりします。自分はいまでもうっかりやってしまいます。あ、それではまず、Fig6.28のように動き出す前の位置にシンボルを配置します。レイヤーの機能を使って、重なり順序についても、同じように設定します。

　次にモーショントゥイーンの終着点のキーフレームを追加します。なぜかこのドキュメントは90fpsで作成している関係上、10秒後にモーショントゥイーンが終了するとして、900フレーム後のところにキーフレームを作る必要があります。各レイヤーの900フレーム目を選択して、右クリックして表示されるメニューからキーフレームに変換を選択します(Fig6.29)。次に900フレーム目のシンボルの位置を調整するわけですが、カメラが左に移動して、缶の後ろに隠れている人物画を捉えるような動きを演出したいので、缶を右側に移動した位置、人物画を左側に移動すると、あたかもカメラが左に移動したかのような効果が得られます。ここにはアニメーションならではの省略的、技法が使われていて、本来であれば、缶の見える角度が変わるので、缶を回したような動きも必要だし、人物画も角度が変わるので、少し横の顔が見える感じになる必要があります。実際にそれをやるととんでもなく大変なコマアニメーションになるし、それほど大きな演出効果が得られるわけでもないので、あえて横着をして、省略しています。そして、動き始めのキーフレーム側のフレームを右クリックして表示されるモーショントゥイーンを作成するを選択しトゥイーンを作成します(Fig6.30)。すると900フレーム目はFig6.31のようになります。FLASH8標準の設定では、タイムラインは青色になり、矢印でキーフレーム間が結ばれます。モーショントゥイーンがうまく出来ていない場合は、矢印の線が点線になり、設定が失敗していることを示します。レイヤーに複数のシンボルやオブジェクトが存在しないか確認してみて下さい。さて次のページでは、キーフレームにフィルタをかけてみましょう。

_Fig6.28

一番下のレイヤー

一番上のレイヤー

真ん中のレイヤー

レイヤー追加ボタン

レイヤー削除ボタン

_Fig6.29

_Fig6.30

_Fig6.31

　さて、前のページまでにおいて、動きに関するキーフレームの設定とモーショントゥイーンの設定を実施しました。あとはフィルタ効果をそれぞれのキーフレームで設定するだけです。フィルタのアニメーションはムービークリップにおいてキーフレーム間でカラーの設定が違うときと同じように振舞います(カラー効果のトゥイーンについてはムービークリップのプロパティでFig6.33のカラーの項目を調整することで実現できましたね)。ここでは、最初のフレームでは人物画だけにぼかし効果を出して、最後のフレームではぼかし効果が逆転するように、空き缶と台にぼかし効果をつけます。そうするとフォーカスが空き缶から人物画にうつったかのような映像になります。それでは、まずタイムラインの最初のキーフレームが表示されている状態にするため、タイムラインウィンドウのフレーム目盛りの［１］を選択します(Fig6.34の部分をクリック)。次に人物画を選択した状態にし、フィルタパネルから、先の項目で説明した手順でぼかしフィルターをかけます。結果Fig6.35のようになります。次に、最終［900］フレームを選択(Fig6.36の部分をクリック)して,空き缶と台それぞれにぼかしフィルターをかけます。結果Fig6.37のようになります。これで、完成です。このように、フィルタのモーショントゥイーンをかけるための特別な手順は存在しません。キーフレーム間でフィルタ効果が違っていれば、自動的にフィルタ変化のあるアニメーション効果のかかったビットマップを生成したかのような映像Mov6.5が表現されます。Mov6.6にここまでの手順を映像化したものを用意しました。言葉と図の説明でわからなかった人やトゥイーンアニメーション作成の基礎知識が無い人は確認してみて下さい。

_Fig6.33

_Fig6.34

_Fig6.36

_Fig6.35

_Fig6.37

_Mov6.5

　ここまで、できるだけ細かく説明してまいりましたが、この説明書は主に従来バージョンまでのFLASHの基本的な操作を知っている人を対象にしていますので、わからなくても仕方ないです。この新機能紹介文書が完成したら初心者向けマニュアル作りもやってみたいと思います。基本的には冒頭にも申し上げましたとおり、自分自身が、FLASH8の新機能の全てを一度使ってみるというのが目的でありますので、全くの初心者の方はそのあたりの筆者の気持ちを汲み取った上で「フーン、よくわかんないけど、こんなこともできるんだぁ、素敵！」程度に読み進めてもらえると嬉しいです。ちなみに、例に出したアニメは若干シリアスな映像に思えますが、わたくしが作った第２回、紅白FLASH合戦作品のその後的な映像になっております。今、その後を題材に２時間くらいのアニメを作っていますので、思い入れの強さが表面化したものと思っていただければよいかと考えるところであります。また、この文書の内容をさらに噛み砕いたような説明をしているFLASHマニア向けのラジオ「F-Radio」の「YO-NET FLAFLA RADIO PLUS」で毎週土曜日(の不定期な週)に雑談を交えながら放送を実施しています。よろしければ、そちらでも確認してみてください。聴衆方法およびラジオの詳細はhttp://fradio.muzo.jp/をご参照下さい。

では、次のページからはブレンドという、これまたものすごい新機能を紹介していきます。

このムービーは6MBもあります！モーショントゥイーンの作成風景です。特に説明もありませんがわかると思います。

＿７．１．ブレンド（概要）

　ブレンドは、グラフィック編集ツールでは基本的な機能として有名で、ふたつの画像を重ねる処理方法を定義して、画像を加工する一つの手法です。従来のレイヤーを使った重ね合わせ処理だけではなく、ある特定の方法で重ねる処理ができるようになったというのがブレンドの機能の意味するところであります。Flash8では上に重ねる画像やオブジェクトにブレンドを定義することで、重ねたときの効果を決めます。下側にくる画像やオブジェクトにブレンドの機能を定義してもブレンド特有の効果は得られません。ブレンドは、重ね合わせに関する特別な定義をしたい画像やオブジェクトを選択した状態で表示されるプロパティインスペクタFig7.1の部分で定義でき、12種類のブレンド処理が用意されています。このようにプロパティインスペクタで定義するだけなので、ブレンドという機能の使い方にさほど説明は必要ありませんが、12種類のブレンドの効果がどのようなものなのか？グラフィック編集ツールをあまり使ったことがない人にはわかりづらいお話だと思うので、そのあたりを次のページ以降で一つづつ、じっくりと説明していきたいと思います。このページではまず、ブレンドという機能でどのようなことが出来るのか、全貌を示したいと思います。何が起こってこのような結果が得られるのか現段階では理解しがたいと思いますが、例えば、ブレンドを使えばFig7.2のような表現が出来ます。このような複雑な結果をもたらす表現を理解し、このブレンドという表現を動的な要素として取り入れたら物凄いことが出来るような気がしませんか？このブレンドという機能もフィルタと同様に従来、極めて困難だった表現をいとも簡単に可能にしてくれるものなのです。アニメーションクリエイターは飛んで喜んだに違いない！

_Fig7.1

オーバーレイ(光源)

スクリーン(輪)

ハードライト(全体)

の併用例

ブレンド適用後

_Fig7.2

　上記のように、ブレンドという手法を用いることで、元の絵を活用した色の効果を出すことが出来るということになるでしょう。従来アルファ(透明効果)を使ったようなクリップを上に重ねると、下の絵を活かしたような効果が幾つか出来ましたが、ブレンドの機能はそのような表現手法の拡張を可能にしていると考えることが出来るかもしれません。上の空の絵では雲、全体の概観を活かしつつ、太陽の光を受けたときの明るさ効果を適度に付けることができていますし、下の顔の絵では、もともとの髪の毛の風合いを損なうことなくさらに影を着色することができています。また、黒いブレンド用の塗りをの部分で顔全体の色効果を色の数値管理上の反転にあたる値に置き換えて、簡単に顔全体の色に効果を与えることができます。ちょっとショックな出来事があったような顔の色が抜けたような、そんな効果を表現できていると思います。さて、それでは次のページ以降では、ブレンドのひとつひとつの処理内容がいったいどのようなことをするのか、色の計算処理方法や、処理の具体的な内容に触れながら、実際にはどういうとき利用できるものなのかを考えて見ましょう。面白い効果を与えるものだと解っていても、実際の利用方法がわからなければ宝の持ち腐れになってしまいます。自分も、ブレンドの天才というわけではありませんので新たな利用方法の提案が出来る自信はありませんが、これまでに多くのクリエイターによって考え出されたオーソドックスな手法については紹介できると思います。それでは次のページへ行きましょう！

原画

ブレンド用の塗り

ブレンド（髪は乗算、顔は反転）

の結果

＿７．２．ブレンド（原理）

　ブレンドの基本はやはり、従来のバージョンでも存在した機能のアルファ(透過処理)といえると思います。重ね合わせる一ピクセルの色について考えるとして、上側の色をCf、下側の色をCbとすると丁度、重ね合わせて中間になる部分の色は(Cf＋Cb)／2となります。これはアルファ50%と設定した場合の計算になります。特定のアルファの値をαとして、上側の色にアルファ値を設定するならば、

(α×Cf＋(１－α)×Cb)となります。これが基本的な色の合成、つまりはブレンドに関する原理となります。

例えば、ブレンドのタイプのひとつである加算では、Cf＋Cbということになります。但し、Cf＋Cbの結果が最大の明るさである白色Cmaxを超えることはできないので、そこで頭打ちになります。また、タイプ乗算では、加算のときと同じようにCf×Cbという計算がされていると思ってしまい勝ちですが、色の割合で計算をすることになっているので、色全体の中でのCfまたはCbの割合いという意味でCf/Cmax、Cb/Cmaxが扱われ、結果的には(Cf／Cmax)×(Cb／Cmax) で求まる割合値を計算し、割合値を色の値に戻すべく、これにCmaxを掛けて求まる値を重ね合わせ結果の色の値とします。このように様々な色の値による計算が施されることになります。不思議なことにこのようにして計算して導き出された色はコンピュータグラフィックの世界における色の重ね合わせにおいて、いろいろな場面での表現に利用・活用ができると今日（こんにち）までにわかってきたのです。

このような計算による重ね合わせについて、どのような結果が得られるのか想像しやすいグラフというものを作ってみました(よくみかけるやつですがｗ)。次のページ以降では、計算式とグラフと利用方法の考察を記述する予定なので、ここでは次ページ以降で頻繁に登場する、そのグラフの見方を解説しておきたいと思います。

例えばブレンドタイプ乗算の場合はFig7.3ようなグラフになります。下の色がグラフの水平方向で白から黒までをRGB値で言う所の000000、010101、020202、…FEFEFE、FFFFFFという変化を256段階で示したものと考えていただければよいと思います。同じく垂直方向には結果的に表示される色を示します。16段階の色を000000、111111、222222…、EEEEEE、FFFFFFを上から重ねたときの線を引いています。このグラフをもとにすれば、モノトーン以外の複雑なカラー設定についても、どのような変化が起きるか想像出来るようになるのではないでしょうか？

　上記のようなグラフから、ブレンドタイプ乗算では、どのような上側の素材を持ってきても、下地の色は元の色と同じか、もしくは、より暗くなるということがわかります。もっとも明るい色である白色を重ねた場合ではもとの色と同じ色になり、効果がないことがわかります、重ねる色が黒ければ、急峻に暗い色になります。このグラフから、ブレンドタイプのおおまかな処理内容が視覚的に把握できるのではないでしょうか？さて、次のページからは、ひとつづつを解説していきたいと思います。

FFFFFF（下地の色）

000000

7F7F7F

000000

7F7F7F

下の色と上の色が同じポイントを結んだ線

FFFFFF

EEEEEE

DDDDDD

222222

111111

000000

000000～FFFFFFまで16段階の線グラフ(上側の色)

_Fig7.3

＿７．３．ブレンド（通常・レイヤー）

　ブレンドの効果を通常とレイヤーについて、ここでは見てみたいと思います。共に重ね合わせの計算方法はCf＋Cb×０で、つまりは上側の色であるCfになります。このことから両者に違いが無いように感じますが、レイヤーの場合には、処理方法が少しだけ違いが有り、不透明度を一度100%として計算するため、重なった部分がにじまないのだそうです。ちなみに、筆者には、その違いがまったくわかりませんでしたので、たぶんブレンドタイプのレイヤーは使わないです。グラフはFig7.4のとおり、Coutを結果の色として、Cfを上側、Cbを下側の色とした場合、式は以下のとおりです。

式　Cout ＝ Cf ＋ Cb × 0（通常） 　　Cout (不透明度αを元の値に戻す)＝ Cf(不透明度αを100%で置き換え) ＋ Cb × 0 (レイヤー)

　上記のように、通常およびレイヤーは上側になる色（以降、ブレンドを効果を与える側なのでブレンドカラーと呼びます）のとおりになります。もちろん同じ色だった場合にも、上の色が採用されますが、結果的には見た目に変化はありません。上側の色に対して不透明度の設定でもしないかぎり、下側になる色（以降、ブレンドを効果を与える側なのでベースカラーと呼びます）は全く影響を受けないです。

使用例）

通常・レイヤー

下の色と上の色が同じポイントを結んだ線

FFFFFF

EEEEEE

DDDDDD

222222

111111

000000

000000～FFFFFFまで16段階の線グラフ(上側の色)

_Fig7.4

＿７．４．ブレンド（加算・減算）

　ブレンドの効果を加算と減算について、ここでは見てみたいと思います。加算の計算方法はCf＋Cb(明るさの上限をCmaxとする)、減算の計算方法はCfーCb(暗さの下限をCminとする)となっています。このことから、加算は下地の色に対して部分的もしくは全体に白みを表現したいときに利用し、減算は黒みを出したい場合に使います。部分的に明度を変えたり、レイヤーやオブジェクトをまたがって全体的に明度を変えたい場合に便利だと思います。グラフはFig7.4のとおり、Coutを結果の色として、Cfを上側、Cbを下側の色とした場合、式は以下のとおりです。

式　（加算）Cout ＝ Cf ＋ Cb　但し、Cout ≦ Cmax 　　（減算）Cout ＝ Cf － Cb　但し、Cout ≧ Cmin

　上記のように、加算および減算は明度がシフトするように働きます。適度なブレンド用のカラーを与えなかった場合、頭打ちという現象が起こって、真っ白になったり、真っ黒になったりすることも特徴のひとつです。加算、減算ともにブレンドカラーを白にすると、真っ白になったり真っ黒になったりするため、そのようにしないためには主に、白色以外のものをブレンドカラーにすることが望ましいでしょう。真っ白にしたり、真っ黒にしたい場合にはもちろん白色を使ってみるとよいでしょう。減算においてはブレンドカラーに黒をつかっても何も変化しないことと、ベースカラーとブレンドカラーを同じ色にした場合には真っ黒になるということも覚えておきましょう。このことから減算におけるブレンドカラーはベースよりも暗い色の集合体になることが多くなるはずです。使い方としては黒色に近い色のブレンドカラーで明度を微調整するというやり方がオーソドックスな使い方になります。

使用例）

加算

減算

_Fig7.4

＿７．５．ブレンド（乗算・スクリーン）

　ブレンドの効果を乗算とスクリーンについて、ここでは見てみたいと思います。乗算の計算処理では、先の項目でも説明したとおり、色を全体の明るさからみた割合に置き換えた値で掛け算をして、その結果の値を色としての値に戻すという、計算を行います。したがって（Cf／Cmax ）× （Cb／Cmax）×Cmaxという計算になります。0～1の値で掛け算を行うので、必ずもとの色より暗くなるような計算結果になります。スクリーンは一度、色を反転したもの掛け合わせて導き出された結果をさらに反転した色を使うので、乗算の逆の効果になります。式ではCmax－（（（Cmax－Cf）／Cmax）×（（Cmax－Cb）／Cmax）× Cmax）と表現することができます。グラフはFig7.5これを計算して数式を整理すると、色の最大明度色をCmaxとして、Coutを結果の色、Cfを上側、Cbを下側の色とした場合、式は以下のとおりです。

式　（乗算）Cout ＝ Cf × Cb ／ Cmax 　　（スクリーン）Cout ＝ Cmax－（（Cmax－Cf）（Cmax－Cb）／ Cmax）

　上記のように、乗算とスクリーンは名前こそ違いますが、非常に似ている特徴があるということがグラフからもわかります。乗算は暗くなる方向に働くのに対して、スクリーンは明るくなる方向に働きます。ブレンドカラーとベースカラーに同じ色を使うと、暗い色や明るい色同士では大きな変化はないのに、中間色同士では大きな変化が発生することもグラフからわかります。中間色付近だけを暗くしたり、明るくしたりする使い方が適していると考えられます。

使用例）

乗算

スクリーン

_Fig7.5

＿７．６．ブレンド（比較(明)・比較(暗)）

　ブレンド効果の比較(明・暗)について見てみます。比較(明)の処理では、計算処理ではなく、Cf ≧ Cb ？ Cf：Cbのように聞いて名のとおり比較を行う処理がされます。三項演算子を使って表現してしまいましたので、わかりにくいかもしれませんが、つまりは、CfがCbより明るければCf、ちがったらCbという意味になります。比較（暗）では、逆にCf ≦ Cb ？ Cf：Cbとなりまして、CfがCbより暗ければCf、ちがったらCbとなります。グラフはFig7.6のようになります。Coutを結果の色、Cfを上側、Cbを下側の色とした場合、式は以下のとおりです。

式　（比較(明)）Cout ＝ Cf ≧ Cb ？ Cf：Cb 　　（比較(暗)）Cout ＝ Cf ≦ Cb ？ Cf：Cb

　上記のように、比較ではどちらかの色が採用されるという２択であるということになります。同じ色を重ねた場合はまったく効果が得られません。グラデーションのある下地などと併用すると、ブレンドカラーが下地に溶け込んでいくようなものが作れると思います。暗闇の中である程度、明るいものだけが映像として得られるような場面や、ある程度暗いものだけが浮き出てくるような、汚れの表現などに向いているかもしれません。

使用例）

比較(明)

比較(暗)

_Fig7.6

＿７．７．ブレンド（オーバーレイ・ハードライト）

　ブレンド効果のオーバーレイとハードライトについて見てみます。オーバーレイの計算処理では、ベースカラーが中間色より暗いところでは更に暗い方向になる乗算効果、明るいところではより明るくなるスクリーンの効果を生み出します。但し、それぞれの効果は乗算、スクリーン単独のとき結果を２倍した明るい値になります。単独の場合と違って乗算効果を受けて必ずしも暗くなるわけではなく、ブレンドカラーが中間より明るければ元の色より明るくなりますし、暗いものをブレンドカラーにしたなら、より暗くなります。３項演算子を使って、計算式を表現するならば、Cb／Cmax ≦ 0.5 ？ 2 × (乗算と同等の式) ：２ × (スクリーンと同等の式)となります。ハードライトは同じ処理をブレンドカラーに対して行います。したがって、重ね順を変えるだけで、オーバーレイとハードライトの効果は同じになります。もちろん重ね順を変えずにブレンドタイプを変えることで、重ね順を変えたときと同じことが起こります。グラフはFig7.7のようになります。Coutを結果の色、Cfを上側、Cbを下側の色とした場合、式は以下のとおりです。

式　（オーバーレイ）Cout ＝ Cb ＜ 0.5 ？２× Cf × Cb／Cmax：２×（ Cmax－（（Cmax－Cf）（Cmax－Cb）／ Cmax））

　　（ハードライト）Cout ＝ Cf ＜ 0.5 ？２× Cf × Cb／Cmax：２×（ Cmax－（（Cmax－Cf）（Cmax－Cb）／ Cmax））

　上記のように、オーバーレイでは、ブレンドカラーの明るさが中間色より明るければ暗い色に対しては急激に明るくなりますし、ブレンドカラーが中間色よりくらい色であれば暗い色に対しては、より暗くなるように働くということです。ブレンドカラーの明るさが中間色より明るければ明るい色に対してはより明るくなるように働き、ブレンドカラーの明るさが中間色より暗ければ、明るい色にたいしては、急激に暗くなります。ブレンドカラーが中間色の場合、効果はほとんどありません。同じ色に同士では、明るいものはより明るく、暗いものはより暗くなることから、コントラスト(白黒の差)が強くなる傾向にあります。ハードライトはグラフこそ全く違うものになりますが、重ね順を変えたときのオーバーレイの効果と同じになります。

使用例）

オーバーレイ

ハードライト

_Fig7.7

＿７．８．ブレンド（差の絶対値・反転）

　ブレンド効果の差の絶対値について見てみます。差の絶対値の計算処理では、名前のとおりの処理が行われています。つまりはCf－Cbの絶対値ということです。絶対値とはCf－Cbの結果が負の値になっても絶対値として数値を扱うということです。減算では、負のあたいになった場合、頭打ちとなって黒くなるのでしたが、絶対値として扱われるため、ベースカラーとブレンドカラーの色の明るさの違い分だけの明るさをもった色が表現されることになります。絶対値という言葉の意味がわからない人はもうちょっと数学の勉強をした方が良いでしょう。簡単に言うならば、絶対値とは、数の世界での原点とされている 0 （ゼロ）からその値がどれだけはなれた離れた値であるかということを示すものです。反転はブレンドカラーとは関係なく、ブレンドカラーが置かれている部分の色が何色であっても一番明るい色のCmaxとの差をとった値になります。グラフはFig7.8のようになります。Coutを結果の色、Cfを上側、Cbを下側の色とした場合、式は以下のとおりです。

式　（差の絶対値）Cout ＝｜Cf － Cb｜　　　　　　　　(反転) Cout ＝ Cmax － Cb

　上記のように差の絶対値は色を反転させようとする効果があります。但し、ブレンドカラーが白色以外の場合、必ずしも反転するわけではなく、ブレンドカラーとベースカラーが同じ色の部分までの色で反転(シフト反転とでもいいましょうか…)の効果になります。そして、ブレンドカラーと同じ色のベースカラーの部分が最も黒くなるように働きます。ブレンドカラーと比べてベースカラーの方が明るい部分と暗い部分で明るくなる割合と暗くなる割合が同じならば、それらは同じ色になる部分も発生するのがこのブレンドの特徴です。減算のときはベースカラーより明るいブレンドカラーを与えた場合は黒くなりましたが、差の絶対値では反転の処理が加わり、減算効果とシフトした反転効果を合わせたような効果になります。反転はブレンドカラーに関係なく、ベースカラーが反転するという効果になります。

使用例）

差の絶対値

反転

_Fig7.7

＿７．９．ブレンド（アルファ・消去）

　ブレンド効果のアルファと消去について見てみます。アルファ・消去は共に、切り抜いたような効果になります。但し、ブレンドタイプアルファの場合には、クリップ全体のカラー設定におけるアルファや色のアルファ値を反映させた切り抜き、アルファ0％にすると完全に切り抜きと同等の結果になります。計算処理として表すなら、背景色をCgとすると消去はCb × 0 ＋ Cg アルファはブレンドカラーのアルファ値をBαとすると Cb × Fα ＋（1 －Fα）Cg となります。重要なのは、ムービークリップを入れ子にしたようなムービークリップの中でこのブレンドを使った場合は親のムービークリップにもブレンドタイプを何かしら設定しないとムービークリップの中にあるアルファブレンドや消去ブレンドには全く効果がないということです。ここで、親のムービークリップのブレンドモードにおいて、通常とレイヤーを選択したときの違いが発揮されるということになるのかもしれません。これまでに紹介した他のブレンドモードとは全く違う効果なので、グラフには表現できないため、グラフを省略します。計算式はCoutを結果の色、ブレンドカラーCfのアルファをFα、Cbを下側の色とした場合、以下のとおりです。

式　（消去）Cout ＝（Cfが存在したら）Cb × 0 ＋ Cg 　　(アルファ) Cout ＝（Cfが存在したら） Cb × Fα ＋（1 －Fα）Cg

使用例）

＿７．９．ブレンド（アルファ・消去）

式　（消去）Cout ＝（Cfが存在したら）Cb × 0 ＋ Cg 　　(アルファ) Cout ＝（Cfが存在したら） Cb × Fα ＋（1 －Fα）Cg

使用例）

現在、鋭意執筆中です！もうしばらく、お待ちください。