Edge Animate 基本ワークフロー講座

解像度に合わせた拡大縮小

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スマートフォンやタブレット端末、もちろんパソコンにおいても、さまざまな解像度をもつスクリーンが存在しています。このレッスンでは、それら幅広い解像度に合わせて自動的にアニメーション表示を拡大縮小させる方法を勉強します!
講師:
04:01

字幕

このレッスンではEdge Animateで製作した一つのアニメーションをスマートフォンやタブレット端末そして、PCなどといった様々な解像度の端末に合わせて表示するためのもっとも簡単な方法について解説致します。まずは、ダウンロードしてきたファイルの中にあるNew Project.anをダブルクリックしてEdge Animateで開いてください。そして、この画面はそのファイルを開いた状態となります。このファイルを使いながら解説を進めていきます。Edge Animateで作った一つのファイルを様々な解像度に対応させる今回は、それの最も簡単な方法をご紹介します。まず、ステージのプロパティを出してる状態でこちら「レスボンシブな拡大/縮小」こちらにチェックを入れるだけで一つのアニメーションファイルで様々な解像度に対応させて表示させることができます。早速やってみましょう。まずは、こちらにチェックを入れます。すると、メニューが選択できるようになりこちらを選択すると「高さ」「幅」「両方」というこちらのメニューが出てきます。このメニューは「高さ」や「幅」その「両方」どれを基準にしてアニメーションの表示を割いていくかするかということをこちらで決定します。 それでは、まずは「幅」から試してみたいと思います。選択した状態でブラウザーでプレビューしてみます。すると、この様にアニメーションがブラウザーの表示領域の幅いっぱいに表示されています。では、この状態でブラウザーの幅を広げてみるとどうなるでしょうか。試してみます。ブラウザーの幅を持ってドラッグこうすると、この様にアニメーションのサイズが横幅基準にこの様に、拡大/縮小されているのが分かりますね。戻ります。では、次に「高さ」を選択してみましょう。それでは、この状態で「ブラウザーでプレビュー」です。すると、今度は高さいっぱいに表示さていて横が、この様にスクロールバーが出ていますね。では、ブラウザーのサイズを変えてみたいと思います。縦を縮めていくとこの様に、縦はブラウザーいっぱいに表示されていますがその縦の高さに合わせてこの様に、横が伸縮していますね。最後に、「両方」を選んでみます。そして、「ブラウザーでプレビュー」すると、この様に横の大きさもツイツイするし縦の大きさにも、この様にツイツイしますね。この様にこの「レスボンシブな拡大/縮小」は製作した一つのアニメーションファイルそれを幅を基準にするのか高さを基準にするのかそれとも両方を基準にするのかを設定するだけで様々な解像度表示領域のサイズに対応したアニメーションの自動的な拡大/縮小を設定することができます。 たったこれだけの設定でアニメーションが自動的にリサイズされるというのはとても便利な機能ですね。是非、覚えておきましょう。以上で、レッスンは終了です。今回は、Edge Animateで製作したアニメーションを様々な解像度の端末に合わせて拡大/縮小させる機能を解説いたしました。とても簡単に設定ができるので是非、活用していてください。

Edge Animate 基本ワークフロー講座

このコースではEdge Animateでアニメーションを制作していくさいの基本的なワークフローを実際に作りながら学習していきます。新規プロジェクトの作成からタイムラインアニメーションの制作、シンボルの使い方やオーディオの利用、各種デバイスに対応させる方法などについて解説します。

2時間54分 (24 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年06月30日

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

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

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