シェイプトゥイーンを作る回でございます。

雲が変形していく様子を作ってみたいと思います。

ではまず、新規作成

↓

レイヤー１にステージと同じ大きさの空色の背景を作りましょう。

1フレーム目を選んでＦ7で「空白キーフレーム」を挿入します。

補足：

タイムライン上のフレームにはいくつかの状態があります。

これについては後述します。

今は「オブジェクトを描くために必要な作業」と割り切ってください。

左のツールパレットの中から「矩形ツール」で四角形を描きます。

大きさをあとから「プロパティインスペクタ」の左下、

Ｗ（幅）、Ｈ（高さ）に数値を入力して550×400のサイズにします。

位置はＸ、Ｙともに0と入力します。

レイヤー名もつけておきましょう。soraとしておきます。

この背景は動かないのでこれで終了です。

次に、実際に動く雲を描きます。

まずは新規レイヤーを追加します。

名前をkumoにします。

この時、タイムラインの1フレーム目、

soraレイヤーに黒い丸が、

kumoレイヤーに白い丸が入っています。

この白丸が「空白キーフレーム」

フレーム上に何も存在していないことを表します。

黒丸が「キーフレーム」です。

空白キーフレームに少しでも何か描いたりテキストを

打ったりするとキーフレームに変わります。

さて、ブラシで雲を描いてみました。

kumoレイヤーの1フレーム目がキーフレームに

なりました。

この時注意しなければいけないのが、ツールパレットの

「オブジェクト描画モード」をオフにしておくことです。

Flashでは、「オブジェクト描画モード」を

オンにして描画　→　描いたものが「描画オブジェクト」に

オフにして描画　→　描いたものが「シェイプ」に

なります。

自分の描いたオブジェクトの状態はプロパティインスペクタ

から確認できます。必ずシェイプになっていることを確認

しましょう。なぜなら

シェイプトゥイーンはシェイプにしか適用できない

からです。

※ちなみに画像では、雲のシェイプではなくタイムラインの

20フレーム目（水色になっているところ）を選択してしまっているので、

プロパティインスペクタがフレームになっていて、シェイプかどうか

確認できない画面になってますスミマセン

おお気づけばウシミツドキ。

長くなってしまうので、続きはまた次回

もー笑うしかない

まあ・・・あれですよ・・・ボチボチつづけます・・・（消え入っている感じで）

でっまたもや気を取り直してですが（何度でも取り直すよっ）

今日授業でFlashが終わりまして・・・。

本当に理解したのか自分？という確認もこめて、タイトルのように

覚書としてまとめてみようかと！

タイトルにあるとおり、あくまで超初心者のための、ではなく

超初心者のですのでご了承くださいまし(^▽^;)

また講座ではなく覚書のため内容には責任もちませ（オイ）

ではでは、はじまりはじまり～。

Flash超初心者の覚書－その１－

そもそもFlashとは？

えー前回の内容は一度置いておいて、改めてFlashとは？と

まとめてみると、

・イラストや写真を素材に、動画をつくるソフトである

Flashのインターフェースを見てみると

（クリックで大きくなります）

こんなかんじ

左上に「レイヤー」というのがありますね。

そのヨコにずらーっと並んでいる小さな四角の列が「タイムライン」。

Flashで動画をつくる、ということは、

レイヤーに素材を配置し→タイムラインで動き方を指定

していくということでよいかと思います。

【補足】こうして作った動画ファイルの拡張子は.flaとなります。

flaファイルだけでは動画にはなりませんので、これを動画として

書き出します。このとき出来るのが.swfファイルになります。

さてこのレイヤーというのは、どんどん追加することができます。

新しく出来た新規レイヤーは現在選択されているレイヤーのすぐ上に

できますが、順番はドラッグしてあとからいくらでも入れ替えられます。

上にあるレイヤーほど、中央の画面（ステージ）で前面に表示されます。

タイムラインを構成しているコマを「フレーム」と呼びます。

1秒にこのフレームが何コマ進むかの速さを「フレームレート」と

呼びます。この数の大小で、動画の進む速さを調節できます。

数を変えるには右下に見える「フレームレート」右の四角の数字を

変えます。（写真では12になっています）

で、このレイヤーとタイムラインを使ったFlashでの動画の作り方は大きく

分けて３種類あります。それが

・フレームアニメーション

・モーショントゥイーン

・シェイプトゥイーン

の３つです。次回はまずシェイプトゥイーンから簡単に説明します。

毎日書くつもりでいたのに、２日も空いてしまった

でも昨日は、Ｆｌａｓｈ初回の授業だったのに、ここのところの

睡眠不足がたまったのかもう・・・眠くて眠くて・・・

（Ｍ先生ホントにすいません）

これはマズいと思い、早めに寝たのです・・・ま、言い訳だけどネ

よし、気を取り直してまたブログ続けるぞ！

はい、今日はＦｌａｓｈ２日めでございました・・・

やー、もう、あたまが

いやなんで波平さんかって、ツッコまれると困るのですが、

絵文字で自分の気持ちにピッタリくるものを探したらコレでした。

つまりはさっぱりワケがわからないということですな・・・

なんて言っちゃうと一生懸命教えて下さっているＭ先生と

Ｔ先生を泣かせちゃうので、ワケがわからなかった、としましょう。

ので、

一応次の授業に進んでも大丈夫なくらいにはなれたかな？

という確認の意味をこめ、

私的本日マデのＦｌａｓｈ　授業のポイント覚書

をまとめておこうかと。（墓穴かな？）

えーと、Flashはみなさまも知ってのとおり動画を作るためのソフト

なのですが、これまでのソフトでお世話になっていた「レイヤー」に

時間軸の概念が加わったもの、という理解で良いかと思うのです・・・

（スゴクおおざっぱですが）

レイヤーがタテ軸だったとしたら、タイムラインというヨコ軸があり、

それはフレームというセル（もしくはコマ？）で構成されている。

再生スピードは1秒あたりのフレーム数が何コマかで調整でき、

この1秒あたりのコマ数をフレームレートという。

長くなりそうなので、消えるとコワいので２回にわけます

続きはまた明日・・・

書けるかな？うんきっと書くさ・・・書くよ、うん、多分・・・

明日は仕上げに、架空レストランのＴＯＰページをそれぞれが作ることに。

授業時間内で終わるのだろうか心配ですが、がんばりマス。

さてさて本日は、私的　役にたつ頻用ショートカット一覧

をまとめてみたいと思います。

【画面表示】

実寸表示　　　ｃｔｒｌ　＋　1

画面表示　　　ｃｔｒｌ　＋　0

200％表示　　ｃｔｒｌ　＋　2

300％表示　　ｃｔｒｌ　＋　3

【ズーム】

ズームイン　　ｃｔｒｌ　＋　スペース

ズームアウト　ｃｔｒｌ　＋　スペース　＋　Ａｌｔ

もしくはｃｔｒｌを押しっぱなしにしたままマウスのホイールを使用

【選択ツール】

どんなツールを選択していても　ｃｔｒｌ　で一時的に選択ツールになる

（選択／ダイレクト選択は最後に選んでいたほうになる・・・選択・ダイレ

　クト選択の切り替えは、いろいろ探してみたけれど方法が見つからず）

一時的にでなくてよい場合は

ダイレクト選択　Ａ

選択ツール　　　Ｖ　　　　

【てのひらツール】

どんなツールを選択していても　

スペースキー　で一時的にてのひらツールになる

授業で習ったこと＋個人的に発見or調べたことの覚書です

そして、拡大・縮小ツールのショートカットを調べたくて発見した

今日の素敵サイトがこちら

http://redline.hippy.jp/

Webページの内容がどんなものか、一目瞭然でわかりやすいですよね！

しかも見た目も美しい

色使いも意外な組み合わせなのに全然野暮ったくないし。素敵です！

あーーー今日も今日とて午前様

少なくとも0:30までには寝られるようにしたいなあ

ではお休みなさい！

いろいろやるコト片付けてたらすでにこんな時間

しかし毎日つけるぜ！と決めたからには例え一行でも書かねばっ

（あっ、学校のある日は、というイミです）

今日はＧＩＦアニメを作りました！

ちょっとアタマこんがらがって苦労したけど

自分のイメージした通りに動かせたときの感動はカクベツ

４時間目いっぱい＆放課後使ってみんなそれぞれオリジナルの

アニメを作ったのですが、家に帰ってから復習兼ねてもうイッコ

作るゾ！と思っていたのに結局やれず。

明日と木曜日は夜用事があるし・・・水曜日も用事入るかも

水曜に用事入らなかったら作ってＵＰしたいな(｀・ω・´)

しっかし、今はまだ、イラレとフォトショでなじみのある

Ｆｉｒｅｗｏｒｋｓだからいいとして、

これからＦｌａｓｈとかＨＴＭＬ/ＣＳＳになってゆくと

シッカリ復習しないとほんとに追いつけなさそう

卒業までは、というか少なくともサイト制作に入るまでは、

夜の用事は控えねばな・・・

控えたいな・・・

控えるよう努力をしたいと思うな・・・

控える努力をすることを検討したいと思うな・・・

思うな・・・

な・・・（エコー）

そして今日は素敵ＨＰ貼るのはムリそう

こんなに毎日毎日アタマ使ったのひさびさだからなあ～

しかもストレッチもサボりがちだったから上半身固まりまくってる！

さて、今日はＦｉｒｅｗoｒｋｓ３日目。

操作的には、新しくお目見えしたのは

・ルーラー部分からドラッグしてガイドを作成

・文字にフチを入れる

・スライス

あとは、操作的には既に習ったコトなんだけど、

グラデーションの使いどころを、実例で習えたのが

すごく参考になりました！

上手く使うとグラデーションってこんなコトできるのね

あと文字にフチをカンタンにいれられることに感動

イラレで文字のフチ作ると、アウトラインかけても

字体によっては汚くなったりしませんか？

私がやりかた知らないだけかな

それにしても、今日苦戦したのは文字。

これまで

「テキスト入れるときはボックスを作らないようにね！」

って教わっていたのですが、

本日はある部分でテキストＢＯＸを使用。

そのテキストＢＯＸがなかなかうまく扱えず・・・。

文字がもじゃもじゃ～っと、ぐしゃ～っと

なってしまったり、ＢＯＸできた、さあ

入力、と思ったら消えてしまったりとか・・・。

何度も何度も・・・

これはなんだかコツがあるっぽいので慣れですかねえ。

そんなこんなでお昼をはさんで午後からはスライスを教わる。

しかーし！　お昼ご飯をおなかいっぱい食べたため２時過ぎ

ごろからめっさ眠くなり意識がもうろうと・・・

うーむ、これからどんどん難しくなるのにこれではイカン。

月曜日からは腹８分目にせねば、と自分に誓ったのでした。

さてさて、それでは

本日の素敵サイトコーナー！

http://hanamichiya.jp/

何がよいってまず何と言っても見た目が好みです（キッパリ）。

色使いも写真もイラストも素敵！

グローバルナビゲーションがタグみたいになっていて、

下のほうにスクロールしていってもどんどんついてくる。

ＴＯＰへ戻るボタンも蝶々が運んでくれます。

これはいつでも、どこを見ていてもいきたいところにスグ

飛べていいなあと思いました。

ただ、ガーっとスクロールしたときにはチョロチョロ

動いてちょっと気になるかも。

あとは、情報が若干少ないのかな？と。

お店のページなのだから、ブログにではなく商品紹介の

ところに多少お値段の案内は欲しいと、私なら思うかな。

でも個人さんのお店のようなので、これだけ凝っていれば

十分じゃないでしょうか。行きたくなったし

これはお店の人が作ったのかなー、それともデザイナーに

依頼したのだろうか。気になるトコロです

おお、なんだか今日はやたら長い日記になってしまったぞ

ではでは、今日はこれにて！

今日はヘッダ・フッタの部分が完了し、サイドバーにバナーを作る作業まで進みました。

新しく習ったワザは

・フォントのダウンロード＆インストールの仕方

・図形のパスを切り抜く

・グラデーションをそのままに色を濃くする

・グロー

と、角丸のつけかた。

かくまる、かくまるといっていたら「かどまるだよ（笑）」とM先生に言われました（笑）

あとは、バナーやアイコン、グローバルナビゲーションを作るときのコツというか、

心得てきなモノ。

その１）メリハリをつけるべし！

その２）つめこみすぎないこと！

その３）素材はムリヤリ全部みせようとするのではなく効果的にトリミング！

その４）グラデーションとフォント、ドロップシャドウの使い方にセンスが出る！

そして本日のM先生のお言葉でココロに残ったもの

「デザインは削っていくことだと、僕は思いますよ」

ふむふむー。なるほど

家に帰り、今日はヘッダのところまで復習して同じモノをつくりました。

うーん、でもこのままだと家での復習がぜんぜん学校に追いつかないな

週末に挽回できると良いのですが

そして今日から、なるべく（←ココ重要）　一日ひとつ、サイトのURLを貼っていこうかと。

自分がこれ好きだなー、と思ったものでもいいし、自分は好きじゃないけど

とても評価されてるらしい！というのとか。

で、なるべくどこが良かったのかとかここが評価されてるんじゃないかとか、

何を伝えようとしると思うとか感想を書いていきたいと思いマス。

ひとまず今日はコレッ

http://pucchokun.jp/

理由はカンタン、ユーザーがこんな風に参加できるんだー、と思ったから。

ちょっと時間が時間だけに、自分で作ってみてはないんだけど、時間ができたら

試してみようかと思いマス。

あわわわ今日もこんな時間・・・

ではでは寝ます。おやすみなさーい

長きにわたった前フリが終わり、今日からいよいよ授業本番！

まずはFireworksからスタート。

M先生いわく、

「FireworksはPhotoshopとIllustratorを足して１０で割ったうちの２か３くらいのソフト」とのこと。

なるほど、左側のツールバーも「ビットマップ」「ベクター」などそれらしく分かれてる！

イラレ＆フォトショ歴がそれなりだからかも知れないけれど、ぱっと見て何がドコにあるか

分かりやすいパレット構成になっている気がしました

今日やったコトを思いつくまま列挙してみると

・新規ファイル作成の仕方

・矩形の描き方（サイズ・位置・色の指定の仕方）

・レイヤーについて

・画像の配置の仕方

・マスクについて

・文字入力

・ドロップシャドウ

・グラデーション

・均等配列

・パス→マーキーのやりかた

大雑把にわけるとこんな感じかな？

けっこういろいろ詰め込んだのね

家に帰って、教科書についていたDVDを使って復習してみました★

今日おそわったトコの最後までは時間的にいけなかったけど

基本的なところの復習は出来たんじゃないかな

もうこんな時間だ－

あしたの授業に響くから寝なきゃっ

Webの学校でアドバイスいただいたのでさっそく実行です。

今日は業界や先輩方の講演を聞きました。

詳しい感想はレポートの下書きをWordで保存したので、今日はひとまずアメブロID取得

しただけでヨシとしよう

ID探すのにえらい時間かかっちゃった思いついたのほとんど使われてて

ひとまず花言葉が気に入ったのでcersisに決めました～

ラナンキュラスが使われてたのはショックだったなまあよい名前が見つかったからいっか

ではでは今日は寝ます～