UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
クロスプラットフォーム開発の大本命!? HTML5もアプリもFlashも開発できる「OpenFL」とは？ - ICS MEDIA
クロスプラットフォーム開発の大本命!? HTML5もアプリもFlashも開発できる「OpenFL」とは？ 「インタラクティブコンテンツをワンソースでクロスプラットフォームに対応させたい」、それはフロントエンドのデベロッパーであれば誰もが望むことではないでしょうか。一昔前はAdobe Flashが「Open Screen Project」と題して一歩手前まで実現していましたが、iPhoneからFlashを締め出そうとするAppleの強硬な姿勢によって頓挫することになりました。 尾野さん(しっぽさん)からの勧めもあり調べたのですが、「OpenFL」（オープンエフエル）というテクノロジーはさまざまな形式にインタラクティブコンテンツを出力できます。つまりOpenFLを使えばワンソースでクロスプラットフォームを実現できるのです。今回はOpenFLからHTML5とFlashを出力することによってクロス
Flash Player/Adobe AIRでのメモリリーク対策まとめ (Flash Builder/Scout編) - ICS MEDIA
Adobe AIRアドベントカレンダーの一環として、「Flash Player/Adobe AIRのメモリリーク対策」を記事にまとめました。メモリリーク対策として弊社が取り組んでいる手法を紹介します。 この記事では次のソフトウェアを利用します。 Flash Builder 4.7 Adobe Scout メモリリーク対策の重要性 Flashコンテンツ/AIRアプリを長時間起動してるとメモリの使用量が増大し動作が不安定になることがあります。メモリ使用量の増大によってフレームレートの維持が難しくなったり、Flashコンテンツ/AIRアプリのクラッシュへとつながります。 Flashコンテンツの制作でメモリリーク対策を必要としなかった開発者は多いと思います。2000年代のフルFlashサイト全盛期に需要のあった広告系コンテンツ。それらは訴求力重視・公開期間が短めということもあってメモリリーク対策が
ゲームパッドでブラウザゲームが遊べる時代が来た！FlashのGameInput APIを使ってみよう - ICS MEDIA
ゲームパッドでブラウザゲームが遊べる時代が来た！FlashのGameInput APIを使ってみよう Flash Player 11.8とAIR 3.8の新機能のひとつにデスクトップ端末でのゲームパッドの対応があります。このGameInput APIについて早速デモを作成してみましたので試してみてくださいませ。 デモを再生する (要Flash Player 11.8 / ゲームパッド / Chrome PPAPI非推奨) ゲームパッドを所持していない方はこちらのビデオで雰囲気を掴んでいただければと思います。 ゲームパッドの2つのスティックでキャラクターの操作とカメラの操作ができます。 キャラクターの操作方法として以下の2種類を実装してみました。 スティックを上に向ければキャラクターが向いている方向に進み、左右で旋回する操作方法（ラジコン操作） スティックを傾けた方向にキャラクターが進む操作
物理演算ライブラリ「OimoPhysics」と3Dエフェクトツール「AwayEffect」のご紹介 - ICS MEDIA
3D物理演算ライブラリであるOimoPhysics、つい先日公開された3Dエフェクト作成ツールのAwayEffect、そしてそれらのライブラリを用いたFlashのStage3Dサンプルコンテンツを制作しましたのでご紹介します。 デモ1：「Shooting Blocks」を再生する高くつまれた箱に魔◯光殺砲みたいなビーム砲をあてて撃ち落とす、ゲームなどでありがちなサンプルコンテンツです。OimoPhysicsとAway3Dを連携した際に、どの程度パフォーマンスが出るのか知りたかったので作成してみました。よほど箱の数を増やさない限り(数万オブジェクト単位)、実用に耐えうるコンテンツができると思います。アトラクションコンテンツなどで使う機会があれば使ってみたいと考えています。 デモ2：「Rolling Ball」を再生するこちらは、物理演算エンジンのテストでよくあるボール転がし系のサンプルコンテ
FlashでStage3Dコンテンツを作るならおさえておきたい、各種3Dライブラリ徹底比較 - ICS MEDIA
2013年5月26日、Stage3Dオンラインカンファレンスが開催されましたが、各種3Dライブラリについてまとまった情報が欲しいなと思ったのでブログ記事にしてみました。Flashを用いた3Dコンテンツを導入するにあたり、3dsMax, Maya、Cinema4Dなどの3Dモデル作成ツールとの親和性、GUIで直感的に作成できるシーン構築ツールなどに重点を置いて解説します。 Away3D http://away3d.com/ Adobeと非営利な活動として提携している。3dsMaxとの親和性が高くユーザー数が多い。シーン編集ツールAwayBuilderが登場し、日々進化を続けています。 3Dツールとの親和性 公式では3dsMaxを推奨。3dsMaxのエクスポータープラグインを備えています。（後述のSEA3Dと組み合わせると強力） Blender, Maya, Cinema4D用のスクリプトが提
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
GoogleのDart言語を使ってHTML Canvasでリッチコンテンツを作ろう！ Flashライクで効率的な開発を実現するフレームワークStageXLとは - ICS MEDIA
GoogleのDart言語を使ってHTML Canvasでリッチコンテンツを作ろう！ Flashライクで効率的な開発を実現するフレームワークStageXLとは 今回はHTMLでリッチコンテンツを作るための新しい手法としてDartという言語と、StageXLというフレームワークを紹介したいと思います。Dart言語を使うことでJavaやActionScriptライクにコードを書くことができ、StageXLフレームワークを使うことでFlashのようなリッチコンテンツをHTMLで作ることができます。 意外だったGoogle I/Oでの発表 先週のGoogle I/O 2013にてアドビからFlash Pro CCの拡張機能Toolkit for Dartのアナウンスがありました。Flash Proで作ったシンボルやアニメーションがDartで出力されHTML canvasで動作するようです。そのFl
HTML5開発者必見、最速のJavaScriptライブラリはどれだ!? パフォーマンスの徹底検証 | ICS MEDIA
HTML5で2次元のインタラクティブコンテンツを制作するには、さまざまなJavaScriptライブラリがあります。どれを選択するべきか迷いどころではないでしょうか？ そこで今回はHTML5の各種JavaScriptライブラリについて、パフォーマンスを比較検証してみました。 今回検証したフレームワーク メジャーなJavaScirptライブラリとして次の5種類でテストしました。バージョンは2013年4月10日現在の最新版を使っています。詳しい検証方法は記事の後半にまとめています。 CreateJS (EaselJS 0.6.0) Arctic.js (v0.1.11) enchant.js (v0.6.3-48) Pixi.js (v1.0.0) Processing.js (v1.4.1) 各種JavaScirptライブラリのベンチマーク結果 ※グラフの数値が高いほどパフォーマンスが高いこと
CreateJSを使ってインタラクティブなHTML5デモを作ってみた - ICS MEDIA
CreateJS勉強会の参加応募数からも関心の高さがうかがえるCreateJSですが、弊社でも研究をしており今回は制作したデモをいくつか紹介します。 有名な絵画っぽいもの CreateJSとCSSを用いたデモです。カーソルをキャンバス上で動かすと絵が描け、ドラッグするとちょっと3Dっぽい動きをします。絵の描画はCreateJS、3Dっぽい動きはCSSで作っています。絵の描画は重ね塗りし続けると負荷が増大するので、毎フレームキャッシュし描画するコストを減らし最適化しています。 デモはこちらから Box2D Drop CreateJSと物理演算ライブラリ「Box2D」を組み合わせたデモです。マウスでアイコンをドラッグ＆ドロップすることで投げることができます。Box2DライブラリはActionScript版とほとんど同じAPIで用意されているので、ActionScriptのノウハウを活用できます
モバイルアプリ開発者必見！初期型から最新のAndroid端末まで、Adobe AIR製アプリのパフォーマンス徹底検証 - ICS MEDIA
モバイルアプリ開発者必見！ 初期型から最新のAndroid端末まで、 Adobe AIR製アプリのパフォーマンス徹底検証 Adobe AIRの技術を使えば、FlashでAndroid/iOS向けアプリを作成できます。それもPCブラウザ向けに作っているFlashコンテンツもコード（設定ファイル関係）を少し変更すれば、モバイルアプリに容易に移植できるので、ワンソース・マルチプラットフォームとしてFlashは幅広くコンテンツ・アプリ制作に役立てることができます。 しかし、気になるのはAIRアプリのパフォーマンスではないでしょうか。そこでAndroidの新旧さまざまな端末を使ってパフォーマンスを検証してみました。 2Dゲームのパフォーマンス まずは2Dゲームでのパフォーマンスの紹介です。Stage3Dのフレームワーク「Starling」のサンプルとしてソースが配布されている「Whack」を使って、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
