Flash Professional CC 2015 基本講座

Flash PlayerとHTML5のインタラクティブアニメーション

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Flash Professionalでつくったインタラクティブなアニメーションは、Flash Playerだけでなく、HTML5などのコンテンツにすることができます。
講師:
07:26

字幕

このレッスンではFlash Professional CC 2015 を使ってどのような コンテンツが作れるのか簡単に ご紹介をしますこれがFlash Professional CC 2015 で開いた―アニメーションのコンテンツです中身の細かいところは あまり気にせずに何ができるか というところに集中してご覧くださいまず 背景画像がありますそれから ペンギンのパーツがあってこのペンギンのパーツは実は この「ライブラリ」 という中に含まれているのですけれども簡単なアニメーションが ありますそれから 同じこのライブラリの中にはサウンドが配置されていてこんな曲が入っていますそのサウンドが 実はこのコンテンツに「サウンド」と ここに書いてありますがこの1マスに 配置されていますそして scripts というこれはレイヤーというのですけれどもそこにはプログラムが書いてありますこれが このコンテンツにインタラクションを与えますどのようなインタラクションか というのは出来上がりを見て確認したいと思いますけれどもプログラムが書いてありますこれは ActionScript 3 というプログラムですではこれを ブラウザで実際に確認してみたいと思いますこれはもう出来上がっていますのでそれを見てみましょう「制御」>「ムービープレビュー」>「ブラウザーを使用」 を選択しますコンテンツが再生されましたその中には 背景画像とペンギンのアニメーションそれから サウンドも再生されていますあと プログラムなのですがインタラクションが加えられていますそれは具体的にはペンギンをクリックすると 上から落ちてくるクリックしたときに落ちてくる ということでプログラムのインタラクションも加わっていますこのように Flash コンテンツの中には画像や アニメーション サウンドプログラムによるインタラクションといったものが加えられますそしてここで一つ 確認しておきますが右クリックをするとAdobe Flash Player 18.いくつについてと書いてありますのでFlash Player で再生されていることが分かりますさて このコンテンツはFlash Player 向けに作成されていますこの「プロパティ」 というところを見てみると「ターゲット」としてFlash Player というのがありますねここを変更すればFlash Player 以外にもAIR という デスクトップアプリケーションに作り変えることもできますそれから アプリケーションにしてしまえばAndroid iOSといったものでも 再生が可能ですブラウザで Flash Player のコンテンツは再生できないのですけれでもアプリケーションであれば再生ができる―ということに まだご存じない方も多いと思うのですがアプリケーションであればモバイルでも 可能ですそういったものに使うことができますFlash Player ではなくHTML 5で再生したいあるいはモバイルのブラウザで見たいという場合はですねHTML 5 に変換することもできますそれは この「コマンド」 というところで「他のドキュメント形式に変換」 ということでここでは HTML 5 Canvasに変換してみましょうそうしますと現在「Sample.fla」 という名前でこのファイルは作られているのですがこれが変換されて 新しい名前になりますOK しましょう「Sample_Canvas.fla」 ということでこれが Canvas 向けのコンテンツに すでに正常に変換されましたということで これでもう Canvas 向けのコンテンツになってしまっていますただし ちょっと注意することがありますのでまた ブラウザで確認してみましょう「制御」で メニューは同じです「ムービープレビュー」>「ブラウザーを使用」しますちゃんと背景はありますしサウンドも鳴っていますペンギンのアニメーションも あるのですが先程と ちょっと違いますね何かというと ブログラムの部分インタラクションが 失われてしまっていますというのは HTML 5 ではActionScript 3 が使えませんJavaScript を使わなければいけないのですねですから その書き換えが必要となりますFlash Professional CC で先程の scripts の部分をちょっと確認してみましょうスクリプトは ActionScript 3 が使えませんJavaScript でないといけないということなのでこれは実は 無効になっているのですねJavaScript で書き換えてくださいということで書き換えなければいけない ということはこれは原則なのですけれども実はちょっと このスクリプトには工夫が加えてありますHack というのでしょうかこのままでも動いてしまうのですね今は このコメントの記号で無効になっているのですが 有効に直します取ってしまいましょうそれから 実はアニメーションの方にも1個 スクリプトが書いてあるのでアニメーションを ちょっと確認します開きましてやはり 無効になっていますこれをコメントというのですがこれを有効にしますさて 無効になっていたものを有効にしただけであとは 何一つ変えてありませんもともと書いてあったスクリプトをそのまま有効にしてしまいましたでは これで改めて確認をします「制御」>「ムービープレビュー」です今度はペンギンが上から落ちてこないですねちゃんと歩いていますそして クリックすると上から落ちてくる ということですちゃんと インタラクションが戻りました今回は 簡単なプログラムでしたのでそのまま 使うことができたのですがもちろん 原則としてはActionScript 3 をJavaScript に書き換えるということがHTML 5 Caanvas のドキュメントでは必要になりますけれども 元々の仕様というのは 実はECMA(イクマ) という仕様に則っていますのでActionScript と JavaScript の基本的な考え方は一緒ですですから 考え方は同じで細かい文法のところを直してあげればいい ということですそれから予め 両方で使うということがわかっていればActionScript も JavaScript も両方うまく 書き換えやすいように作るということは可能なわけですそしてなにより画像や サウンド アニメーションといったものはそっくりそのまま 使えるわけですですから Flash Professional というのはFlash Player だけのコンテンツ作成のアプリケーションではなくHTML 5 の Canvas あるいはアプリケーション向けのコンテンツも同じこのアプリケーションの中でできてしまうということですこのレッスンではFlash Professional CC 2015 でどのようなコンテンツができるのかインタラクティブなコンテンツをマルチプラットフォームでできるということをご紹介しました

Flash Professional CC 2015 基本講座

Flash ProfessionalはPCだけでなく、モバイル向けにもインタラクティブなアニメーションが作れるソフトウェアです。動画はFlash PlayerだけでなくAIRやHTML5にも書き出せます。このコースではその基本的な操作方法からグラフィックの描画やアニメーション、画像やサウンドの扱い方、そしてActionScriptなどについて説明します。

7時間21分 (78 ビデオ)
現在、カスタマーレビューはありません…
 

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。