『プロフェッショナルのためのラーニングスクール』
アドビ認定トレーニングセンター m-School で短期集中マスター。

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

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

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

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

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

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

▽Flashを初めて習得する方はコチラ
Adobe Flash CS4入門講座
▽Flashの基礎を習得する方はコチラ
Adobe Flash CS4: Fundamentals

「今さら聞けないAdobe Acrobat（アクロバット）& PDF」も第三十回目を迎えました！引き続き四十回目指してこれからも紹介していきます。さて今回は、Acrobat.comでPDFのライブコラボレーションをご紹介します。

今回の機能

送信してライブコラボレーション

ライブコラボレーションを使用すると、オンラインセッションで他のリモートユーザと一緒にPDF をレビューすることができます。ライブコラボレーションセッションでは、それぞれの参加者に同じ文書とライブチャットウィンドウが表示されます。ページを共有しているときは、文書のページ送りと拡大表示がすべての参加者に対して共通に行われるため、全員が文書の同じ箇所を見ながら作業を進めることができます。

操作方法

1.コラボレーションを行いたいPDFファイルを開きます。[ファイル]-[コラボレーション]-[送信してライブコラボレーション]を選択します。



2.[Adobe ID]を入力して[サインイン]を行います。
※AdobeIDは、アドビストアの利用や、メールマガジン、メンバーシップコミュニテイ、製品の体験版ダウンロードなどアドビ社の各種サービス受ける時に必要になります。IDの登録は無料です。IDは、[Adobe ID]入力画面の上にあるリンクをクリックして登録ができます。



3.コラボレーションを行いたい、相手のメールアドレスの宛先を指定し、電子メールの内容を決めて送信します。



4.ライブコラボレーションウィンドウが開きます。[ページ共有を開始]ボタンをクリックします。

※依頼者の画面


5.ページが共有されます。チャットに入力した内容も共有されます。

※依頼者の画面


※ライブコラボレーションウィンドウ


6.共有中は、共有者のマウスカーソルの位置も把握することができます。

※共有側の画面


※ライブコラボレーションウィンドウ

活用法

遠方同士でも、リアルタイムでドキュメントの内容確認ができるため、ミスを軽減させ効率良く作業が進行できます。
さて次回は、PDFのOCRテキスト認識を紹介します。

CSS（スタイルシート）の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今回のテーマ：CSSでボタンのロールオーバーをデザインする

マウスカーソルを重ねたときに、デザインが変わるボタンをCSSだけでデザインする方法をご紹介します。

:hover疑似クラスとbackground-imageを使います。CSSの基礎知識がある方やCSS講座を受けていただいた方ならさくっとお気付きかもしれませんが、ちょっとした工夫があったりします。先日の講座でもご質問いただいたので改めてご紹介します。

まず、根本の発想は「マウスカーソルが重なったときにbackground-imageで画像を切り替える。」わけですが、「別の画像ファイル」ではなく、「同じ画像ファイル」を使います。

ポイントは、背景画像をずらす！です。

このようにします。

<ul>
	<li>Link 1</li>
	<li>Link 2</li>
	<li>Link 3</li>
</ul>

ul {
	margin: 0px;
	padding: 0px;
	list-style:none;
}
ul li {
	/* li要素を横に並べる */
	float:left;
	/* 1行の高さ＝背景の高さにして文字を縦軸中央に */
	line-height: 45px;
}
ul li a {
	 /* a要素をブロックに */
	display: block;
	/* 背景画像と同じ幅高さ指定 */
	height: 45px;
	width: 160px;
	color: #666;
	/* 文字を横軸中央に */
	text-align: center;
	text-decoration: none;
	/* 背景画像指定 X:0 Y:0 繰り返し無し */
	background: url(img/button_bg.png) 0 0 no-repeat;
}
ul li a:hover {
	color:#FFF;
	/* 背景画像指定 X:0 Y:-45px 繰り返し無し */
	background: url(img/button_bg.png) 0 -45px no-repeat;
}

するとこうなります。



background-positionの-45pxが今回のポイントです。a:hoverの時はマイナスの値を指定して、上にずらしています。こうすれば1つの画像ファイルでノーマル時とロールオーバー時両方デザインすることができます。

メリットは、

• 画像数が減るのでファイル・コードの管理が楽
• ロールオーバー時に別画像を読み込まないので表示がはやい

などでしょうか。

今回つかった背景画像はこうなっています。



これを応用すれば、こんなことができます。これはNTT DoCoMoの例。



背景画像系のテクニックは応用がきいて楽しいですね。

では次回もお楽しみに。

これからはじめるeラーニングコンテンツ制作トレーニングに続き、

新講座Adobe Captivate 4トレーニングを開講いたします。

どんなトレーニング？

このトレーニングコースは、RoboDemo（Captivateの前身）トレーニングからはじまり、Captivateトレーニング・Captivate2トレーニング・Captivate 3トレーニングと、m-School開校当初から開催していたアップグレードのトレーニングコースです。

カリキュラムは、Adobe Captivate 認定インストラクター主導のもと、過去に培ったノウハウを生かし開発を行いました。
このコースでは、Captivate 4 の基本操作を2日間の短期間でしっかりと習得することができます。

このような方にオススメ

• Captivate 4を初めて使用する初心者の方、興味のある方。
• 表現豊かで直感的なデモンストレーションを作成したい、セールスおよびマーケティング関連の方。
• インタラクティブなトレーニングを実現したい、eラーニングおよび教育担当の方。
• アプリケーションの操作説明などのシミュレーションを作成したい、サポート担当の方。
• Captivate 2 やCaptivate 3からアップグレードを検討している方。

と、言った方にオススメです！

講座の詳細・申込み

下記で講座の詳細、お申込みができます。

Adobe Captivate4 トレーニング

CSS（スタイルシート）の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

今回のテーマ：Webページ制作に必須！のFirefox アドオンコレクション

今回はちょっと趣旨をかえて、Webページ制作の必須アイテム、Firefoxのアドオンをご紹介します。



※Firefoxのインストールがまだ！な方はコチラから。

フリーのブラウザ Mozilla Firefoxの便利な拡張機能、アドオンが大量に公開されています。

アドオンとは何ですか？

アドオンは、 Firefox に新たな機能を追加したり、デザインを変えるための小さなプログラムです。これまで Internet Explorer をお使いになっていた方なら、「Google ツールバー」や「Yahoo! ツールバー」といったアドオンをご存知かもしれませんが、Firefox ならもっとたくさんの種類のアドオンを、無料で、好きなだけ利用できます。

定番の検索ツールから、動画ダウンローダー、RSS リーダー、メモ帳、辞書、世界時計に至るまで、多彩な機能を追加できる 拡張機能、Firefox の背景やボタンのデザインを変えられる テーマ、各国語の スペルチェック辞書、検索エンジン をご利用いただけます。

自分好みにカスタマイズできるのが Firefox の人気の秘密です。仕事からプライベートまで、あなたのお気に入りのアドオンを見つけてみてください。

"Mozilla Japan - Firefox 用アドオン - よくある質問"

そして、つい先日アドオンのサイトにコレクションという機能が加わりました。このコレクションを使うと、お気に入りのアドオンをグループにまとめてオンラインで公開することができます。ということで早速つかってみました。


m-School的Web制作用アドオン

まだ数はあまり少ないですが、アドオン入れすぎもFirefoxの動作が重くなってしまうので厳選しています。今後も随時追加していく予定です。

このコレクション機能を使えば今回のように紹介したいときはもちろん、自分用のアドオンまとめとしても使えますね。職場と自宅で同じ環境を構築したい！とか、再インストールした、なんてときには便利そうです。

まだアドオンを使ったことがない方、ぜひ入れてみてください。

便利なアドオンの使い方はCSS講座でもご紹介しています！

では次回もお楽しみに。

アドビのソフトウェアをご購入いただいた方に、先着順で
プレゼント実施してます。

■スィート（統合）製品をご注文いただいた方には、
ソシム社の書籍で、１）か２）のどちらかを。

１）Illustrator レッスンブック
（ランディング、TART DESIGN 著 / 税込2,310円）
２）Flash レッスンブック
（今北 舞 著 / 税込2,310円)

どちらがあたるかは到着してからのお楽しみに。








■ツール（単体）製品をご注文いただいた方には、
エレコムのマカロン型クリーナーを。
クリーナーの色は、ピンクとブラウンの２色です。
どちらがあたるかは、これまた到着してのお楽しみです。





↓詳細はこちら
○ソフト販売

■キャンペーン期間
書籍10冊、クリーナー10個が終了するまでの期間です。


通常版でもアップグレード版でもライセンス版でも対象なので、
この機会にぜひ！

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

アニメーション作成に必須！モーショントゥイーン

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

作成方法

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

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


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


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


.［制御］メニューの［ムービープレビュー］を実行して動作を確認します。


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

▽Flashを初めて習得する方はコチラ
Adobe Flash CS4入門講座
▽Flashの基礎を習得する方はコチラ
Adobe Flash CS4: Fundamentals

「今さら聞けないAdobe Acrobat（アクロバット）& PDF」第二十九回目です。PDFにページ効果（アニメーション効果）を加えるをご紹介します。

今回の機能

ページ効果

少し前のお話ですが、第14回目で「Maicrosoft PowerPointのアニメーションをPDFに引き継ぐ」を紹介致しました。この方法は、PowerPointで設定したアニメーション効果をPDFに引き継がせるという方法でしたが、今回はその逆で、PDF変換後にアニメーションの設定をする方法です。

PowerPointのような柔軟なアニメーション設定は行えませんが、Acrobatでは、「ページ効果」を追加する機能があります。

操作方法

1.アニメーションを設定したいPDFファイルを開きます。



2.[アドバンスト]-[文書処理]-[ページ効果]を選択します。
3.[効果の設定]で、ページ効果・速度・ページ範囲などの指定をします。



4.[表示]-[フルスクリーンモード]でアニメーション動作を確認します。

活用法

Microsoft PowerPointを持っていない環境でも、PDFファイルにアニメーションが付けられるため、Acrobatのみでインタラクティブなプレゼンテーション資料作成が可能です。
さて次回は、Acrobat.comでPDFのライブコラボレーションを紹介します。

eラーニングの専門家＋Adobe認定インストラクターがお届けする、

これからはじめるeラーニングコンテンツ制作トレーニング-早い・簡単・高品質に作る！プロが使う道具をおしえます-

を開講致します
伝えたい言葉をいれたらタイトル長くなっちゃいました

どんなトレーニング？

この講座は、eラーニングコンテンツを自分で作ってみたいという方にオススメのAdobe製品、Adobe Presenter 7とAdobe Captivate 4を使ってコンテンツ制作の基礎を習得していただく1日間の短期習得トレーニングです。

このような方にオススメ

• eラーニング教材の開発をはじめてみたい方。
• eラーニングコンテンツ制作が初心者の方。
• Adobe eLearning Suite（Presenter 7、Captivate 4）を体験してみたい方。
• 社内研修などにかかるコストを削減したい方。

と、言った方にオススメです！

講座の詳細・申込み

下記で講座の詳細、お申込みができます。

これからはじめるeラーニングコンテンツ制作トレーニング

より深く、製品について理解したい方は
Adobe Captivate 3 トレーニング（2日間）も行ってますので、ご検討ください。
※現在、Captivate4のトレーニングも鋭意制作中です。Captivate4を検討中の方はもう少々おまちください。

CSS（スタイルシート）の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

CSS3はここがすごい【セレクタ編2】

前回に引き続き、W3C Working Draftの中から新しく定義される予定のCSS3新セレクタについてご紹介します。

疑似クラス

CSS3では新しい疑似クラスが多数定義される予定です。

E:root
/*
E…要素
*/

:rootはルートの要素、つまり最も上位の要素を指定します。HTMLなら<html>ですね。

E:nth-child(n)
/*
E…要素
(n)…n番目
*/

E要素の親の中のn番目のE要素を指定します。ちょっとわかりづらい場合は「n番目のE要素」と考えてもいいかもしれません。括弧内のnで何番目かを整数で指定します。それ以外にこんな指定も可能。

E:nth-child(1)
/* 整数の場合は、そのままn番目 */

E:nth-child(2n+1)
/* nには0から順に整数が入り計算されるので、奇数番目指定 */

E:nth-child(odd)
/* 奇数番目指定、(2n+1)と同じ結果 */

E:nth-child(2n)
/* nには0から順に整数が入り計算されるので、偶数番目指定 */

E:nth-child(even)
/* 奇数番目指定、(2n)と同じ結果 */

なんて便利なんでしょう！



こんな事をしたいときに、

<ul>
	<li>リスト項目1</li>
	<li>リスト項目2</li>
	<li>リスト項目3</li>
	<li>リスト項目4</li>
	<li>リスト項目5</li>
	<li>リスト項目6</li>
</ul>

ul {
	width: 300px;
}
ul li {
	margin: 4px 0px;
}
ul li:nth-child(even) {
	background: #D5F8B4;
}

これだけ書いておけばあとは<li>がいくつ増えてもOK！

ちなみにこの(n)の指定は、次のセレクタでも使用できます。

E:nth-last-child(n)
/*
E…要素
(n)…n番目
*/

E要素の親の中の後から数えてn番目のE要素を指定します。

E:nth-of-type(n)
/*
E…要素
(n)…n番目
*/

E要素の親の中の、E要素と兄弟かつ、同じ名前の要素のn番目のE要素を指定します。言葉だけだと意味不明ですね。こんな時に使います。

<div>
	<h2>headline2</h2>
	<p>Lorem ipsum dolor sit amet...</p>
	<h2>headline2</h2>
	<p>Lorem ipsum dolor sit amet...</p>
	<h2>headline2</h2>
	<p>Lorem ipsum dolor sit amet...</p>
</div>

div {
	width: 500px;
	font-family: Arial, Helvetica, sans-serif;
}
div h2:nth-child(odd) {
	background: #A8AD80;
}
div h2:nth-child(even) {
	background: #E6D4A7;
}

この例では、先ほどのE:nth-child(n)を使って、奇数番目と偶数番目の<h2>のbackgroundを別の色にしています。しかし背景色は全て同じになってしまいます。これは、間に入っている<p>もカウント対象になってしまっていることが原因です。そこで、<h2>のみをカウントしてくれるように、E:nth-of-type(n)を使います。

div {
	width: 500px;
	font-family: Arial, Helvetica, sans-serif;
}
div h2:nth-of-type(odd) {
	background: #A8AD80;
}
div h2:nth-of-type(even) {
	background: #E6D4A7;
}

するとこの通り。複数種類の要素が並列しているときにはこっちのほうがいいですね。

E:nth-last-of-type(n)
/*
E…要素
(n)…n番目
*/

E要素の親の中の、E要素と兄弟かつ、同じ名前の要素の後から数えてn番目のE要素を指定します。E:nth-of-type(n)の対になります。

今回ご紹介した新セレクタが使えれば、独自のIDやクラスをぐっと減らすことができそうです。残念なのはブラウザーの実装がまだまだ追いついていないことですね。今回、サンプルではGoogle Chrome 2を使いましたが、Safari 4 beta、Opera 9でも同様の結果を得ることができました。

CSS3.infoで使っているブラウザーのセレクタ対応状況テストができるのでみてみるのもいいかもしれません。

CSS3ではほかにも疑似クラスが増える予定ですが、今回はこの辺で。

では次回もお楽しみに。