基礎編は、6時間・全21回のコースになっており、体系的にじっくり学べるように構成されています。2014は、タイムラインベースのウェブコンテンツ制作ツールです。ウェブサイトの広告や動的なインフォグラフィック、ライトウェイトなウェブアプリ、実際に動くプロトタイプなどの作成に適しています。コーディングなしで使えますので、スクリプトに詳しくないデザイナーやアーティストでも、自分のアイデアを具現化できます。モバイルに対応したコンテンツを直感的に作成できる大変優れたツールです。JavaScriptのスキルがある人なら、高度なウェブアプリケーションをつくることも可能です。タブレットやスマートフォンでも学習することができます。ビデオは、小さな画面でも見やすいようにズーム処理を追加しています(※素材データはパソコンでダウンロードしてください)。Animateで作成できるウェブコンテンツ洗練された動的な表現で訴求する動的な表現などインパクトで訴求するHTMLベースの「ウェブ広告」を作成できます。Animateではより高度な表現が可能です。Gurdian)などが特集記事で採用している動的なインフォグラフィックを作成できます。この手法は、イマーシブ・エクスペリエンスと呼ばれる(コンテンツ以外の要素を排除した)シングルロングページが主で、動画やアニメーションなどを効果的に使い、読み応えのある記事に仕上げています。Animateでは短時間で作成することが可能です。city(Guardian)実際に動くプロトタイプをつくるプログラマーとの協業であっても、具体的なイメージを「実際に動く」プロトタイプで伝えたほうが、意見交換しやすくなります。Animateを使う利点は、直感的な操作でアイデアを具現化できることです。レスポンシブなアニメーションも一回の指定だけで簡単に作成できます。プロトタイプをウェブブラウザーで確認しながら、意見を出し合い、その場で変更していくことも可能です。スマホで読むグラフィックノベルグラフィックノベルなどのウェブアプリを作成することができます。Animateで作成されています。Animateで作成した作品をiOSやAndroid向けのアプリに変換することも可能です。AnimateでパブリッシュされるHTML、CSS、JavaScriptはとてもコンパクトなファイルになっています。コンテンツなどを作成することができます。Animateで作成したインタラクティブコンテンツ(HTML、CSS、JavaScript)を組み込むことが可能カリキュラムカリキュラムは、基本操作の習得から、HTMLアニメーションの基礎、テキストツールの使い方、ウェブコンテンツ制作のための応用機能の習得、レスポンシブアニメーションやオーディオの組み込み、WordPress活用などの実習、さらに、Flashや電子書籍に関連した補足などで構成されています。素材データが用意されていますので、スクリーンキャストを視聴しながら、ワークショップを受講するように学習を進めることができます。メニューの選択や数値入力などの操作では、画面をズームしていますので、タブレットやスマートフォンでも見やすくなっています。タブレットで視聴しながら、パソコンで操作学習すると効果的です。復習などは通勤・通学時の移動中にスマートフォンなどを使って視聴してもよいと思います。2014でも問題ありせん。2014バージョンを用意しています。追加カリキュラムはこちらのページに掲載いたします。先日リリースした「レスポンシブアニメーション完全習得」のような教材と連動した無料講座のアーカイブなども追加していきたいと思います。PCやスマートデバイス(スマートフォン、タブレットなど)で動作するウェブコンテンツを作成するためのオーサリングツールです。ヘルプページ、フォーラムページは、ブックマークしておいてください。予期せぬトラブルが発生した場合は、フォーラムで質問することが可能です。チュートリアルやショーケースも用意されていますので、見ておきましょう。ワークスペースとパネル(およびパネルグループ)について学習します。ワークスペースは、ステージとタイムライン、複数のパネルで構成されています。パネルは、自由に配置できますので、作業しやすいレイアウトに変更しておきましょう(変更したワークスペースのレイアウトは名前を付けて記録できます)。パネルをドッキングしたり、切り離す操作は、ドラッグだけですが、ルールがありますので理解してください。コンテンツ制作は、ステージと呼ばれる領域に画像やテキストなどの要素を配置しながら、進めていきます。最初に、ステージのサイズ変更、背景色の変更、編集画面の拡大表示(ズームコントロール機能)などの基本操作を学習し、実際に、キャラクターの画像ファイルをステージに配置して、ウェブブラウザーで確認します。ステージのオーバーフロー(配置した画像がステージの外に置かれたときの処理)についても学びます。制作したコンテンツの保存方法と、保存されたファイルの内容について学習していきます。データ、HTMLやJavaScript、配置した画像ファイルなどのパブリッシュデータが書き出されます。拡張子が「.an」のファイルをダブルクリックすると、作業の続きを再開することができます。HTMLファイルをウェブブラウザーで開くと、作成したコンテンツが表示されます。第4回で作成したコンテンツを使って、簡単な移動アニメーションを設定します。ステージの中央にキャラクターの画像を配置して、アニメーションの開始位置と終了位置にそれぞれ「キーフレーム」を追加します。キーフレームは、アニメ制作の「原画」に相当します。2つのキーフレームの中間の動きを設定するには、「トランジション」を作成します。ループ再生(繰り返しアニメーションを再生させる)させる方法もここで学習しておきます。第5回で作成したコンテンツを使って、回転アニメーションを追加します。1つキャラクターの画像をステージに配置して、回転のキーフレームを追加し、一回転するアニメーションを設定します。ステージ上の複数の画像の重なりを変更する方法も学習します。「イージング」という効果を適用してみます。イージングは、加速・減速をアニメーションに適用できますので、強弱のあるダイナミックな動きを表現することが可能になります。第6回の「簡単な移動アニメーションを指定する」では、すべてのキーフレームを手作業で追加しましたが、「自動キーフレームモード」を使用すると、名前のとおり、キーフレームの追加を自動化してくれます。キーフレーム間の動きを生成するトランジションも「自動トランジションモード」で自動化できます。起動時)ではONになっています。アニメーションの基本機能なので覚えておきましょう。第7回で作成したコンテンツをベースにして、「ピン」の機能を学習していきます。ステージ上のキャラクターを2つ複製して、レイアウトします。続けて、「ピン」をONにして、3つのキャラクターをステージの外に移動させます。これで、ステージの外側からキャラクターがフレームインするアニメーションが出来上がります。フレームの外から「パーツが飛んできて、タイトルが完成する」といった映画のオープニングのようなアニメーションが作成できます。テキストツールの使い方とフォント指定について学習していきます。テキストツールは簡易的なもので、作図ソフトなどに搭載されているようなテキスト編集機能はありません。長文を表示したい場合は、エディターなどで入力したテキストをコピーすることになります。Fonts)の指定方法も学びます。最後に、第8回で作成したコンテンツにテキストを追加してアニメーションを完成させます。第9回で作成したコンテンツを使って、テキストのアニメーションを追加します。アクションパネルでスクリプトを追加して、アニメーションの最後のフレームで停止させます。新たにキャラクターをステージに配置して、ボタンにします。このキャラクターをクリックすると、停止しているアニメーションが再生するという仕組みをつくります。スクリプトはコードスニペットのボタンをクリックするだけで追加できますので記述する必要はありません。「グループ化」と「シンボル変換」の機能があり、コンテンツ制作を効率化することができます。グループ化は、作図ソフトなどではお馴染みの機能で、複数の要素を1つのグループとして扱うことができます。シンボルは、同じ要素をたくさん配置して編集するときに役立ちます。夜空の星をシンボルにしておけば、1回の指定で配置したすべての星に適用することができます。ステージ上に配置された要素はインスタンスと呼びます。「モーションパス」という便利なアニメーション機能が搭載されています。ステージ上に配置した要素を動かす場合、キーフレームを追加していきますが、曲線に沿ったスムーズな動きを設定するのはかなり面倒です。モーションパスは、ステージ上のキーフレーム間に曲線を表示し、アンカーポイントとハンドルをマウスで操作しながら、カーブをコントロールすることが可能です。曲線に沿って要素の向きも回転させることができます。今まで学習した基本操作のスキルを生かして、アニメーションを作成します。用意されているキャラクターのパーツをステージ上で組み合わせてシンボルに変換、キャラクターの耳だけを動かします。新機能「レスポンシブな拡大/縮小、およびステージの中央配置」を使って、ウェブブラウザーの幅にあわせて伸縮するレスポンシブアニメーションにします。組み込む方法も解説します。第8回で作成したコンテンツを使って、音楽や効果音、ボイスなどのオーディオデータを組み込む方法を学習していきます。Converter」を紹介しています)がありますので、簡単に変換できます。組み込んだオーディオの自動再生やループ、再生コマンドの使い方を実際に試しながら学んでいきます。第14回「実習:作成したコンテンツにオーディオを組み込む」の続きです。読み込んだオーディオをスクリプトで制御します。スクリプトはコードスニペットで追加できますので記述する必要はありません。ステージに楕円を描いて、ボタンとして動作するように設定します。クリックして再生、一時停止、あるいは、クリックで再生し、もう一度クリックすると一時停止する仕組みをつくっていきます。オーディオプレーヤーの表示/非表示の設定も学習します。よるアニメーション制作の応用編です。素材データの「goods_08_EA_Lesson」(すでにアニメーションが設定されています)を使って、インタラクティブな仕組みを追加していきます。最初の画面でキャラクターをクリックすると、アニメーションの画面に切り替わり、再生開始します。アニメーション画面のキャラクターをクリックすると、最初の画面に戻るというコンテンツです。プリローダーを設置する方法も学習します。パブリッシュしたHTMLやJavaScriptなどのファイルは、既存のウェブサイトにそのまま組み込めますが、OAMファイルを使用すれば、WordPressの記事に配置することも可能です。OAMファイルを配置しましたが、WordPressの場合も専用のプラグインをインストールすれば、簡単に配置できます。ここでは、実際にアニメーション付きの記事を投稿してみます。ウェブアニメーションやインタラクティブコンテンツを制作するためのオーサリングツールです。Playerがインストールされていないと動作しないため、未サポートのスマートフォンやタブレットでは利用できませんでした。コンテンツが作成可能になり、状況が変わりました。3」(標準化団体IDPFが策定)は、JavaScriptの使用が可能になっています。パブリッシュしたHTMLコンテンツも組み込むことができます。アニメーションやインタラクティブな仕掛けを追加した児童書(絵本など)や学習教材などを作成できますので、サンプルを使って解説します。電子書籍を読むための読書システムは、Readium(Chrome上で利用)が対応しています。Animateの書籍用チュートリアルですが、素材データを用意しましたので、挑戦してみてください。音声は(講師の声ではなく)高度な音声合成技術を使っています。長方形ツールで描いた図形とテキストツールで入力した記号だけで、高度なモーショングラフィックを作成します。一つひとつのステップはシンプルな操作ですが、組み合わせが複雑です。ステップ数が多いので、ゆっくり時間をかけて進めてください。Animateの書籍用チュートリアルです。レスポンシブレイアウトの機能(レスポンシブな拡大/縮小、およびステージの中央配置)が搭載される前のバージョンを使用していますので、複雑な指定で要素を中央揃えにしています。CSSフィルター機能を使って、ステージに配置した画像をぼかしています。奥行き感が表現されていることを確認してください。CC」の基礎を習得することができます。連携できますので、動的な表現を含むシングルページ制作などに活用することが可能です。Animateと一緒に習得し、仕事や創作活動に役立ててください。学習コンテンツの専用ページでご覧になってください。2014」を使用し、ライブラリ機能などを活用しながら作成しています。Museは、レスポンシブウェブデザインのページを作成できませんが、シングルページであれば、アセット共有化、テキストの同期機能などで効率よく、スマートデバイスに適応したページを作成することが可能です。進めているプロジェクトです。継続的に「体系化された学習コンテンツ」を無料提供していくためのビジネスモデルになっています。ビジネスモデルについて2014年9月から法人化し、本格始動する予定でしたが、資金調達せず(自己資金で活動)進めてきたことで、あと一歩のところで継続が困難となりました。その後、支援していただける方、また活動資金以外でも協力していただける方々が現れ、再開することが可能となりました。個人活動の規模まで縮小することになりましたが、年内に20時間分のコンテンツを一般公開する目標は達成できそうです。新しいコンテンツの企画・制作には、引き続き活動資金を調達していく必要があり、クリアすべき問題は山積みですが、今まで蓄積してきた経験を生かして邁進していきたいと思います。