基金訓練(Webデザイン・プログラミング科)の78日目に行ってまいりました。
78日目は、Adobe Flashの実習です。
78日目の内容は下記のとおりです。
１．シェイプの作成
イラストレーターと同じような感じで描画できますが、大きな違いがいくつかあります。
シェイプを重ねた時。
2個のシェイプを重ねた時シェイプの線と塗りの色によってシェイプの状態が変わります。
- 線のない同色の塗りのシェイプを重ねた時、ひとつのシェイプになります。
- 異なる色の塗りのシェイプを重ねた時、または、線のあるシェイプを重ねた時、移動して上に重なった部分を、移送してない下の画像から切り取られます。
左のシェイプは、塗り青で線なしで、右のシェイプは上から、塗り青で線なし、塗り赤で線なし、塗り青で線ありです。
左のシェイプに、右の3個のシェイプを移動して重ねた状態です。
空白部分をクリックして選択を解除しました。
右のシェイプを移動ツールで選択して右へ移動した状態です。
結果、上は左右のシェイプが1個のシェイプになり、真ん中と下は左のシェイプが重なっていた部分だけ切り取られています。
シェイプの修正
線ありのシェイプを描いた時、中の塗りと線は別のシェイプになります。
選択ツールでシングルクリックの時はそれぞれのシェイプが、塗りの部分をダブルクリックイした時はすべてのシェイプが、線をダブルクリックした時は線すべてが選択状態になります。
角丸の矩形(四角形)の場合、線は8個のシェイプになります。(下図参照)
選択ツールでシェイプを選択していない状態でシェイプの辺をドラッグすると
形状を変更できます。
２．トゥイーンアニメーション
動きをつけるために、クラシックトゥイーン、シェイプトゥイーン、モーショントゥイーンの3種類があります。
クラシックトゥイーン
シェイプを移動するアニメーションを作成します。
ファイルメニュー→新規 で新規ドキュメントウインドウを表示し、ActionScript3.0を選択してOKボタンを押します。
楕円ツールで円を描きます。
タイムラインでキーフレームを入れたい位置を右クリックし、キーフレームを挿入をクリックします。
挿入したキーフレームで、シェイプを移動したい位置まで移動ツールで移動します。
タイムラインのキーフレームの間を右クリックし、クラシックトゥイーンを作成をクリックします。
Ctrl+Enterキーで下記の動きが確認できれば完成です。
<![CDATA[<br />
フラッシュアニメを見るにはプラグインが必要です。<br />
]]>
シェイプトゥイーン
シェイプの形状や色を変化させながら移動するアニメーションを作成します。
キーフレームの挿入までの手順は、クラシックトゥイーンと同じで、その後、挿入したキーフレーム上で、シェイプを移動させ、形状色を変更します。
タイムラインのキーフレームの間を右クリックし、シェイプトゥイーンを作成をクリックします。
Ctrl+Enterキーで下記の動きが確認できれば完成です。
<![CDATA[<br />
フラッシュアニメを見るにはプラグインが必要です。<br />
]]>
モーショントゥイーン
シェイプを移動するアニメーションを軌跡を使って作成します。
タイムラインでフレームを入れたい位置を右クリックし、フレームを挿入をクリックします。
タイムラインのフレームの間を右クリックし、モーショントゥイーンを作成をクリックします。
挿入した最後のフレームで、シェイプを移動したい位置まで移動ツールで移動すると、緑色の線で軌跡が描かれます。
軌跡をドラッグして、軌跡の形状を変更します。
Ctrl+Enterキーで下記の動きが確認できれば完成です。
<![CDATA[<br />
フラッシュアニメを見るにはプラグインが必要です。<br />
]]>
３．シンボル
シンボルは、上記のトゥイーンアニメーションに埋め込むことができます。シンボルに動きがつけられるので、回転しながら移動するなどのアニメーションができます。
挿入メニュー→新規シンボルをクリックします。
多角形ツールで星を描きます。
シェイプを選択して、整列ツールを用いてステージのセンターに移動します。
キーフレームを挿入し、クラシックトゥイーンを設定します。
プロパティーの回転の項目で時計回りを選択します。
ステージの左上にある青色の矢印をクリックして、シンボルの作成画面から出ます。
1フレームで、ライブラリパネルから、先に作ったシンボルをドラッグしてステージにもって行きます。後は、前述のクラシックトゥイーンの作成の仕方で作成します。
Ctrl+Enterキーで下記の動きが確認できれば完成です。
<![CDATA[<br />
フラッシュアニメを見るにはプラグインが必要です。<br />
]]>
基金訓練(Webデザイン・プログラミング科)の49日目に行ってまいりました。
本日は、Adobe Illustrator CS4の実習です。
本日の内容は下記のとおりです。
Flash作成の準備
１．昨日作った地図の上を歩くキャラクターの作成
正面から見たキャラクター
- 正面を向いて直立しているキャラクタを描く。
- 先に描いた絵をコピペして、右足を前に出しているキャラクターを描く。
- 右足を前に出しているキャラクターをリフレクトツールでコピーして左足を前に出しているキャラクターを描く。
背面から見たキャラクター
左側面から見たキャラクター
- 直立しているキャラクターの左側面を書く。(正面の絵と、体や顔、足の位置の高さを合わせる。)
- 直立しているキャラクターをコピペして、修正し、右足、左手を前に出しているキャラクターを描く。
- 右足、左手を前に出しているキャラクターを、リフレクトツールでコピペする。
右側面から見たキャラクター
- 左側面のキャラクターを3個とも、リフレクトツールでコピペする。
作成した12種類の絵を等間隔に並べる。
スライスしやすくするため。
- 長方形ツールで、正面の絵の1個をぴったり囲むような長方形を描く。
- その長方形を選択して、パスのオフセットを使って、5px外側に長方形を描く。
- 書いた2個の長方形を、その外側同士の長方形にくっつけて右側にその長方形をコピーする。
- Ctrl+Dで、前回のコピーを繰り返す。(3列のマスができる。)
- 3列のマスを、そのマスにくっつけて下側にそのマスをコピーする。
- Ctrl+Dで、前回のコピーを2回繰り返す。(3列4行のマスができる。)
- 作成した書くマスに、きゃらくたーのえを、1個ずつ移動して入れていく。(動かした時、体がぶれないように、各マスの中で同じ位置関係になるようにする。)
トリミングする。
- スライスツールを選んで、左上の外側の増すに合う様に四角形で囲む。
- 選択ツールを選んで、バウンディングボックスを表示して、マスの角に合う様に調整する。
- そのスライス範囲を、Ctrl+Altキーを押しながら、ドラッグして右隣のますにコピーする。
- Ctrl+Dで、前回のコピーを繰り返す。(3列のスライス範囲ができる。)
- 3列のスライス範囲を、下側にコピーする。
- Ctrl+Dで、前回のコピーを2回繰り返す。(3列4行のスライス範囲ができる。)
flash用に、画像を変換する。
- スライスのために作ったますはすべて見えなくしておく。
- ファイルメニュー→Webおよびデバイス用に保存を選ぶ。
- プリセットをPNG-24にし、スライスしたい画像をすべて、Shiftキーを押しながらクリックして選択し、保存をクリックする。
- 保存ウインドウの、スライスを「選択したスライス」にして、保存をクリックする。
※保存ウインドウの設定→その他 で、「画像をフォルダに保存する」のチェックをはずしておかないと、新しいフォルダを作ってそこに保存されてしまう。
基金訓練(Webデザイン・プログラミング科)の48日目に行ってまいりました。
本日は、Adobe Illustrator CS4の実習です。
本日の内容は下記のとおりです。
Flash作成の準備
１．地図の作成
GoogleMapの等の地図をトレースしてイラスト地図を作成する。
元図の読み込み
背景の作成
- 新規レイヤーを作成する。
- 長方形ツールなどを使って背景を薄い灰色などにする。
道路の作成
- 道路の中心線をペンツールを使って書く。(塗りなし、線黒色)
(複数のパスで書いてOK)
- すべての線の太さを、道路の幅まで太くする。
- すべての線を選択して、
オブジェクトメニュー→パス→パスのアウトライン
で、外形のパスを作る。
- パスファインダパネルで合体をクリックする。
※最初の中心線のパスは、コピーして残しておくと、後で修正が楽。
線路の作成
- 新規レイヤーを作成する。
- 線路の中心線をペンツールを使って書く。(塗りなし、線黒色)
- 線の太さを、線路の幅まで太くする。(例．12pt)
- 線を選択して、Ctrl+C→Ctrl+F で、前面コピーする。
- 前面コピーした線の太さを細く(例．10px)し、線色を白にする。
- 白くした線を、線パネルを使って破線にする。
※最初の中心線のパスは、コピーして残しておくと、後で修正が楽。
ランドマークの作成
- 新規レイヤーを作成する。
- 長方形ツールなどを使って、駅や、目印になる施設を書く。
トリミングする。
- 長方形ツールで、マスク用の長方形を書く。
(最前面に新規レイヤーを作成して、そこに書く。)
- 元図以外のすべてのパーツを選択し、
オブジェクトメニュー→オブジェクト→クリッピングマスク
を、クリックする。
※クリッピングマスクをすると選択したパーツはすべて、もとのレイヤーから消えてしまうので、マスクしたいパーツをすべてコピーしてから、コピーしたパーツでクリッピングマスクを実行したほうがよい。
flash用に、画像を変換する。
- 新規レイヤーを作成する。
- スライスツールを使って、必要なパーツを長方形で囲む。
- ファイルメニュー→Webおよびデバイス用に保存で、画像を保存する。(PNG-24)
※保存ウインドウの設定→その他 で、「画像をフォルダに保存する」のチェックをはずしておかないと、新しいフォルダを作ってそこに保存されてしまう。
sei2が、気になる家電、WEBデザイン、WEBプログラミング、基金訓練や日常の出来事を書いたブログです。
