- PDF Free Download

Size: px

Start display at page:

Download ""

あきたけすすむ
5 years ago
Views:

1 HTML5 Flash Pro CC Flash Pro as HTML5 Dev Tools Flash HTML5 Canvas

3 Index 004 HTML HTML HTML Web Designing Flash Lab. HTML5 Flash for HTML5 Flash Professional CC HTML5 Flash Professional CC DOWNLOAD ZIP ID ID wdlib f4h5 Web Designing Library 003

4 Flash Lab. HTML 5 オーサリング編 HTML5 コンテンツ制作における注意点 WD Flash Lab. Flash Professional は CS6 以来 HTML5 関連の機能強化を図っており特に CC 13.1 では Canvas をネイティブサポートするなど HTML5 オーサリングツールとしての機能が充実している今回は HTML5 コンテンツを制作する上での注意点を解説しよう本記事の内容は Flash Professional CC をもとにしています Researcher of this Lab. 沖良矢 OKI Yoshiya インタラクションデザイナーフリーランスとして Web を中心としたテクニカルディレクション Flash HTML5 を用いたフロントエンド構築スマートフォンアプリ制作などさまざまなプロジェクトに参加している DIST 主宰 F-site 代表 Topic of the Month Flash Pro で作る HTML5 コンテンツの特徴と制作時の注意点 HTML5 オーサリングツールの急先鋒として Flash Professional 以今回は制作前に押さえておきたい基礎知識として Flash Pro で降 Flash Pro が名乗りを挙げているもともとリッチコンテンツの制作作ることができる HTML5 コンテンツの特徴そしてパブリッシュやと Flash Pro の相性は大変よくこれまで作成したアセットなどの資産も JavaScript を記述する際の注意点について解説する豊富に抱えていることなどからにわかに Flash Pro の動向が注目されるようになった Flash Pro 上で作成しそれを HTML5 コンテンツとして書き出せるようになった POINT Flash Professional CC 13.1 からは HTML5 の Canvas がネイティブサポートされている Flash Professional で出力できる HTML5 コンテンツでは CreateJS が利用されている 004 Web Designing

HTML 5 オーサリング編 SECTION1 Flash Professional で作る HTML5 コンテンツの特徴 Flash Pro で作ることができる HTML5 コンテンツにはどのような特徴があるのか紹介しよう HTML5 コンテンツの仕様 01 Flash Pro から書き出せる HTML5 コンテン EaselJS HTML5 の

られた CreateJS という JavaScript ライブラリ群だ 01 CreateJS CreateJS の特徴としてコードの記述方法が ActionScript に似ており Flash ユーザー PreloadJS に馴染みやすいことが挙げられるまた基本画像音声 JavaScript などの外部ファイ

でリッチコンテンツを構築することができる 02 CreateJS のライブラリ群の動作環境ライブラリ動作環境 EaselJS CreateJS のライブラリ群はそれぞれ単体 TweenJS 基本的にすべてのブラウザで動作する SoundJS 動作するのにモダンなオーディオ機能 HTML5 の audio 要素または Web Audio

ブラウザでも簡易テストが行われている PreloadJS 基本的にすべてのブラウザで動作するただしブラウザと機能の組み合わせによっては制限があるでも組み合わせても動作するように設計されているそのため CreateJS 全体で統一された動作環境は存在せず各ライブラリによって異なる 02 動作環境動作するのに HTML5 の

Internet Explorer 9 以上が動作環境の前提になると考えてよいだろう日本全国花粉飛散マップ環境省が提供している資料をもとに過去 11 年分の花粉の飛散量をパーティクルを用いてビジュアライズしたサイト本連載の共著者でもある池田泰延氏が代表を務める ICS が Flash Pro と CreateJS

jp/projects/ pollenmap/ Flash Pro に適している HTML5 コンテンツ Flash Pro で制作するのに適している HTML5 コンテンツはスマートフォンやタブレットを対象としたクロスプラットフォームのコンテンツに加え視覚表現と音を同時に使用するいわゆるフル Flash コンテンツのようなゲーム

5 HTML 5 オーサリング編 SECTION1 Flash Professional で作る HTML5 コンテンツの特徴 Flash Pro で作ることができる HTML5 コンテンツにはどのような特徴があるのか紹介しよう HTML5 コンテンツの仕様 01 Flash Pro から書き出せる HTML5 コンテン EaselJS HTML5 の canvas 要素にコンテンツを描画するための仕組みを提供するライブラリ TweenJS トゥイーンアニメーションを作成するライブラリ SoundJS 音声を再生するためのライブラリツは 2 つの仕様に準拠している 1 つ目は HTML5 の仕様の中の 1 つである Canvas 2 つ目はその Canvas をより手軽に扱えるように作られた CreateJS という JavaScript ライブラリ群だ 01 CreateJS CreateJS の特徴としてコードの記述方法が ActionScript に似ており Flash ユーザー PreloadJS に馴染みやすいことが挙げられるまた基本画像音声 JavaScript などの外部ファイルのプリロードを実現するライブラリ的な HTML CSS JavaScript を書くことが CreateJS は Flash デベロッパーとして著名な Grant Skinner 氏が中心となりオープンソースソフトウェアとして開発が行われている MIT ライセンスのため商用でも無償で利用できるできれば直感的に HTML5 でリッチコンテンツを構築することができる 02 CreateJS のライブラリ群の動作環境ライブラリ動作環境 EaselJS CreateJS のライブラリ群はそれぞれ単体 TweenJS 基本的にすべてのブラウザで動作する SoundJS 動作するのにモダンなオーディオ機能 HTML5 の audio 要素または Web Audio Flash のいずれかが必要 Internet Explorer 9 10 Chrome Firefox Safari Opera ios 6 以上 Android Chrome のブラウザで動作テストが行われている Flash Player プラグインを使うと Internet Explorer 7 8 でも動作可能 BlackBerry ブラウザでも簡易テストが行われている PreloadJS 基本的にすべてのブラウザで動作するただしブラウザと機能の組み合わせによっては制限があるでも組み合わせても動作するように設計されているそのため CreateJS 全体で統一された動作環境は存在せず各ライブラリによって異なる 02 動作環境動作するのに HTML5 の canvas 要素が必要 HTML5 に対応していないレガシーブラウザ特に Internet Explorer 8 以下では動作しないただし Flash Pro から書き出した HTML5 コンテンツでは EaselJS が必須となるため実質的には 02 にある通り各種モダンブラウ 03 ザスマートフォンタブレット含むまたは Internet Explorer 9 以上が動作環境の前提になると考えてよいだろう日本全国花粉飛散マップ環境省が提供している資料をもとに過去 11 年分の花粉の飛散量をパーティクルを用いてビジュアライズしたサイト本連載の共著者でもある池田泰延氏が代表を務める ICS が Flash Pro と CreateJS を使って制作した pollenmap/ Flash Pro に適している HTML5 コンテンツ Flash Pro で制作するのに適している HTML5 コンテンツはスマートフォンやタブレットを対象としたクロスプラットフォームのコンテンツに加え視覚表現と音を同時に使用するいわゆるフル Flash コンテンツのようなゲームアニメーションサウンドプレーヤーなどといえるだろう 03 ただ SEO を重視したりレガシーブラウザへの対応が求められるコンテンツには向いていないレガシーブラウザへの対応方法 Canvas に対応していないレガシーブラウザに対しては canvas 要素の開始タグと終了タグの間にコンテンツを挿入することでフォールバック用のコンテン <canvas width="640" height="480">  </canvas> ツを表示することができる Web Designing Library 005 Flash Lab. Web Designing Laboratory 一口に HTML5 コンテンツと言ってもその実装にはさまざまな形が考えられる

SECTION2 HTML5 Canvas Flash Pro HTML5 Flash 01 HTML5 Canvas (Canvas) Flash Pro CC 13.

HTML CreateJS JavaScript CreateJS - JavaScript JavaScriptHTML CreateJS JavaScript CreateJS

fla HTML5 Canvas Flash Pro (Canvas) 01 Flash Pro CC 13.

03 2 images sounds Flash Professional CreateJS Flash Pro 13.1.0.226 CreateJS EaselJS 0.7.

6 SECTION2 HTML5 Canvas Flash Pro HTML5 Flash 01 HTML5 Canvas (Canvas) Flash Pro CC 13.1 Flash HTML5 HTML5 Canvas 02 1 Flash Professional CC HTML HTML 2 03 HTML CreateJS JavaScript CreateJS - JavaScript JavaScriptHTML CreateJS JavaScript CreateJS CreateJS CDN Flash Pro JavaScript framebounds Flash.fla HTML5 Canvas Flash Pro (Canvas) 01 Flash Pro CC 13.1 Toolkit for CreateJS HTML5 JavaScript/HTML 02HTML5 Canvas 02 1 Flash Pro SWF HTML5 Canvas 03 2 images sounds Flash Professional CreateJS Flash Pro CreateJS EaselJS TweenJS SoundJS PreloadJS CreateJS Flash Pro CreateJS CreateJS Flash Pro Flash Professional CC HTML5 Canvas 006 Web Designing Library

HTML 5 オーサリング編 SECTION3 JavaScript を記述する際の注意点されるようになったここでは JavaScript を記述する際の注意点を紹介しよう JavaScript の記述場所 01 Flash コンテンツの場合 ActionScript の記述方法としてフレームアクションまたは外部クラスの 2 通りがある HTML5 コンテンツの場合も同様に

7 HTML 5 オーサリング編 SECTION3 JavaScript を記述する際の注意点されるようになったここでは JavaScript を記述する際の注意点を紹介しよう JavaScript の記述場所 01 Flash コンテンツの場合 ActionScript の記述方法としてフレームアクションまたは外部クラスの 2 通りがある HTML5 コンテンツの場合も同様に JavaScript をアクションアクションパネルにJavaScriptを記述したところ処理の内容はボタンをクリックするとブラウザのコンソールに clickhandler という文字列を出力するというものサンプル section3_a.ﬂa パネル 01 または外部ファイル 02 に記述することができる 2 つの方法を併用することもできるがメインの処理はどちらかに集中させた方がコードをメンテナンスしやすくなるだろう 02 サンプルスクリプト section3_b の main.js シンボルやインスタンスの参照メインタイムラインから見るとライブラリ内のシンボルはその名前空間デフォルトでは lib の下にシンボル名で格納されているそのためたとえば button というシンボルが var canvas, stage, exportroot; function clickhandler() { console.log("clickhandler"); } function init() { canvas = document.getelementbyid("canvas"); exportroot = new lib.section3_b(); ある場合そのシンボルを参照するには lib. stage = new createjs.stage(canvas); stage.addchild(exportroot); stage.update(); button というパスになる 03 このときシンボル名に 2 バイト文字が使わ createjs.ticker.setfps(lib.properties.fps); //createjs.ticker.addeventlistener("tic k", stage); れている場合そのまま JavaScript コードとして出力されてしまうため原則として半角英数字で名前を付けよう同様にタイムラインに配置されたインスタンスはインスタンス名で参照できるただし ActionScript 3.0 と違い this を省略せずに書く必要があるので注意しよう 03 なお外部ファイルから参照する場合は 02 のように exportroot を使ったパスとなる開始フレーム番号の違い ActionScript の場合タイムラインのフレー exportroot.mybutton.addeventlistener("click", clickhandler); } 01 と同様の処理を外部ファイル main.js に記述した例外部ファイルの作成手順はまずアクションパネルにスクリプトを記述しない状態でパブリッシュする次に出力された HTML ファイル内に記述されている外部読み込みされていない JavaScript コードを main.js に移植するオレンジ色部分そのコードの init() メソッドが初期化メソッドとなるので同メソッド内の最後尾にメインタイムラインで実行したいスクリプトを記述するこのとき exportroot という変数がメインタイムラインにあたりメインタイムラインに置かれたインスタンスはこの変数の下に格納されるなおこのままではパブリッシュの度に書き換えた HTML が上書きされる移植した部分が追加されるのでパブリッシュ設定で HTML をパブリッシュ項目をオフにしておく 03 サンプルスクリプト section3_c.ﬂa // シンボルを参照 console.log(lib.button); // インスタンスを参照 console.log(this.mybutton); ム番号は 1 から始まるところが HTML5 Canvas ドキュメントの場合は 0 から始まる仕様になっているそのため先頭のフレームに移動するためには JavaScript では this. gotoandstop(0); と記述するなおこれは CreateJS の仕様によるものだ CreateJS が WebGL をサポート 2014 年 1 月 16 日 CreateJS 公式ブログにて WebGL のサポートが発表された webgl-support-easeljs/ これまでの Canvas によるレンダリング画面描画に加えて WebGL も用いることができるようになり併用も可能ということだ公式ブログによればそのパフォーマンスは Canvas と比べて 6 50 倍の速さとのことなお 2014 年 12 月 17 日にリリースされた EaselJS から WebGL を利用することができるようになった Web Designing Library 007 Flash Lab. Web Designing Laboratory Flash Pro CC 13.1 からはアクションパネルに JavaScript を記述できるようになりさらにコードヒントも表示

2. 生田仮想デスクトップ PC の接続方法生田仮想デスクトップ PC に接続する方法は次の 2 通りです 1. HTML アクセス Internet Explorer や Safari などのブラウザを用います PC に特別なソフトウェアをインストールする必要が無いので管理者権限をもってい

2. 生田仮想デスクトップ PC の接続方法生田仮想デスクトップ PC に接続する方法は次の 2 通りです 1. HTML アクセス Internet Explorer や Safari などのブラウザを用います PC に特別なソフトウェアをインストールする必要が無いので管理者権限をもってい生田仮想デスクトップ PC の利用方法について (Macintosh 版 ) 1. はじめに 2015.8.26 生田メディア支援事務室生田仮想デスクトップ PC とは学内サーバーシステム上に構築した仮想的な PC のことです生田仮想デスクトップ PC を用いると生田キャンパスの情報処理教室や教育用情報処理室の PC にインストールされているアプリケーションのほとんど 1 を研究室 / 実験室の