FC2ブログ

スポンサーサイト

  1. トップ
  2. スポンサー広告
  3. スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告 | コメントを書いてくれる人はこちら(-) | トラックバック(-) | [編集]
このページのトップへ移動する。

職業訓練WEBクリエーター科30日目

  1. トップ
  2. FLASHのソフトの使い方の勉強
  3. 職業訓練WEBクリエーター科30日目

職業訓練WEBクリエーター科30日目

使用ソフト・・・FLASH

使用教科書・・・FLASHトレーニングブック

授業の内容

1コマ目~6コマ目

今回学習したFLASHのソフトを使用して、作品を作成してみよう。

テーマ

「おめでとう」・「暑中見舞い」・「ゲーム性のあるもの」

上記の中から一つ選んで、作品を作る

期間

今日・明日の2日間

制約

ActionScriptを使用して、

「スタートボタン」を押すまで再生しない。

最後まで再生したらストップし、「最初から」のボタンを押して最初に戻る。

演習課題

昨日と今日で作成したフラッシュのアニメーションがしました。

今回の見所

テニスのラリーアニメーション

テニスのボールに、ボールの弾道を描いたパスガイドを作成してそれにあわせてラケットで打ってるようなアニメーションをつけて、実際ラリーをしているアニメーションを作成した。

ニュースへのリンク先

今回テニスのリンク先のロールオーバー部分で、ジャンプするページのレイアウトを表示するアニメーションを作成してみた。

スポンサーサイト
このページのトップへ移動する。

職業訓練WEBクリエーター科29日目

  1. トップ
  2. FLASHのソフトの使い方の勉強
  3. 職業訓練WEBクリエーター科29日目

職業訓練WEBクリエーター科29日目

使用ソフト・・・FLASH

使用教科書・・・FLASHトレーニングブック

授業の内容

1コマ目~6コマ目

今回学習したFLASHのソフトを使用して、作品を作成してみよう。

テーマ

「おめでとう」・「暑中見舞い」・「ゲーム性のあるもの」

上記の中から一つ選んで、作品を作る

期間

今日・明日の2日間

制約

ActionScriptを使用して、

「スタートボタン」を押すまで再生しない。

最後まで再生したらストップし、「最初から」のボタンを押して最初に戻る。

途中経過

今回作った課題は、テニスのウィンブルドンの優勝をおめでとうで作成しました。

制作途中の課題がこちら

このページのトップへ移動する。

職業訓練WEBクリエーター科28日目

  1. トップ
  2. FLASHのソフトの使い方の勉強
  3. 職業訓練WEBクリエーター科28日目

職業訓練WEBクリエーター科28日目

使用ソフト・・・FLASH

使用教科書・・・FLASHトレーニングブック

授業の内容

1コマ目

ボタンを作ってみよう

トレーニングブック P206~218

フラッシュでボタンを作成する。

動き

アップ・・・ステージに配置した時に表示される画像です。カーソルが触れていない状態

オーバー・・・マウスカーソルが触れた状態で、この状態を「ロールオーバー」と呼びます。

ダウン・・・クリックした時の画像です。

ヒット・・・カーソルの反応エリアです。通常は「アップ」が隠れるくらいのサイズで作ります。

シンボルに編集してタイプをボタンに選択する。

できた成果物↓

動きのあるアニメーションボタンを作成

動きをつけたい部分にここでは、ダウンに動きのあるシンボルを挿入してあげると、動きがつく。

ここでは色が変わるアニメーションに設定した。

できた成果物↓

2コマ目

トレーニングブック P213

シンプルボタンについて

アニメーションボタンを作成した場合はムービープレビューでみないと動きが確認できたない。

シンプルボタンの場合、シンプルボタンで動きを確認することができる。

文字をボタンにする。

テキストでも、シンボル化すると、先ほどと、同様にボタンの機能を持たせることができる。

ヒット領域にテキストを入れると、文字の部分しかヒットしなくなるので、テキストを覆おうような図形を挿入して、ヒット領域を確保する。

できた成果物↓

3コマ目

ActionScriptで動きを制御する。

トレーニングブック P219~231

アクションには3種類

フレームアクション・・・タイムラインによるアクション タイムライン上で設定したフレームにきた場合のアクション

ボタンアクション・・・ボタンにたいして、ボタンを押したときにどうゆう動きをするかのアクション

ムービークリップアクション・・・

アクション制御パネルは、レイヤーの一番最初に用意する。

stop・・・止まる

play・・・再生

ActionScriptを記述後、自動フォーマットボタンを押すと、記述が間違っているか、間違っていないか判断できる。

ActionScriptでコメントを挿入したい場合は

一行だけコメントを挿入・・・・ //を入れる。

 複数行コメントを挿入の場合・・・ /*ここにコメントを挿入*/

4コマ目

自動車のアニメーションにボタン制御をつけたFLASHを作成しよう。

スタートスイッチ・リセットスイッチを作成する。

できた成果物↓

ラベル機能

フレームにラベルをつけてそこに移動させる方法。

フレームを増やしたりする場合フレーム指定だと毎回設定を変えないといけなくなるので、アンカーを設定して移動させる方法。

今回は、スタートスイッチに、

on (release) {//マウスが離れた場合

gotoAndPlay("start");/*startタグに移動して再生する。*/
}

を記述して、クリックしたらstartタグに移動して再生する。

さらにGOスイッチを追加してそのスイッチに

on (release) {
gotoAndPlay("go");
}

を記述して、GOをクリックすると、GOラベルをつけたフレームから再生が始まる。

できた成果物↓

5コマ目

FLASHでリンクの作成

トレーニングブック P242~244

URLリンクを設定しよう

ビヘイビアパネルのWEB→WEBページへ移動から選択する。

今回は、ボタンシンボルにYAHOOへのリンクを張ってみた。

メールソフトの起動は

getURL("mailto:ここからメールアドレスを記述");すると、メールソフトが起動する。

メールソフトを使用する際の注意点

トレーニングブック P243

メールリンクはパソコンの中のメールソフトが起動してしまうので、メールをリンクさせる場合メールアドレスだと、わかりやすく表示させる。

できた成果物は↓

6コマ目

課題練習の予習

課題で作成するテーマ

おめでとう

暑中見舞い

ゲーム性のあるもの

必ず付けるもの

スタートボタンを押すまで再生しない。

最後まで再生したらストップ

最初からのボタンをおして最初に戻る

このページのトップへ移動する。

職業訓練WEBクリエーター科27日目

  1. トップ
  2. FLASHのソフトの使い方の勉強
  3. 職業訓練WEBクリエーター科27日目

職業訓練WEBクリエーター科27日目

使用ソフト・・・FLASH

使用教科書・・・FLASHトレーニングブック

授業の内容

1コマ目

レイヤーを使ったアニメーションを作ろう

トレーニングブック P114~121

レイヤーとは トレーニングブック P114~115

レイヤーはステージの重なりをさします。

レイヤーを使ったアニメーション トレーニングブック P116~117

レイヤーを3個作成して、

最前面に茂み

真ん中にクルマが動くアニメーション

最背面に山を作成した。

2コマ目

カーブに沿って走るアニメを作ろう トレーニングブック P117~121

レイヤーを2つ作成する。

最前面に動く自動車

最背面に山を作成する。

カーブに沿って動かすために山に線を追加して、それをコピーしてモーションガイドとして新たに作成

その上をクルマが動くように、キーフレームの位置を変更する。

そのままだとクルマが傾かないので、パスに沿って回転を選ぶ

※山の角度に合わせてクルマの向きを調整するとさらに見栄えがよくなる。

カラーエフェクト

トレーニングブック P134~141

カラーエフェクトとは、色のを変更する動きを付ける効果

プロパティインスペクタにより変更をする。

明度・・・明るさを変更する設定

着色・・・インスタンスに色を着色する設定

アルファ・・・透明度の設定

カラーエフェクトとカラーを利用したアニメーション

モーフィング

トレーニングブック P152~158

形が異なる図形に変形するアニメーション

シェイプトゥイーン

トレーニングブック P152

シェイプトゥイーンの練習

丸から形を変える

一部の色を変える

3コマ目

トレーニングブック P155

揺らぐ煙を作ろう

トレーニングブック P155~157

煙が揺らぐアニメーションをつけるために、シェイプヒントの追加をする。

4コマ目

マスクレイヤーを活用する。

トレーニングブック P142~151

マスクにしたレイヤーを作成する。

汽車をトンネルにくぐらせる

トレーニングブック 142~144

進行方向部分にも塗りを追加して、マスク処理を追加しておく。

動くマスクを作ってみよう

トレーニングブック P145~147

動きをつけたホシマークをマスクをかける。

5コマ目

マスク対象レイヤーに追加

トレーニングブック P148~151

マスクを設定した部分にレイヤーを追加する練習

順番は

マスクの中・・・キャラA・キャラB・背景C

マスクの外・・・背景D

下記のように見える。

写真の表示

トレーニングブック P174~183

写真を読み込む

トレーニングブック P175

ファイルメニュー→読み込みからステージに変更をする。

写真の読み込む画像のサイズはFLASH制作の画像の幅に合わせて作成する。

6コマ目

ホームページ上に載せるには

トレーニングブック P246~252

このページのトップへ移動する。

職業訓練WEBクリエーター科26日目

  1. トップ
  2. FLASHのソフトの使い方の勉強
  3. 職業訓練WEBクリエーター科26日目

職業訓練WEBクリエーター科26日目

使用ソフト・・・FLASH

使用教科書・・・FLASHトレーニングブック

授業の内容

1コマ目

キャラクターの作成の続き

トレーニングブック P78~88

グループ化オブジェクトのシンボル化

トレーニングブック P81~82

修正→シンボルに変換(F8)

重ね合わせの調整

トレーニングブック P83

重ね合わせの設定

修正→重ね順→ひとつ前面へ移動で編集する。

CTRL+カーソルの上下で重ね合わせを変更ができる。

シンボル同士の組み合わせ

トレーニングブック P83~84

シンボルを両方選択してシンボルに変換

※ステージに配置されたシンボルはインスタンスと呼ぶ

シンボルの編集

トレーニングブック P85~87

インスタンスを選択し、右クリック→編集を選択

2コマ目

シンボルとは

何度も使うことのできるオブジェクトのこと。

インスタンスとは

シンボルをステージ上に置いた場合インスタンスと呼ばれる。

インスタンスをステージ上に配置し、縮小・拡大・回転・反転・明度・透明度・着色を変更することができます。

この場合はライブラリには影響がありません。

作成した練習課題がこちらです。

キャラクターの作成の画像

FLASHアニメーションの作成

トレーニングブック P90~184

アニメーションの基本

トレーニングブック P90~91

シンボルに動きを設定する場合、1つの動きに1つのレイヤーが必要

サイズは、最初に設定をする。

パタパタアニメを作ろう

トレーニングブック P92~94

手を作りシンボル化(基準点を付け根部分にしておく)

体の部分をつけてシンボル化

両方をシンボル化

3コマ目

キーフレーム

各シーンの特徴部分をキーフレームとゆう。

再生

ENTERを押すと再生できる

シーンではムービークリップは再生できないので、ムービープレビューで行う

ムービークリップとグラフィックの違い

トレーニングブック P97~101

グラッフィックにすると、シーンでも「ENTER」を押すと動きを見ることができる。

グラフィックだとループ再生の時にムラのある動きになってしまう。

繰り返しの動きをしたい場合はムービークリップを使用する。

作成したアニメーションがこちらです。

4コマ目

シンボルをステージ上で動かそう

モーショントゥーイーン

移動するアニメーション

場所の移動・回転・拡大と縮小・明度・透明・着色等がアニメーションとして動きを付けられる。

イージング

加速や減速の効果を出す機能

動きを増やしたい場合

ステージで一つの動きだけなので、シンボルに動きをつけて、それをステージ上で動かす。

ボールを弾ませる

ステージのフレームに、頂点、弾む位置、弾み終わった頂点をキーフレームにして、モーショントゥーイーンをかけた。

ボールを弾ませながら移動する

ボールをシンボル化して、そのボールを弾ませるシンボルを作成して、さらにステージで、横に動く動きをつけた。

5コマ目

タイヤを回転しよう

トレーニングブック P103~105

タイヤのオブジェクトをシンボル化して、さらに、そのタイヤが回転するオブジェクトを作成してそれをシンボル化

ステージ上に車の車体のシンボルとタイヤをあわせた。

自動車を動かそう

トレーニングブック P105~108

上で作成した課題をシンボル化して、それをステージ上で動きをつけた。

6コマ目

シンボルをパスに沿って動かそう

P109~113

モーションガイド機能を使う

「パスに沿って回転」を選択すると、車の傾きが変わる。

円状にシンボルを動かす

モーションパスを円形ツールで円上のパスを作成してその上を動くように設定した。

このページのトップへ移動する。

職業訓練WEBクリエーター科25日目

  1. トップ
  2. FLASHのソフトの使い方の勉強
  3. 職業訓練WEBクリエーター科25日目

職業訓練WEBクリエーター科25日目

使用ソフト・・・FLASH

使用教科書・・・FLASHトレーニングブック

授業の内容

1コマ目

消しゴムツールの使い方

流し消し

トレーニングブック P66

消しゴムツールのオプション選択の流し消しを選択する。

塗りを消したい場合、塗りの部分にポインタをあてて選択する。

線を消したい場合、線の部分にポインタをあてて選択する。

流し消しの課題

消しゴムツールを使いこなそう

トレーニングブック P66~67

消しゴムにはブラシツール同様、五種類の消し方が存在する。

  • 標準・・・塗り・線の両方を消す
  • 塗りを消す・・・塗りの部分だけ消す
  • 線を消す・・・線だけ消す
  • 選択された塗りを消す・・・選択した塗りの部分だけを消す
  • 内側を消す・・・消しゴムを開始した塗りの部分だけ消す

消しゴムツールの使用例

テキストの入力

トレーニングブック P69~76

FLASHでの文字の扱いは、WEBページ同様、コンピュータによっては表示される文字のイメージが異なるので、気をつける。

画像として(アウトライン化)すると、表示が崩れない

文字の入力

トレーニングブック P69

ツールボックスのテキストツールを使用する。

プロパティインスペクタで様々な設定を変更できる。

決まった幅に文章を入力する方法

トレーニングブック P70

テキストブロックを作成する。

作成法は、テキストツールボックスを選択し、一行分のテキスト幅をドラックして作成する。

文字詰めを調節する

トレーニングブック P73~74

プロパティインスペクタの文字間隔から調整する。

行間を調整してみよう

トレーニングブック P74

プロパティインスペクタのフォーマット部分で調節する。

テキストのアウトライン化

トレーニングブック P75

アウトライン化の方法・・・修正メニュー→分解または(CTRL+B)を二回繰り返す

最初・・・テキストが一文字ずつに分かれる。

文字情報が失われ、画像として処理される。

課題 テキスト操作の練習・オブジェクト操作の練習

例文から文字の操作を行う

テキスト操作の練習課題

ダイレクト操作ツールを使ってオブジェクトを操作

ダイレクトツールの操作練習

塗りやペイントツールを使ってオブジェクトの操作

塗りやペイントの操作練習

キャラクターの作成

トレーニングブック P78~87

キャラクターをシンボルに変換

修正→シンボルに変換(F8)

キャラクターの作成課題

このページのトップへ移動する。

職業訓練WEBクリエーター科24日目

  1. トップ
  2. FLASHのソフトの使い方の勉強
  3. 職業訓練WEBクリエーター科24日目

職業訓練WEBクリエーター科24日目

使用ソフト・・・FLASH

使用教科書・・・FLASHトレーニングブック

授業の内容

1コマ目

FLASH

今日から新しいソフト・・・FLASHの勉強に移る

テキストのサンプルデータをダウンロードする。 トレーニングブック P8ページ

FLASHについて・・・

トレーニングブック P10~

FLASHとは

アニメーションを作ったり、インタラクティブなコンテンツを作ることができるグラフィックソフトです。

簡単なバナーアニメーションから、複雑な構造を持ったアプリケーションまで、じつに幅広い用途に使われています。

FLASHのファイル形式

FLA形式で保存される。

書き出しファイル(WEBページで見ることができる拡張子)・・・SWFで保存されている。

よく使うツール

ステージ

画面の真ん中の白い部分レイアウトを作画を行う場所

タイムライン

横時間軸・縦レイアー 画面の上の部分

各コマの部分

ツールバー

画面左側で、様々な道具が入っている場所だいたいFireworksと同様

パネル

画面右側と下側に並んでいるパネル

よく使うパネル

プロパティインスペクタ・・・画面下側にあり、様々な設定をするときに使用するパネル

カラーミキサー・・・画面右側にあり、色を変更する時にいようする。

変形パネル・整列パネル・・・画面右側にないので、ウィンドウから出す。

ライブラリパネル・・・情報を管理するパネル

基本図形の作成

トレーニングブック P28~31

直線を描く・・・Fireworksと同様

ツールバーの線ツールを選択する。

マウスをドラック&ドロップすると線が書ける

Shiftキーを押しながら各と、水平・垂直・45度線を各ことができる。

ALTキーを押すと、両幅に線が描ける。

四角形を描く・・・Fireworksと同様

矩形ツールを選択する。

マウスを四角形の対角線上にドラック&ドロップをする。

SHIFTキーを押すと正方形が描ける。

ALTキーを押すと中心から四角形が描ける。

円を描く・・・Fireworksと同様

楕円ツールを選択する。

マウスを円の大きさの対角線上にドラック&ドロップする。

SHIFTキーを押しながら描くと正円が描ける。

角丸四角形を描く

矩形ツールを選択して、ツールバーの下にオプションツールがあるので、そこの角丸半径を指定して矩形を描く。

ドラック中にキーボードの↑↓の矢印キーで角の丸みを調整できる。

三角形を描く

矩形ツールを押しっぱなしにして、多角形ツールを選択する。

プロパティインスペクタのオプション設定から変の数を指定して描く

星を描く

多角形ツールからプロパティインスペクタからスタイルを星に変更して頂点を選択して描く

2コマ目

移動する際の注意事項

FLASHは塗りと線(枠の部分)が分かれて表示されているので注意する。

塗りの移動

塗られている部分の内部をクリックして移動したいところまでドラック&ドロップすると、塗られた部分だけ移動される。

線の移動

線の部分にマウスを持ってくとマウスの形が変わるので、そのまま選択して移動したい部分にドラック&ドロップをすると移動できる。

ダブルクリックをすると線が全部選択される。

塗り・線の両方の移動

塗りの部分でダブルクリックすると、塗りと線の両方が選択することができる。

線で塗りを分断する

いままで描かれた図形の上に図形をのせると、今まで描かれた図形が分断される。

3コマ目

バケツツールの使い方

トレーニングブック P38

塗りを変更したい塗られた部分にバケツツールを使って、色を変更する。

バケツのアイコンの形で液がこぼれている先の部分が塗りたい部分の先端

スポイトツールの使いかた

トレーニングブック P39

ある図形でしようした塗りの色と同じ塗りの色で塗りたい場合にこのスポイトツールを使って色を設定場合に使用する。

選択ツールから色を変更する。

トレーニングブック P40

複数の塗りの色を同時に同じ色に変更したい場合の時に使用すると便利

塗りが設定されている部分を選択ツールで選択して、プロパティインスペクタで色の塗りを変更する。

グラデーション

トレーニングブック P41~44

線状のグラデーションのかけ方

トレーニングブック P41

カラーミキサーパネルを使用してグラデーションを設定する。

グラデーションを調整しよう

トレーニングブック P42

ツールボックスの「塗りの変更」ツールを使用する。

グラーデーションの塗りの部分を選択すると、変更するための選択項目がでてくる。

放射状のグラデーションのかけ方

トレーニングブック P43

カラーミキサーパネルの塗りのスタイルを「放射状」を選択する。

放射状グラデーションの調整

トレーニングブック P43~44

ツールボックスの「塗りの変更ツール」を使用

グラデーションの色数を増やしてみよう

トレーニングブック P44

カラーミキサーパネルのグラデーション定義バー上でクリックする。

演習・・・描画の練習

トレーニングブック P35~37ページにあるイラストを描画してみよう。

描画の練習課題の成果

4コマ目

線のタイプを変更してみよう。

トレーニングブック P45~48

線の種類を変更してみよう。

トレーニングブック P45

ツールボックスの「インクボトルツール」を使用して線の種類を変更する。

線の種類の変更は、プロパティインスペクタで変更する。

線の種類は、太さ・線の形状が変更できる。

極細線と実線の違い

極細線は拡大しても1pxで表示される線なので、拡大してもつねに1pxで表示する。

破線のカスタマイズ

トレーニングブック P46~47

プロパティインスペクタのカスタムから変更する。

選択ツールで線を変更する。

線を「選択ツール」で選択するとプロパティインスペクタで線おスタイルを変更することができる。

インクボトルツールでは、

塗りの設定がされた部分に新たに線を追加することもできる。

図形の変更と複製

トレーニングブック P49~57

同じ図形の複製

トレーニングブック P49

コピーして、ペーストをすると図形の複製ができる。

「選択ツール」で角を移動しよう

トレーニングブック P50

「選択ツール」で頂点にポインタを持っていくとポインタの形が変わるので、変わったらドラック&ドロップする。

「選択ツール」で直線を曲線にする

「選択ツール」で辺にポインタを当てるとポインタの形が変わるので、変わったらドラックする。

「ダイレクト選択ツール」の使い方

トレーニングブック P51

fireworksと同様の使い方ができる。

図形の台形に変形してみよう

トレーニングブック P51~52

「自由変形ツール」を使用して変更する。

オプションで歪曲を選択する。

平行に変更してみよう

トレーニングブック P52

「自由変形ツール」を使用して変更する。

オプションで回転と傾斜を選択する。

図形を膨らませてみよう

トレーニングブック P53

「自由変形ツール」を使用して変更する。

オプションで、エンペローブを選択

課題の練習

魅力的なキャラクターに仕上げる。

変形ツールを使用して、魅力的なキャラクターに仕上げる。

変形ツールの練習の課題

5コマ目

いままで学習したものを生かして、イラストを描いてみよう。

イラストの描画の課題

6コマ目

鉛筆ツールとペンツール

トレーニングブック P58~62

鉛筆ツールで描く

トレーニングブック P58~59

鉛筆ツールを使用して線を描く

オプション設定で、ストレート・スムーズ・インクがある。

ペンツールで描く

トレーニングブック P60~62

Fireworksと同様の使い方

ブラシツールと消しゴムツール

トレーニングブック P63~68

ブラシツール

トレーニングブック P63~64

塗りには5種類のペイントの種類がある。

標準・・・上に描かれてペイントされる。線も塗りも両方ペイントされてしまう。

塗りをペイント・・・塗りの部分だけペイントされる。

背面をペイント・・・線と塗りのない部分だけペイントされる。

選択範囲をペイント・・・選択された部分だけペイントされる。

内側をペイント・・・塗りを開始した部分だけがペイントされる。

下の画像が各ブラシの特性

ブラシの特性の画像

塗りの固定とグラデーション

トレーニングブック P65

塗りが固定されると、グラデーションを描けるときに、全体でかけるか、個別にかけるかの違い。

グラデーションの違いの画像

このページのトップへ移動する。

サイズ変更ボタン サイズ縮小ボタン サイズ拡大ボタン サイズリセットボタン
RSSフィード

ブロとも申請フォーム
ブログ内検索

最近のエントリ
ユーザータグ
カレンダー

10 | 2018/11 | 12
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

ハマーにメールを送る

私ハマーにご意見・ご感想・調べてほしい事・オススメサイト等ありましたら気軽にメールしてください。

最近のコメント
全ての記事を表示する
カテゴリー
QRコード

QRコード

覗いてくれた人

月別アーカイブ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。