※当サイトの記事には、広告・プロモーションが含まれます。

Illustratorによる画像をFlashでアニメーション化

アウトライン化とは?

文字を直線や曲線でできた、図形(パス)に変換することをいいます。

アウトライン化をする意味とは?

データのやり取りをする時、他のパソコンに同じフォントが入っていないと、他の書体に書き換えられ、正しく表示されません。

また、同じフォントが入っていたとしても、文字パネルで細かな調整をした文字間など、レイアウトも崩れてしまうことがあります。それを防ぐためイラストレーターで文字をアウトライン化します。

アウトライン化すると文字を図形としているので、文字のデザインが崩れることがなく、他のパソコンで不都合なく使うことができるのです。

Webや印刷業者さんに入投する時は必ずアウトライン化をするのが良いようです。

 

Illustratorでの作業

Illustratorを起動させる。

ファイル新規(550px×400pxのサイズ。Flashのステージの大きさに合わせてます。)

文字ツールで文字を書きます。(今回は文字サイズ120pxぐらいで6文字。)

選択ツールで文字全部を選択したら、「書式」の『アウトラインを作成』を実行。

「オブジェクト」の『グループ解除』で文字を1文字ずつ処理できるように。

「ウインドウ」から、『アピアランス』>『ブラシ』>『カラー』>『ブラシ』を選択。

『ブラシ』ツールの横の閉じるボタンの下のボタンをクリックして、

『ブラシライブラリを開く』にカーソルを合わせ『アート』にカーソルを合わせ、『アートペイントブラシ』から " ドライブラシ9 " と " クイックブラシ1 " を選び、

『アートインク』から " 銀河 " と " 飛散 " を選びます。

文字を1文字選択してる状態で、『アピアランス』の " 線 " を選択し、『ブラシ』から

選んでいたブラシ(まずは " ドライブラシ " )を選択、その後アピアランス』の " 塗り " を選択し『カラー』のCMYKの値をC,M,Y,K(100,30,0,0)にします。

その後、『アピアランス』の左下の"新規線を追加"を選択。(1つの文字に何個も線を

重ねられます。)

続いて『アピアランス』の " 新規線を追加 " で追加された " 線 " を選択し、『ブラシ』から " ドライブラシ1 " を選択、カラー』 " 塗り " を選択しCMYKの値をC,M,Y,K(100,30,0,0)に。

「ウィンドウ」から『線』を選択し、 " 線幅 " を0,75ptに。

続いて『アピアランス』 " 新規線を追加 " 、" 線 " を選択し、『ブラシ』から " クイックブラシ " を選択、『カラー』" 塗り " をCMYK(100,0,0,0)に。

『線』を選択し、 " 線幅 " を0,75ptに。

続いて『アピアランス』 " 新規線を追加 " 、 " 線 " を選択し、『ブラシ』から " 銀河 " を選択、『カラー』" 塗り " をCMYK(100,80,0,0)に。

『線』を選択し、 " 線幅 " を0,75~0,25ptに。

最後にペンツールで曲線を描きます。

『ブラシ』から"飛散"を選択。コピペで数を増やして、適当に配置。

「ウインドウ」の『グラフィックスタイル』を選択。加工した文字をドラッグして『グラフィックスタイル』のウィンドウの空きスペースに持ってくると、スタイルが登録されます。

残りの文字を選択し『グラフィックスタイル』に新しく登録されたスタイルを選択、

残りの文字にも同じスタイルが適応されます。

次に、2文字目を選択ツールで選択。

画面上から2列目の『オブジェクトの再配色』を選択し、『編集』をクリックし、右下の『ハーモニーカラーをリンク』クリック。

色を変えます。色が決まったら『OK』をクリック。

同様に他の文字も繰り返す。完成したら全てを選択しコピー。

Flashでの作業

Flashを起動させる。

ActionScript2.0を選択。ここでIllustratorでコピーしていたものを貼り付ける。

『ビットマップとしてペースト』にチェックして『OK』をクリック。

「修正」から『分解』を選択。

タイムラインの1コマを選択し、消しゴムで文字を少しずつ消す(※逆再生の考え方で終わりのほうから消す。)

次のコマをクリック、「F6」を押す。消しゴムで文字を少しずつ消す。

次のコマをクリック、「F6」を押す。消しゴムで文字を少しずつ消す。

今回は48コマ繰り返します。

終わったらレイヤー名をクリックします。

48コマ全てが選択されるので、全て選択されたコマ上で右クリックして

『フレームの反転』。

新規レイヤー作成、名前を『action』に変更。

『action』の最後のコマ(今回は48コマ目)に『空白キーフレーム』を挿入。

ここで右クリックを押して『アクション』を選択、stop();を入力。

1コマ目にも空白キーフレームを挿入、右クリックで『アクション』選択、

stop();を入力。

Ctrl + Enterで動きをチェックします。