タグ

ブックマーク / clockmaker.jp (41)

  • リッチなHTML5コンテンツのためのフレームワーク「CreateJS」が公式サイトを公開 | ClockMaker Blog

    Flashのエンジニアとして著名なGrant Skinner氏が開発している、「CreateJS」の公式サイトがオープンしました。 http://www.createjs.com/ CreateJSはHTML5を介してリッチなインタラクティブコンテンツの制作をサポートする、JavaScriptライブラリとツールのスイートです。CreateJS SuiteにはEaselJS、TweenJS、SoundJS、PreloadJS、とZoeのツールがあります。 私のブログでもEaselJS、TweenJSを使ったインタラクティブコンテンツのデモを幾つか制作して紹介してきましたが、Flashで培われた技術がそのまま利用できる点で非常に使い勝手のいいツール群だと思っています。 EaselJSとTweenJSでテキストエフェクト EaselJSを使った流体パーティクル入門 今回は公式サイトで明らかになっ

    リッチなHTML5コンテンツのためのフレームワーク「CreateJS」が公式サイトを公開 | ClockMaker Blog
  • Flash Player 11のStage3Dでパノラマ表現(Alternativa3D版) | ClockMaker Blog

    3D表現で定番のパノラマVRをFlash Player 11のStage3Dを使って作ってみました。マウスでドラッグ&ドロップすると、360度の視界を見渡すことができます。 Spherical VR Version demo (require Flash Player 11) src Cubic VR Version demo (require Flash Player 11) src これらのデモはStage3Dを利用しているため描画はGPUで処理されており、Flash Player 9/10の時代に作っていたCPU版と比べると負荷が低く動きがなめらかになっています。なお制作する際に利用したフレームワークはAlternativa3Dと自作のAlternativaTemplateです。 ※写真は二宮さんから提供を受けたものです (自著Papervision3D解説のサンプルに写真を含めて

  • たった数行のコードでクールなパーティクル表現を実現! Flash Player 11対応の2Dフレームワーク「Starling Framework」 | ClockMaker Blog

    たった数行のコードでクールなパーティクル表現を実現! Flash Player 11対応の2Dフレームワーク「Starling Framework」 Flash Player 11の新機能Stage3Dですが、上条さんのブログでも紹介されているとおりStage3Dは3Dだけでなく2DでもGPUを使って描画できます。2DにおいてはStarling(スターリン)というフレームワークが存在し、これを使うことで2次元表現でもGPUの圧倒的なパフォーマンスを得ることができます。Adobe MAX 2011で受講したセッションのまとめでも紹介しましたが、Starling FrameworkはAdobe側もフィーチャーしており、今後が期待できるフレームワークの一つと考えて間違いなさそうです。ちなみStarlingについては次の記事が参考になります。 Starling (新しい ActionScript

    たった数行のコードでクールなパーティクル表現を実現! Flash Player 11対応の2Dフレームワーク「Starling Framework」 | ClockMaker Blog
  • 正式リリースされた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 Player 11の新機能を試せる20本のデモ | ClockMaker Blog
  • HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog

    HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas

    HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
  • ADC MEETUP ROUND 01 発表資料「Flashによるマルチデバイスアプリ開発ワークフロー」 | ClockMaker Blog

    2011 年 6 月 11 日に開催した ADC MEETUP ROUND 01 モバイルを攻略せよ のフォローアップとして「Flashによるマルチデバイスアプリ開発ワークフロー」のスライドとサンプルをシェアします。 スライド資料(PDF) 新しく登場したFlash Professional CS5.5の新機能の紹介を交えて、マルチデバイスでのアプリ開発の方法などを解説しています。 ADC MEETUP ROUND 1では天気の優れない中、ご来場頂きありがとうございました。

    kanariia
    kanariia 2011/06/22
    新しく登場したFlash Professional CS5.5の新機能の紹介を交えて、マルチデバイスでのアプリ開発の方法などを解説
  • 第1回 AIR for Android 勉強会 発表資料「マルチタッチ/ジェスチャー入門」 | ClockMaker Blog

    2011 年 2 月 2 日に開催した第1回 AIR for Android 勉強会のフォローアップとして「マルチタッチ/ジェスチャー入門」のスライドとサンプルをシェアします。この発表は AIR for Android の未経験〜初心者の方を対象に、最新の新しいタッチ系のAPIを紹介した内容になっています。 スライド資料 当初、勉強会は20〜30人の規模で募集されていたのですが、あまりに参加希望者が多かったので100人の会場に変更になりました。AIR for Android への期待や盛り上がりを感じざるを得なかったです。 関連記事 第1回 AIR for Android 勉強会 : ATND Togetter – 「「第1回 AIR for Android 勉強会」のつぶやきまとめ」

  • Adobe AIR for Andriod公開、さっそく公開されてるAIR製Androidアプリを10個試してみた | ClockMaker Blog

    Adobe AIR for Andriod公開、さっそく公開されてるAIR製Androidアプリを10個試してみた Android 用のAIRランタイムが公開されました。Android 2.2のスマートフォンをお持ちの方はAndroid マーケットからインストールすることができます(検索で「Adobe AIR」と調べれば見つかります)。 すでにいくつかAIR for Androidで開発された(であろう)アプリが公開されていたので、いくつかピックアップして試してみました。AIR for Androidアプリの今後の開発の参考までにレポートしてみます。 今回試したAIR アプリのスクリーンショット(アイコン) (画像はクリックで拡大できます) 以下では試した10個のアプリについて紹介します。今のところすべて英語のアプリケーションのみです。 Chroma Circuit 隣り合うネジの色を揃え

    Adobe AIR for Andriod公開、さっそく公開されてるAIR製Androidアプリを10個試してみた | ClockMaker Blog
  • Adobe MAX 2010 RETWEET 発表資料「スマートフォンアプリ開発とFlexフレームワーク"Hero"入門」 | ClockMaker Blog

    Adobe MAX 2010 RETWEET 発表資料「スマートフォンアプリ開発とFlexフレームワーク"Hero"入門」 2010 年 11 月 25 日に開催した Adobe MAX 2010 RETWEET のフォローアップとして「スマートフォンアプリ開発と Flex フレームワーク “Hero” 入門」のスライドとサンプルをシェアします。 スライド資料 サンプル(ソースファイル付き) サンプルについて 発表中に紹介したサンプルは Flex SDK Hero (プレビュー版)を利用した Android サンプルアプリです。これらのサンプルは Adobe Flash Builder “Burrito” (プレビュー版につき無償)で、[読み込み]→[Flash Builder / Flash Builder プロジェクト]→[プロジェクトフォルダー]を選択することで試すことができます。

    Adobe MAX 2010 RETWEET 発表資料「スマートフォンアプリ開発とFlexフレームワーク"Hero"入門」 | ClockMaker Blog
  • ActionScript 3.0 での 3D 物理演算ライブラリ「jiglibflash」 | ClockMaker Blog

    ActionScript 3.0 での 3D 物理演算ライブラリ「jiglibflash」を使ってデモを作ってみました。このデモの 3D エンジンには定番の Papervision3D を利用しています。 [JigLibFlash] Meteor [JigLibFlash] Terrain Physics 以前「JigLibFlash と SpringCamera3Dで3Dゲームっぽい動きを実現」という記事で jiglib を紹介しましたが、このライブラリをブログで紹介するのは実は 2 年ぶり。jiglib はその間も頻繁に更新されており、Flash Player 10 対応による高速化と、API命名規則が C 言語風のものから ECMA ( ActionScript ) 風のものに変わっていて扱いやすくなっています。当ブログは特にここ数ヶ月時間がとれず更新頻度が落ちているわけですが、

    ActionScript 3.0 での 3D 物理演算ライブラリ「jiglibflash」 | ClockMaker Blog
  • Flashに関する有用なTwitterまとめ | ClockMaker Blog

    TwitterではFlashに関する話題で議論がおこなわれることがあります。有用なやりとりはトゥギャッターというウェブサービスにまとめられることがありますが、その中でこれだけはチェックしておきたいという話題をピックアップしてみました。 見逃しがしてしまったまとめがあれば、ぜひチェックしてみてください。 Flash 関連のまとめ記事 「Flashあるある」 「Flash CS6の要望まとめ」 「画像処理をデザイナーがやるのかコーダーがやるのかという話」 HTML5 / JavaScirpt 関連のまとめ記事 「間違ったJavaScriptとFlashの使い分け」 「お客様の中にFlashとHTML5に詳しい方はいらっしゃいませんか!」 「HTML5が切り開くWebアプリケーションの未来実況まとめ」 ActionScript 関連のまとめ記事 「ActionScript 2.0 ってどんな存在

  • FlashDevelopでASDocを作る方法+SVNでASDocを公開する方法の解説ビデオ | ClockMaker Blog

    かなりニッチな話題ですが、ActionScript 3.0 のライブラリ開発者向けに役立つ情報を。フリーの開発ソフト FlashDevelop を利用して ASDoc(=ライブラリの API ドキュメント)を作る方法の解説ビデオを作ってみました。SVN(サブバージョン)上でASDocを公開する方法もあわせてビデオで解説しています。 高解像度の HD ビデオをアップロードして、ビデオのアノテーションを入れたので、とりあえずビデオを見れば全部わかるはず。Spark project や Google Code で ActionScript 3.0 ライブラリを公開する場合に参考にしてくださいませ。 ライブラリ開発者はこちらもあわせてチェックしておくといいかもです。 ASDoc入りのSWCファイル「Fat SWC」の作り方

    FlashDevelopでASDocを作る方法+SVNでASDocを公開する方法の解説ビデオ | ClockMaker Blog
  • 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を理解する フ

    60個のソースが無料でダウンロードできるFlash 3Dの学習サンプル集 | ClockMaker Blog
  • [BetweenAS3] カスタムイージング | ClockMaker Blog

    Flashではスクリプトでトゥイーンを作るとインタラクションに関わるいろいろ制御が楽だったりするのですが、トゥイーンライブラリにビルドインされているイージングの種類も限られているので、求めている動きに近づけるときに限界を感じることがたまにあります。 ということで、BetweenAS3のイージング関数の引数に、Flash Professionalのようなカスタムイージングを適用するデモを作ってみました。ベジェでイージングの曲線をカスタマイズすると、わりと求めている動きに近づけられるかもしれません。 BetweenAS3 Custom Easing Generator Flash Professional カスタムイーズイン、イーズアウト メモ1. BetweenAS3にカスタムイージングを適用する方法は、Custom.func()を使って次のようなスクリプトを記述します。 var ease:

    [BetweenAS3] カスタムイージング | ClockMaker Blog
    kanariia
    kanariia 2010/05/24
  • Papervision3Dの日本語リファレンスガイド | ClockMaker Blog

    少し公開から日数がたちましたが、告知を。Flashの3Dエンジン「Papervision3D」の日語版リファレンスガイドを立ち上げました。 Papervision3D™ 2.1 日語 リファレンスガイド papervision3d-jp(プロジェクト) こちらは Papervision3D チームから公式に OK をもらって用意したもので、アーカイブレベルで提供されている最新のリビジョン 2.0.932 の ASDoc を翻訳したものです。有志で立ち上げたものなので未完成の部分も目立ちますが、元の英語版よりも全般的に解説を充実させて用意しているところが特徴です。もし Papervision3D で不明なことがありましたら、日語版フォーラムとあわせてご参照くださいませ。 Papervision3D Forum – トップページ ブログ内の関連記事 Papervision3D の日語フ

    Papervision3Dの日本語リファレンスガイド | ClockMaker Blog
  • Icon Generatorができるまで〜制作レポート〜 | ClockMaker Blog

    先日公開した自主制作で作ったウェブサービス「 Icon Generator 」ですが、備忘録として制作レポートを書いてみました。主に技術的なことをまとめています。 (ウェブサイトは勉強も兼ねてHTML5でマークアップしています) きっかけ Icon Generatorを公開してから2年ほど立つのですが、その期間中にもAdobe CS4が発売されたりという背景があり、国内外からバージョンアップのリクエストがありました。なかなか忙しく機会をつかめずにいたのですが、CS5の発売が近づいていることがきっかけとなりGWの期間を利用して自主的に作ってみました。 AIR版とWeb版 今回はAdobe AIRアプリ版だけでなく、オンラインサービスとしても両方を展開したところが大きな特徴です。もともとAIRアプリとして提供していましたが、ブラウザから利用できたほうがより多くの人から使ってもらえるはずなのでオ

    kanariia
    kanariia 2010/05/10
  • 待望の日本語化も! FlashDevelop 3.1.0 RTMが登場 | ClockMaker Blog

    無料で使える超強力ActionScriptエディター「FlashDevelop」の最新版である 3.1.0 RTM がリリースされました。今回のバージョンは一つの節目で、日語のローカライズが達成されました。日語化対応はFlashDevelopコミッターの @matsumos さんが中心に行った FlashDevelop.jp コミュニティー(日語化プロジェクト)の活動の成果です。 日語化対応以外にも次期Flash Platform(Flash Player 10.1, Flex SDK 4)への対応や、HTML編集のための強力な機能としてZen-Codingが搭載されました。リファクタリングやデバッグプラグインなどFlash Builder 4の機能も一部搭載され、十分すぎるほどのメジャーアップデートとなっています。 それでは、簡単にですがバージョンアップで強化されたポイントをご紹

    待望の日本語化も! FlashDevelop 3.1.0 RTMが登場 | ClockMaker Blog
  • After Effects × Flash なサイト制作に Progression を! | ClockMaker Blog

    昨日の記事「After Effects プラグインを活用した効果的な”Flash”視覚効果」ですが、ソースファイルを公開しました。ソースファイルは記事の最後にまとめています。 さて、AfterEffectsとFlashを連携させたウェブサイトを作るにあたり、FlashのフレームワークProgressionを使えば、とても簡単にオーサリングすることができます。今回はProgressionの魅力を改めて紹介したいと思います。 スクリプトを書かなくても実装できるProgression 通常、Flashサイトを作るにあたり最低でも「gotoAndStop()」というスクリプトを使って画面遷移を作る必要がありました。Progressionであればそのスクリプトさえ記述する必要が無く、タイムラインに動画を並べ、ちょっとした「コンポーネント」を設定するだけで画面遷移を作ることができるのです。 ※ちなみ

    After Effects × Flash なサイト制作に Progression を! | ClockMaker Blog
    kanariia
    kanariia 2010/04/10
  • Flash Builder 4とプラグインで爆速コーディングをしよう! | ClockMaker Blog

    先日紹介したFlash Builder 4ですが、皆さんはもう試されましたでしょうか? アップグレードしたばかりで、どのような使用感なのか気になるところですよね。今回はFlash Builder 4の紹介に加えて、さらにコード補完を劇的に強化するプラグインの紹介です。 Flash Builder 4は様々な機能が豊富でとても強力なツールなのですが、他コードエディターの進化に比べると若干コード補完のみが物足りない印象があります。AdobeエヴァンジェリストであるLee氏のブログThe Flash Blogで知ったのですが、SourceMateというプラグインがとても優秀でコード支援機能を強化してくれます。 Flash Builder 4でActionScript 3.0をコーディングする様子をビデオにまとめたので、まずはご覧くださいませ。90秒のムービーで、Flash Builder 4とS

    Flash Builder 4とプラグインで爆速コーディングをしよう! | ClockMaker Blog
    kanariia
    kanariia 2010/03/30
  • Flash Builder 4のFlasherに役立つ10個の魅力的な新機能 | ClockMaker Blog

    ついに登場しましたAdobe Flash Builder 4。Flash Builder 4はFlashを作ることのできるAdobe謹製の統合開発環境で、Flash CS3/CS4製品よりもコードを中心に開発される方に向いたソフトです。 Flash Builder 4はFlex Builder 3の後継バージョンで、今回のアップデートでFlex BuilderからFlash Builderへと名前が変更されました。かなりの機能が盛り込まれたのですが、そんなFlash Builder 4の魅力をFlasher視点としてあまなく紹介してみたいと思います。 1.Flash Professionalとの連携 公式にFlash Professional (CS4/CS5)との連携できるようになりました。具体的にはFlash ProfessionalのコードエディターとしてFlash Builder

    Flash Builder 4のFlasherに役立つ10個の魅力的な新機能 | ClockMaker Blog