m-School (エムスクール)は、駿河台学園グループが運営する
法人向け研修トレーニングセンター、およびレンタル教室・会議室です。

2009年07月21日

マスクアニメーションの作り方

Flashの基本機能がわからないという方や、素朴な疑問をさくっと解決したい!といった方のために、毎週1ネタピックアップしてお届けするこのコーナーチャッピー

第7回の今日は、

マスクアニメーションの作り方


普段、チャッピーが授業をしていて「こんな感じのアニメーションを作りたいんだけど…」と受講者の方からご質問をいただくことがありますが、大抵のものはマスクアニメーションで解決できるものだったりしまするんるん
作成するのも簡単だし、マスクを覚えておいて損はないはずダッシュ(走り出すさま)ということで、今日はマスクアニメーションの作成方法についてお話しますぴかぴか(新しい)

作成手順


1まずはマスクをかけたい素材を準備します。(今回はキャラクターをグラフィックシンボルに変換して配置しています。)
素材の配置.jpg

2レイヤーを追加して、マスクとして切り抜きたい形の図形を描画します。(今回は楕円ツールで正円を作成します。)
図形の描画.jpg

3描画した図形をムービークリップに変換して、モーショントゥイーンアニメーションを作成します。
モーショントゥイーンアニメーションの作成.jpg

4アニメーションを作成したレイヤー名の上で右クリックをして、「マスク」を選択します。
マスクの設定.jpg

マスクアニメーション.jpg

5マスクアニメーションの完成です。ムービープレビューで動作を確認してみましょうexclamation
うまく動きましたでしょうか??
うまく動かなかったら…コメントしてくださいあせあせ(飛び散る汗)
この際クオリティは気にせず(本当はダメだけど)、じゃんじゃん作って表現の幅を広げるのもいいかもですチャッピーぴかぴか(新しい)

▽Flashを初めて習得する方はコチラ
Adobe Flash CS4入門講座
posted by チャッピー at 11:55
連載:Flash Beginner's School | コメント(0) | トラックバック(0)
2009年07月15日

Flash Player(フラッシュプレイヤー)とは?

Flashの基本機能がわからないという方や、素朴な疑問をさくっと解決したい!といった方のために、毎週1ネタピックアップしてお届けするこのコーナーチャッピー

第6回目の今日は、

Flash Playerとは?


Flash Playerとは、Flashで作成されたコンテンツを再生するためのWebブラウザ用のプラグインです。
Flashのバージョンアップに伴い、Flash Playerもバージョンアップしています右斜め上
Flash Playerは、最新版のFlash Player10で86.8%、1つ前のFlash Player9で98.8%と、ほぼ100%に近い割合で普及していますぴかぴか(新しい)(2009年7月現在)
最新のPlayerでないとFlashの新しい機能や処理を使用したコンテンツに対応できず、不具合が起こったり再生できない場合がありますあせあせ(飛び散る汗)ので、Flash Playerは常に最新を心がけましょう目るんるん
(最新のFlash PlayerはAdobe社のサイトから無料でダウンロードすることができますひらめき

さて、前回の記事でお話したActionScript2.0と3.0の違いについて、ご紹介しきれなかった実行環境についてお話したいと思いますかわいい
Flashコンテンツを制作する上で、Flash Playerのバージョンは非常に重要です。ActionScript3.0を使用するには、Flash Player9以上でないと再生することができませんダッシュ(走り出すさま)
Flash Playerの機能の一つとして、ActionScriptを処理するための仮想コンピューターをAVM(ActionScript Virtual Machine)と呼びます。
Flash Player9からは、従来のAVMとは別に、ActionScript3.0を処理することができる、より高速なAVM2が搭載されましたexclamationそのためActionScript2.0と、3.0では実行環境が異なりますひらめき

このように、Flashでコンテンツを制作する際は、Flash自体のバージョンだけでなく、ActionScriptやFlash Playerのバージョンもきちんと決めてから取りかかる必要性があるんですね晴れ
チャッピーも日々勉強中です。
ではまた次回〜手(パー)
posted by チャッピー at 09:23
連載:Flash Beginner's School | コメント(0) | トラックバック(0)
2009年07月07日

ActionScript2.0と3.0の違い

Flashの基本機能がわからないという方や、素朴な疑問をさくっと解決したい!といった方のために、毎週1ネタピックアップしてお届けするこのコーナーチャッピー

第5回目の今日は、

ActionScript2.0と3.0の違い

Flashによるインタラクティブなコンテンツ制作にはかかせない存在のActionScriptについてお話します。
ActionScriptとはFlashに搭載されているプログラミング言語で、ユーザーのマウスカーソルに合わせた動作や、フレームアニメーションの制御など、ActionScriptを記述することで実現できることは多岐にわたりますぴかぴか(新しい)
Flashのバージョンアップと共にActionScriptも進化を続けてきています右斜め上その最新バージョンがActionScript3.0ですひらめき
では両者にどんな違いがあるのか比較していってみましょうチャッピー


プログラミング言語

2.0と3.0、数字が違うだけだし書き方もそんなに変わらないんじゃないの?と思いがちですが、実は全然違いますあせあせ(飛び散る汗)ActionScriptには1.0というバージョンもありますが、1.0と2.0に関しては1.0の機能を拡張してできたのが2.0のようなものなので互換性があったんですダッシュ(走り出すさま)しかし、2.0(および1.0)と3.0は、ほぼ別言語として開発されたため互換性がありませんたらーっ(汗)

↓同じ動作を実現するための記述
<ActionScript2.0>
AS2.0

<ActionScript3.0>
AS3.0

えぇ〜せっかく2.0覚えたのに全部無駄になるのー?もうやだ〜(悲しい顔)と思ったあなた、(そんなに)落ち込むことないですよひらめき書き方こそ違いますが、似ている部分もおおいにあるので、別のプログラミング言語よりは習得しやすいと思います手(チョキ)(使いわけられるようになるまでは、ごっちゃになっちゃうかもしれないけど…)

ActionScriptの記述場所

ActionScript2.0が記述できる場所は、フレームムービークリップボタン3つです。それに対し、ActionScript3.0はフレームのみです。一見すると活用できる範囲が狭まった?と思ってしまうかもしれませんが、ムービークリップやボタンに記述できる場合でも、フレームに記述することが推奨されています。記述場所を分散してしまうより、まとめておいた方が修正・変更を加える時など非常に管理がしやすいですし、記述場所がまとまっていることによってチームで共有しやすくなりますぴかぴか(新しい)現在ActionScript2.0や1.0を使用している方でも、今後ActionScript3.0に以降を考えている場合はフレームに記述することに慣れておくのがオススメですかわいい


あともう1つ、実行環境にも大きな違いがあるんですが…次回、FlashPlayerについてと一緒にお話したいと思いまするんるん
それではまた次回〜手(パー)

▽ActionScript3.0を習得する方はコチラ
文系のためのActionScript3.0入門講座
posted by チャッピー at 09:45
連載:Flash Beginner's School | コメント(0) | トラックバック(0)
2009年06月30日

ムービークリップシンボルとグラフィックシンボルの違い

Flashの基本機能がわからないという方や、素朴な疑問をさくっと解決したい!といった方のために、毎週1ネタピックアップしてお届けするこのコーナーチャッピー
 
第4回目の今日は、

ムービークリップシンボルとグラフィックシンボルの違い


アニメーションさせる時など、シンボル変換することが必須ですが、シンボルタイプにはムービークリップグラフィックボタンの3つが存在しますひらめき
ボタンは、ボタンを作成する際に選択します。
アニメーション作成時には、ムービークリップまたはグラフィックを選択するのですが、ではその違いは何なんでしょう目

ムービークリップシンボルはActionScriptで制御できたり、サウンドやフィルタなどのFlashの機能を追加することができますぴかぴか(新しい)メインタイムラインで設定したアニメーションとは別に、ムービークリップシンボル内のタイムラインでメインタイムラインとは別の動きをつけることが可能なため入れ子構造にすることができまするんるん
メインタイムラインのフレーム数に依存することなくアニメーションするので、終始羽根をばたつかせる鳥や、みつばちなどのアニメーションも簡単に作成することができますかわいい

グラフィックシンボルはActionScriptで制御することができませんダッシュ(走り出すさま)またメインタイムラインに依存するため、グラフィックシンボル内で設定したアニメーションはメインタイムラインのフレーム数によっては再生されなかったり、途中で停止してしまうことがありますあせあせ(飛び散る汗)
よって静止画や入れ子構造にはしない単純なアニメーションを作成する時などに適していますぴかぴか(新しい)一般的にムービークリップシンボルよりも容量が低いと言われていまするんるん

このように2つのシンボルタイプには、それぞれの特性があるのでシンボル変換する際は、その特性を考慮してどちらを選択したら良いのか考えることが大切ですねチャッピー
それではまた次回手(パー)

▽Flashを初めて習得する方はコチラ
Adobe Flash CS4入門講座
posted by チャッピー at 17:28
連載:Flash Beginner's School | コメント(0) | トラックバック(0)
2009年06月23日

モーショントゥイーンアニメーションの作り方

Flashの基本機能がわからないという方や、素朴な疑問をさくっと解決したい!といった方のために、毎週1ネタピックアップしてお届けするこのコーナーチャッピー
 
第3回目の今日は、

モーショントゥイーンアニメーションの作り方


アニメーションといえば、Flash。
Flashといえば、アニメーションexclamationということで今回はFlashアニメーション作成において必須事項のモーショントゥイーンについてさくっとお話したいと思いますダッシュ(走り出すさま)
ひとくちにFlashアニメーションといっても、様々な種類が存在します。モーショントゥイーンアニメーション、フレームアニメーション、
シェイプトゥイーンアニメーション、CS4から仲間に加わったインバースキネマティックポーズアニメーションなど。その中でもまず覚えておきたいアニメーションが、モーショントゥイーンアニメーションですぴかぴか(新しい)

作成方法


今回はムービークリップにシンボル化した四角形を1〜24フレームでアニメーションさせます。

1.ムービークリップを配置したレイヤーの1フレーム目のキーフレームを右クリックして[モーショントゥイーンを作成]をクリックします。
モーショントゥイーンを作成

2.タイムラインにモーショントゥイーンが作成されます。
モーショントゥイーン作成後のタイムライン

3.作成したモーショントゥイーンの24フレーム目で、ステージ上に配置した四角形を任意の場所までドラッグします。
アニメーション作成

4.[制御]メニューの[ムービープレビュー]を実行して動作を確認します。
アニメーション作成後

以上でモーショントゥイーンアニメーションの完成です。
簡単過ぎてビックリです。。。もちろん、今回作成したアニメーションは単純なアニメーションなんですがあせあせ(飛び散る汗)どんなイラストを動かそうと、どんな動きをつけようと基本は一緒ですひらめき
なので手順を覚えてしまえばこっちのもの黒ハートあとはあなたのイマジネーションしだいだぴかぴか(新しい)(無責任)
というのは半分冗談で、Flash Beginner's Schoolでも色んなアニメーションの作成方法をご紹介していきたいと思います手(チョキ)
Flash初心者の方じゃなくても、この機能よくわかんないよたらーっ(汗)って疑問がありましたらじゃんじゃんお聞き下さいわーい(嬉しい顔)
それではまた次回〜チャッピーかわいい

▽Flashを初めて習得する方はコチラ
Adobe Flash CS4入門講座
posted by チャッピー at 15:08
連載:Flash Beginner's School | コメント(0) | トラックバック(0)
2009年06月16日

Flashはどこで買えるの?

前回から始まりました、Flash Beginner's School
Flashの基本機能がわからないという方や、素朴な疑問をさくっと解決したい!といった方のために、毎週1ネタピックアップしてお届けするこのコーナーひらめき
 
第2回目の今日は、

Flashはどこで買えるの?


前回はFlashとはなにができるものなのか、というお話をしました。
前回の記事を読んで、Flashやってみたい!と思って頂けた方には朗報です耳ぴかぴか(新しい)
Adobe Flashは現在販売されているAdobe Flash CS4 Professionalが最新版ですexclamationCS4以前のバージョン(Flash CS3やFlash 8)は、現在販売されておりませんダッシュ(走り出すさま)もしかしたら家電量販店などで在庫限りで販売されている可能性があるかもしれませんが、CS4発売から半年以上経ちましたし…せっかくですから最新版をゲットしましょうるんるん
アドビストアで購入ですが、m-Schoolでも購入できちゃいます目定価より少しお安く提供しておりますのでお得ですぴかぴか(新しい)ぴかぴか(新しい)
さらに、m-Schoolの講座を受講頂いた方には特別価格でご提供exclamationこの機会にぜひ、ご検討頂けると幸いですチャッピー
 
※いきなり購入はちょっと…という方は、アドビシステムズのサイトで
30日間無償で使用できる体験版をダウンロードしてみてくださいね。
 
Adobe Flash CS4 Professional

▽Flashを初めて習得する方はコチラ
Adobe Flash CS4入門講座
posted by チャッピー at 13:34
連載:Flash Beginner's School | コメント(0) | トラックバック(0)
2009年06月09日

新連載!『Flash Beginner's School』

「今さら聞けないAdobe Acrobat(アクロバット)& PDF」
「CSS 3分コーディング」 などの、エムスクール風な連載シリーズに、新たなシリーズが加わりますチャッピーかわいい

Adobe Flash CS4 Professional今度のシリーズは、Flash Beginner's Schoolです。

最新のCS4で更なる進化を遂げた、Adobe Flash。
新機能は元より、そもそもFlashの基本機能がわからないという方や、
素朴な疑問をさくっと解決したいひらめきといった方のために、毎週1ネタピックアップしてお届けするこのコーナーるんるん
 
第1回目の今日は・・・

Flashってなにができるの?


Adobe Flashは、多くのユーザに使用されているリッチコンテンツ制作ソフトです。
リッチコンテンツというと、動画(ビデオ映像、アニメーション、3D)や音声(ナレーション、音楽)などを組み込んだ表現力豊かなコンテンツのことを指しますが、リッチコンテンツ制作といえばFlashexclamationと言ってしまっても過言ではありませんダッシュ(走り出すさま)
Flashで作られたコンテンツを再生するプレイヤーであるFlash Playerの普及に伴い、Flashの需要は飛躍的に伸びましたグッド(上向き矢印)
FlashコンテンツがPCで再生できるのは、もはや 当然 のことのようになっていますわーい(嬉しい顔)

Flash CS4のインターフェイスFlashは、直感的にわかりやすいユーザーインターフェースや、エンターテインメント性のあるインタラクティブなコンテンツ制作を得意としていますパンチ
バナー広告や、アニメーション、ゲームなど、Webを中心とした様々な場面でFlashは使われています目

 
またPCだけでなく、モバイル端末上でのFlashコンテンツの再生や、ポータブルミュージックプレイヤーの操作パネルなど、様々な場面でFlashは活躍していますぴかぴか(新しい)ぴかぴか(新しい)

まだまだFlashのできることについては語り尽くせませんが、Flashの魅力をお伝えするには、実際に触ってアニメーションやバナー広告を作成していただくのが1番かも(?)とりあえず使ってみたいexclamationという方は、ぜひm-SchoolのFlash CS4 入門講座を受講してみてくださいねチャッピー
きっとあなたもFlashの魅力を実感するはずです揺れるハート
posted by チャッピー at 11:42
連載:Flash Beginner's School | コメント(0) | トラックバック(0)