HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
HTML5 Canvasを始めよう：EaselJSとTweenJSでテキストエフェクト | ClockMaker Blog
HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」と「TweenJS」を使ってデモを作ってみました。 demo 今回のブログ記事では「EaselJS」と「TweenJS」の使い方をデモの作り方を通して紹介します。 ライブラリの紹介 「EaselJS」と「TweenJS」はFlashのエンジニアとして著名なGrant Skinner氏が開発しているJavaScriptライブラリです。「EaselJS」がHTML5 CanvasをFlashライクに使うためのライブラリで、「TweenJS」が汎用的なトゥイーンライブラリです。 ▲EaselJS HTML5のCanvas要素はHTML上に自由に描画することのできる新しい要素で、工夫することでFlashのように豊かな表現を作ることができます。ただCanvasではJavaScriptでちょっと
正式リリースされたFlash Player 11の新機能を試せる20本のデモ | ClockMaker Blog
今月上旬に、待望のFlash Player 11 の正式版がリリース しました。前のFlash Player 10から約3年ぶりのメジャーアップグレードとなります。 新しい機能は公式サイトで紹介されてますが、本ブログではインキュベーター版の頃から作られた実際に新機能を体験できる実験的デモを集めてみました。ご覧になる前にFlash Playerを最新にしておくことをお進めします。(開発者向けデバッグプレイヤーはこちらです) Stage3DによるGPUを活用した2D表現 LLC DigiFie » Starlingのパーティクルをちょっとだけさわってみた Starlingという2D表現のフレームワークでつくられたパーティクルデモ。GPUを使っているため高速。 Introducing Starling – ByteArray.org こちらもStarlingのデモ。4点のデモが掲載されています。
FlashのアニメーションをHTML5に変換するツール「Wallaby」をAdobeが公開 | ClockMaker Blog
FlashのアニメーションをHTML5に変換するツールとして、3月8日「Wallaby (ワラビー)」のプレビュー版がAdobe Labsにて公開されました。 Download Wallaby – Adobe Labs 結論から言うとブラウザ互換など懸念点がありますが、思った以上に変換精度が高いです。そして真っ先に感じたのは、WallabyによってHTML5出力が可能になったという点で、アドビが提供しているFlash ProfessionalはHTML5時代が万が一到来してもオーサリングツールとしてのポジションを保ち続けるだろうということです。 速報として「インストール方法と使い方」と「変換したデモ」を紹介してみます。以下詳細です。 インストール方法と使い方 ①まずはAdobe Labsからアプリケーションをダウンロードします。アプリケーションはAdobe AIR製ですので、事前に最新のA
HTML5出力可能なFlash CS5拡張機能を作ってみた | ClockMaker Blog
2011年1月30日に開催された「東京てら子」というFlashの勉強会で発表した内容ですが、HTML5出力可能な�Flash CS5拡張ツールを作ってみたので紹介します。 まずはこちらのビデオをご覧ください。実際に動作している様子をビデオに録画したものです。 タイトルのとおり、Adobe Flash Professional CS5 から HTML5 コンテンツを書き出すという拡張機能で、サイトのトップページで使うようなシンプルなムービー制作に適したツールとなっています。対象ブラウザですがメジャーなモダンブラウザだけではなく、Internet Explorer 6-8 にも対応しています。 生成手順は次のとおり ( ↑ ) Flashの編集画面 ( ↑ ) 拡張機能を［コマンド］から呼び出す。すると変換が自動的に行われる。 ( ↑ ) 変換されたJavaScriptコードを生成、これをHT
開発用Android端末を一番安く手に入れる方法 | ClockMaker Blog
Android 2.2 以上のスマートフォン/タブレットであれば、AIR for Android を使って Android アプリを開発することができます。Flash 開発者であれば今まで培ってきたスキルで挑戦できるのでまたとないチャンスですが、Android の実機を購入する事自体ハードルが高いと思っている方が多いのではないでしょうか。 そこで、Adobe AIR が開発可能なモバイル端末で、結局最終的にいくら費用がかかるのか一覧の表としてまとめてみました。 HTML版はこちら 結論としては、キャリアへの通信費が発生しない海外の SIM フリー端末が最も費用がかからないということになりました。キャリア版としてはソフトバンクの HTC Desire HD が安くなる計算となります。この資料はパケット通信定額のものなので、キャリアのデータ通信を利用せずWiFiで利用すればもっと少ない月額負担
ActionScript 3.0で日本語対応のPDFが作成できる「purePDF」のサンプル | ClockMaker Blog
ActionScript 3.0 からクライアントサイドだけで PDF を作成できる AS3 ライブラリに AlivePDF と purePDF があります。最近は「purePDF」が日本語に対応しているとかで評判が良かったりするのですが、試してみようにも公式で提供されているサンプルが少しばかり難しめです。そこでシンプルなサンプルを用意してみました。 デモ（要Flash Player 10.1） ソースコード（ZIP ※） ソースコードは Adobe Flash Builder 4 のプロジェクトで用意していますが、Flash Professional や FlashDevelop でも利用することができます。以下、具体的な使い方を解説します。 ※ライブラリとフォントは公式サイトから別途ダウンロードください 使い方 まずはライブラリのパスを通します。 公式サイトからライブラリの SWC フ
AS3オブジェクトをシリアライズできるライブラリXMLSerializerを公開 | ClockMaker Blog
サーバーサイドへのデータの通信やローカル保存などを想定した場合の、データの扱いについて前回のブログ記事で紹介しました（ActionScriptでのデータ保存形式の比較(XML・JSON・ByteArray) ）。XMLは汎用的に使われる頻度が多いですが、自前パーサーを作るのが難点という課題がありました。 そこでオブジェクトを半自動的にXMLにシリアライズできるXMLSerializer（XMLシリアライザー）というActionScript 3.0のライブラリを作ってみました。Spark projectにコミットしたので、利用したい方はそちらを参考くださいませ。 clockmaker/XMLSerializer – Spark project これを使うとFlashのデータで、配列や無名オブジェクト、カスタムクラス、Vector型などを完全に型情報をもったまま変換できます。ActionScr
60個のソースが無料でダウンロードできるFlash 3Dの学習サンプル集 | ClockMaker Blog
当ブログではFlashの3Dに関する記事を数多く書いていますが、この度それらの記事をこの1ページにまとめてみました。系統別にまとめたので、目的とする解説やサンプルが探しやすくなったのではないかと思います。それぞれの記事でソースファイルをダウンロードできますので、学習の理解にお役立てください。 Flashの3Dエンジンで最もメジャーな「Papervision3D」を中心にブログ記事を書いています。 Papervision3D – チュートリアル クリックで再生できます フレームア クションで覚える PV3D チュートリアル Vol.01 フ レームアクションで覚える PV3D チュートリアル Vol.01 (補足) フ レームアクションで覚える PV3D Vol.02 : Primitiveを理解する フ レームアクションで覚える PV3D Vol.03 : Materialを理解する フ
Flash 3Dエンジン比較とブリッジライブラリCross3D – 大阪てら子29発表資料 | ClockMaker Blog
毎月コンスタントに大阪で開催されている Flash の勉強会大阪てらこに参加してきました。今回は HIGE5 というタイトルで、総計 25 人ぐらいの方が参加され約 5 時間にわたり各自まとめてきた Flash の面白いことについて発表し合いました。 私は、Flash の各種 3D エンジンの比較レポートと、この日のために準備した(といっても 1 日ぐらいで作った)新種の 3D ライブラリ「Cross3D」を発表しました。Cross3Dとは、ActionScript 3.0 の各種 3D エンジンを同じソースコードで動作させるブリッジライブラリです。発表資料は Acrobat.com にアップしていますので、よろしければご覧ください。 なお、資料中にて紹介しているデモは次の URL でご覧頂けます。 7*7*7=343個の直方体を表示したときのFPS比較 Papervision3D 2.1
Stardustを使ってAS3のパーティクル表現を学ぶ Vol.01 | ClockMaker Blog
ActionScript 3.0 のパーティクルエンジンである Stardust (スターダスト)についてチュートリアル記事を書いていこうと思います。 以前、さらっと概要を紹介しましたが、Stardust は MIT ライセンスで公開されているため個人・商用利用ともに扱いやすい AS3 のライブラリです。Stardust はカスタマイズしやすいように設計されたライブラリでもあり、本家サイトではバリエーション豊富で魅力的なサンプルがいくつも紹介されています。(開発者のブログはこちら「CJ’s Blog」) 第1回のチュートリアルでは Stardust を動かすに当たり、最小限のソースコードで動作する使い方を説明します。 1.ライブラリの導入 Google Code からライブラリをダウンロードします。今回はソースファイルが格納されている rar ファイル「Stardust 1.1.132 B
パーティクル表現のためのAS3ライブラリ「Stardust」 | ClockMaker Blog
ざっくばらんにいろんなライブラリを紹介するシリーズ第三段目。Stardust (スターダスト)という海外のパーティクルライブラリの紹介。2Dにも3Dにもどちらにも利用できる表現の自由度が高いライブラリです。とりあえず、Papervision3Dと組み合わせてデモを作ってみました。蝶が飛んだ軌跡に発生している粒子部分がStardustの効果になります。 demo (Flash Player 9) ライブラリStardust とは 2Dと3Dをサポートするパーティクルエンジンで、ソースコードはMITライセンスとしてGoogle Codeにて公開されています。さまざまな効果やプロパティーを組み合わせて使うことができ、自由度の高いカスタマイズが可能です。 stardust-particle-engine ライブラリの特徴は次のような感じ。 簡単にカスタマイズができる 重力や反発といった物理演算の適
wonderflから学ぶActionScript 3.0最適化 | ClockMaker Blog
いつも勉強になる_level0.KAYACさんのブログでイベント告知(ごはんとFlash -Its a wonderfl rice-)がありましたが、皆さん詳細をチェックしましたか？ ライブコーディングというその場でActionScript 3.0を書いて課題のFlashを作るという企画もあるのですが、私も参戦します。果たして30分で作り上げることができるのか、今から緊張します。 さて、前置きが長くなりましたが、wonderflで検証されたActionScript 3.0最適化手法をまとめてみました。詳細は以下から。 Bitmap関連 Flashの処理速度の最適化において、描画処理の最適化は最も効果があります。ここではスクリプトで高速化した検証結果をまとめてみました。 BitmapDataクラスのdraw()とcopyPixels()だとcopyPixels()のほうが160%高速。 co
Progression拡張機能「AutoSitemap」をリリース | ClockMaker Blog
extends Progression 拡張機能で Web Designing賞を受賞した作品「AutoSitemap」ですが公開しましたのでお知らせします。 これは、Progressionで作られたウェブサイトに対して、開発者の負担なくサイトマップを実装する拡張機能です。サイトマップ設置によるユーザビリティー向上と、開発時の効率化が目的の拡張機能となります。 サンプル サンプルサイトを見る サンプルサイトのソースファイル(Flash CS4プロジェクト) ライブラリ ソースファイル (MITライセンス・動作仕様はProgression4/Flash CS3以上) ※追記2010年7月12日：Progression4に対応させました。Progression3で利用する場合は、開発用SVNから1.x系のバージョンをダウンロードください。 概要はこんな感じ ライブラリの主な用途や、使い方は次の
Papervision3Dをベースした3Dアプリ「VizualPV3D」 | ClockMaker Blog
Papervision3D (PV3D) をエンジンにした 3D アプリケーションの「VizualPV3D」のアルファ版が公開されていたのでダウンロードして試してみました。 とりあえず何ができるか 公式サイト で紹介されているビデオがありましたので、掲載しておきます。フルスクリーンモードにして再生すれば、実際の使用感が伝わると思います。 Vizual PV3D from Juxt Interactive on Vimeo. 私が触ってみて気づいた点をリストアップしてみました。 Primitiveオブジェクトを配置できる 配置したオブジェクトはXYZ座標と回転を自由に設置できる Material (テクスチャ)を設定できる ライトにも対応している ライトの位置も調整できる テクスチャにはローカルの画像を使用できる(アセットとして登録もできる) カメラアングルも同様にXYZ座標と回転を自由に設
[PV3D] リボンの実装方法 | ClockMaker Blog
3Dのリボンを作るときにアプローチの仕方が勉強になったのでメモ。 note.x | [PV3D2.0] attitudeControl 【papervision】方向ベクトルからMatrix回転への変換 « NOTE.haramakoto 行列やクオータニアンを理解した方がスマートだと思うのですが、昔作ったデモが比較的簡単な方法で実装できていたので紹介してみます。 lookAt (対象のオブジェクトを向くように回転するというメソッド)で実現 [PV3D] Ribon Road (6秒くらい待つと走り始めます) そもそもリボンの実装方法としては リボンは無数の平面( Plane )を鎖のようにつなげてできている リボンを配置するベジェ曲線は Tweener の _bezier を使っている で、連続する Plane をどうやって向きをそろえているかというと ダミーのDisplayObject
美容整形美容外科の高難度手術/仙台中央クリニック
広告を制限しています 広告はクリニックの認知度を高めると共に、イメージを大幅にアップさせます。しかし広告費の増大は、手術料金の高騰につながります。仙台中央クリニックは、テレビや雑誌での広告は一切行っていません。その為、クリニックの認知度は低く、初めて来院される場合、怪しいクリニックと思い、恐る恐る来院される方もいらっしゃいます。本当は他のクリニックで治療を希望していたものの料金が高く、予算オーバーになり、仕方なく仙台中央クリニックを受診される方もいらっしゃいます。仙台中央クリニックでは、出来るだけ低料金で治療を提供するという方針のもと、イメージアップを捨てて、広告を大幅に制限しています。 友達紹介を中心に集客を行っています 仙台中央クリニックは広告を制限しているため、友達紹介での御来院される割合が多いことが特徴です。多くの方が、当院で美容整形を受けた友人の紹介で御来院されます。仙台中央クリ
FlexアプリケーションでMacのマウスホイールに対応させる | ClockMaker Blog
久しぶりに Flex の話題。Flash は一般的に Mac 環境のブラウザでマウスホイールが効きません。そのため Flex では DataGrid や ComboBox などスクロールバーを利用するものは、Mac 環境で使い勝手が多少落ちてしまいます。 対処方法として、 Flash 単独では Mac のマウスホイールに対応できないので、JavaScript と連動させる仕組みを実装します。やや難しい実装方法となるため、少数派のユーザーのために大きな労力をかける必要がありました。そのため対応するところに開発者の良心のようなものが見えるというコメントがあるほどです。 前置きが長くなりましたが、最近では複数環境のマウスホールイベントに対応した SWFWheel ライブラリを使用することで簡単に解決できます。Flex アプリケーションもしかりで、SWFWheel を使う事で mx.control
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
繰り返しの背景画像が作れるパターンジェネレーター | ClockMaker Blog
[Papervision3D] Primitive Generator | ClockMaker