タグ

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

  • リッチな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
  • HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 | ClockMaker Blog

    Flashでよく見かけるテキストシャッフル演出(文字列がランダムで切り替わる演出、正しい呼び名はわかりませんw)をHTML5で作ってみました。HTMLのタグ(pタグとか)に使うバージョンと、HTML5の新要素Canvasを使うバージョンの二種類を用意しました。 【2017年4月26日 追記】 【重要】JSライブラリーはGitHubで更新しています。使用したい方は次のGitHubのリポジトリを御覧ください。 Canvas版はCreateJS 2015年版でも動作するよう更新しました。 デモ demo (HTMLエレメント版) demo (Canvas版) ソースコードはMITライセンスで公開してしますので、個人・商用問わずご自由にお使いください。 ShuffleText.js (HTMLエレメント版) ShuffleEaselText.js (Canvas版) それでは以下で使い方を紹介して

    HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 | ClockMaker Blog
  • ActionScriptでJSONを扱う方法 | ClockMaker Blog

    先日、昔の後輩からJSON(ジェイソン)について教えて欲しいとリクエストをもらったので、JSON のメリットと使い方(AS3)をまとめてみます。 JSONとは何か? XMLのようにデータを文字列で格納するファイル形式。Flashの外部データには一般的にはXMLが使用されることが多いですが、JSONはECMA標準のObject/Array形式で保存するため、解析の手間が少なく扱いやすいという利点があります。 JSONのメリット EMCA標準のObject/Array形式で保存するため、解析後のデータが扱いやすい ファイル容量が少なくてすむ JSONのデメリット 人が読んで分かりにくい(手更新するならXMLのほうがいいかも) 書式が正しいかのチェックが面倒(XMLならブラウザに放り込めば、バリッドかどうか簡単にチェックできます) ActionScriptでの使い方 ライブラリ「as3corel

  • Flashで360度パノラマ動画MotionVRを再生 | ClockMaker Blog

    今年2月に発売されたSONYのお手軽HDカメラBloggie(ブロギー)で360度パノラマ動画が撮影できるので、Flashのプレイヤーで再生できるようにしてみました。マウスドラッグで動画の視点を動かせたり楽しいので、ぜひ次のリンクをご覧くださいませ。 MotionVR Player これはMotionVR(モーション・ブイアール)という技術で、以前ブログで紹介していたFlashを利用したパノラマ表示Flashを利用したパノラマ表示の応用版になります。 360度パノラマ動画が撮影できるHDカメラとは bloggieというビデオカメラは次のような構造になっています。 bloggieで撮影した動画 撮影した動画はドーナツ型の形状として保存されます。動画の形式はMPEG4(H.264/AVC)で720PのHD動画(1280×720px)なので、そのままFlash (Flash Player 9 U

    Flashで360度パノラマ動画MotionVRを再生 | ClockMaker Blog
  • AS3でよく使われる変数名の意味をまとめたよ | ClockMaker Blog

    こちらの記事がおもしろいと思ったので、ActionScript 3.0でよく使われる変数名の意味をまとめてみました。このあたりの変数名で命名していれば他の人にソースを見られても恥ずかしくないのと、初心者の方であれば変数名が何を意味しているのか確認に役立つと思います。 現時点では70個ぐらいピックアップしました。 つっこみがあれば@clockmaker_coreまでリプライ頂ければと思います。 ちなみに@matsumosさんが変数名まとめサイト的なものも開発されるらしいです。そちらも楽しみ!

    AS3でよく使われる変数名の意味をまとめたよ | ClockMaker Blog
  • 待望のニュース!Flash CS5 で iPhone アプリが開発できる(Flash CS5最新情報の翻訳も) | ClockMaker Blog

    待望のニュース!Flash CS5 で iPhone アプリが開発できる(Flash CS5最新情報の翻訳も) 米国で開催されている Adobe MAX 2009 で、今朝、重大な発表がありました。それはFlash CS5 で iPhone アプリが開発できるという大ニュースです。Adobe Labsに紹介ビデオと、実際に動作するFlash製iPhoneアプリが上がっています。ぜひ御覧ください! Adobe Labs – Adobe Flash Professional CS5: Applications for iPhone さっそくですが、iTunes で販売されている Flash 製 iPhone アプリを試してみましたのでレポートしてみます。また Flash CS5 についても翻訳してまとめてみました。 Flash 製 iPhone アプリレビュー ↑ Red Hood (無料)

    待望のニュース!Flash CS5 で iPhone アプリが開発できる(Flash CS5最新情報の翻訳も) | ClockMaker Blog
  • PV3D演出サンプルNo.08:カスタムフラットシェーディング | ClockMaker Blog

    Flashの3Dライブラリ Papervision3D(ペーパービジョン3D)  2.1 のデモ。高速に実行できるフラットシェーディング(テクスチャに陰影を付ける方法)を試してみました。陰影をつけることで質感に味がでてくるので、ブラッシュアップの一手法として紹介してみます。 demo (要Flash Player 9) source 技術的な解説は以下から。今回は当ブログ初登場の3D行列計算を試してみました。 ライブラリにはFlatShaderクラスという汎用的なシェーディング機能が備わってますが(関連記事:Papervision3Dでビットマップのテクチャにライトを適用する方法)、込み入ったモデリングデータに適用しようとすると、速度がでない上に破綻することがあります。ビルドインのFlatShaderで試したのは次のデモ。 立方体の面が三角ポリゴンに分割され、破綻しているのが確認できます。

    PV3D演出サンプルNo.08:カスタムフラットシェーディング | ClockMaker Blog
  • ActionScriptを1行も書かずにFLVにテロップを追加するチュートリアル | ClockMaker Blog

    Flash CS3/CS4に付属のFLV Playback コンポーネントだけで、FLV/F4Vファイルにキャプション(テロップ)を簡単に追加することができます。 サンプル 仕組みはテロップ情報をXMLに持たせるだけで、コンポーネントが自動的にやってくれるというシンプルかつお手軽なものです。 手元にFLVだけがあってテロップを追加したいけど、スクリプトのスキルが足らない、お手軽に追加したいという場合には有効かもですね。 以下、具体的な作り方をチュートリアルビデオ付きで説明します。 チュートリアルビデオ 6分ぐらいで設定完了 ざっくりビデオキャプチャしておいたので、まずは参考ください。ゼロの状態から6分くらいで設定できます。 Tutorial Adding FLV Caption with Timed Text XML from clockmaker on Vimeo. 流れを簡単に紹介 F

    ActionScriptを1行も書かずにFLVにテロップを追加するチュートリアル | ClockMaker Blog
  • [アンケート結果]ActionScriptで人気のあるエディターは!? | ClockMaker Blog

    先日行った「どのエディターをメインにしてActionScriptを書いてますか?」というアンケートですが、306人からの回答を頂きました。回答くださった皆さんありがとうございます。 さてアンケート結果をまとめましたのでお知らせします。 1.Flash制作で利用しているOSは?

    [アンケート結果]ActionScriptで人気のあるエディターは!? | ClockMaker Blog
  • Thanks for 10000 DL of Icon Generator | ClockMaker Blog

    AIR アプリの Icon Generator ですが、Adobe Marketplaceにて10000ダウンロードを超えました(^-^) Most Popular で確認すると上から13番目。ダウンロード頂いたみなさん、ありがとうございます! ちなみに AIR 配布で失敗したのは、アクセス数が増えた始めの2ヶ月についてダウンロード数( DL 数)をカウントしていなかったことです。Marketplace では自動的に DL 数をカウントしているのですが、Marketplace に登録するまでは DL 数をカウントする仕組みを実装してませんでした。 AIR のシームレスインストール用の Badge はカスタマイズして Google Analytics と連携できるので、始めから実装しておけばよかったというのが反省です。もし AIR 配布される方がいらっしゃいましたら、私のような失敗をしないよ

    Thanks for 10000 DL of Icon Generator | ClockMaker Blog
    ruedap
    ruedap 2009/08/23
    「具体的な方法は、SDKのsampleの中に入っているシームレスインストール用のBadgeで、クラスファイルの「AIRBadge.as」を編集します。その中の関数「onButtonClicked」内に、Google Analyticsにログを残すスクリプトを記入すれば良いと
  • 個人向けのコードサイニング証明書 | ClockMaker Blog

    Ryan Stewart 氏のブログで紹介されていたのですが、Adobe AIR 用の個人向けのコードサイニング証明書が取得できるようになったみたいです。 ChosenSecurity – TC Publisher ID for Adobe Air – More Info そもそも証明書って このブログを見る方々は既にご存じかもしれませんが一応説明しておくと、AIR アプリは証明書を使って発行者を登録できます。発行者を登録するメリットですが、その企業が発行したものかを証明することで、悪意ある第三者による改変・再配布でのクレーム等のリスク対策になります。企業向けのコードサイニング証明書であればグローバルサインのサービスを利用することで Adobe AIR 対応のコードサイニング証明書を有料で取得できます。 無料の自己署名でもできるけど 無料の自己署名でも AIR アプリを配布することはできま

    個人向けのコードサイニング証明書 | ClockMaker Blog
  • Adobe AIRは高速だった! Flashを最速で再生できる方法を検証 | ClockMaker Blog

    いつぞやの「Web Designing」でAdobe AIRはFlash PlayerよりOSの下位APIを利用するので高速である、という記事がありました(記憶が薄れているので、この通りの文面とは違うと思いますが)。 少しでもFlashを高速に再生させたいと私は常々思っておりまして、検証してみることにしました。ついでですが、Flash Player 10 のパラメーターで速度が変わるのか、同一マシンでWin/Macのどちらが早いのかも比較もしています。 Adobe AIR と Flash Player の動作速度比較 同じハードで WindowsMac OS X の動作速度比較 Wmode指定による動作速度比較 検証したデモはこちら(要Flash Player 10)。Flash Player 10 の 3D 機能を利用しておりますが、それがどのように影響するのか確認してみたいと思い

    Adobe AIRは高速だった! Flashを最速で再生できる方法を検証 | ClockMaker Blog
  • FlexでExcelファイルを読み込む | ClockMaker Blog

    久々にFlexについてのエントリーです。 ビジネスマン必須のExcelファイル。私は仕様書やデバッグシート等々、FlashとPhotoshopの次ぐらいによく使ってますが、今回はExcelファイルをFlex上で表示してみます。 成果物はこちら(要FlashPlayer9) 読み込ませているExcelファイルはこちら [2010年3月31日追記]Papervision3Dのデモを抜きにして、シンプルにAS3XLSのみのソースコードにしたサンプルはこちら(Flex 3.5) まずはライブラリのご紹介 as3xls – Google Code エクセルを読み込むライブラリです。swcで提供されているので、今回はこれを使ってみたいと思います。 Excelファイルの読み込む処理 Flexなので久しぶりにMXMLを使ってみます。外部リソース読み込み系の処理はMXMLだとシンプルに書けるので、サクっと記

    FlexでExcelファイルを読み込む | ClockMaker Blog
  • Papervision3Dでビットマップのテクチャにライトを適用する方法 | ClockMaker Blog

    Papervision3Dでよく尋ねられることに、ビットマップのテクスチャを貼り付けた状態で、ライトによる陰影をつけられるかという質問があります。シェイダーという機能を使えば、それができます。 FlatShader demo (require FlashPlayer 10) PhongShader demo (require FlashPlayer 10) src (Flash CS4 Project) 実装方法 マテリアルの作成手順がちょっと増えるだけで、実装自体は簡単です。 1.マテリアルを作成 2.シェイダーを作成。シェイダーがビットマップのテクスチャとライトによるシェイディングマテリアルを合成するクラス 3.シェイダーを使ってシェイディッドマテリアルを作成 4.シェイディッドマテリアルをプリミティブオブジェクトに適用 といったところ。具体的なスクリプトは以下。 // ビットマップマ

    Papervision3Dでビットマップのテクチャにライトを適用する方法 | ClockMaker Blog
  • [PV3D] リボンの実装方法 | ClockMaker Blog

    3Dのリボンを作るときにアプローチの仕方が勉強になったのでメモ。 note.x | [PV3D2.0] attitudeControl 【papervision】方向ベクトルからMatrix回転への変換 « NOTE.haramakoto 行列やクオータニアンを理解した方がスマートだと思うのですが、昔作ったデモが比較的簡単な方法で実装できていたので紹介してみます。 lookAt (対象のオブジェクトを向くように回転するというメソッド)で実現 [PV3D] Ribon Road (6秒くらい待つと走り始めます) そもそもリボンの実装方法としては リボンは無数の平面( Plane )を鎖のようにつなげてできている リボンを配置するベジェ曲線は Tweener の _bezier を使っている で、連続する Plane をどうやって向きをそろえているかというと ダミーのDisplayObject

    [PV3D] リボンの実装方法 | ClockMaker Blog
  • 最速flash研究会をwonderflで | ClockMaker Blog

    wonderflでfolk祭が行われていましたので、私もちびっとやってみました。擬似流体シミュレーションの主旨でFlash Player 9の機能だけで実現するというのが面白いところであるのですが、敢えてFlash Player 10の新機能であるVector型を使うと高速化できるか試してみたのが私のfolkです。 Liquid110000 by Vector | wonderfl build flash online fladdictさんがブログで紹介されているパーティクル25000個というとんでもないデモをみて凄いと思っていたら、wonderflに似たようなデモが上がって来て、気がつくとfolkが5回ほど連なって高速化されていました。 自分だととてもこんなコード書けないのですが、folkしてロジックを確認していると「こうやって実現するんだ」ということが見えてきて面白かったです。 世代を

    最速flash研究会をwonderflで | ClockMaker Blog
  • これからFirefoxを使うビジネスマンのための5つのFirefoxアドオン | ClockMaker Blog

    ここで紹介するのは、営業をやっている私の友人に Firefox を進めたときに一緒に紹介したアドオン(拡張機能)。 Firefox のアドオンというと Web 開発者向けの拡張機能にスポットがあてられがちです。Web の専門家でなくても、普段の仕事をする上ですぐにメリットが感じられる、そんな便利なアドオンを紹介したいと思います。 GooglePreview Google の検索結果画面に、リンク先のプレビューを表示させるアドオン。サイトのプレビューを事前に確認することができるので、探しているサイトをより素早く見つけ出す事ができます。 All-in-One Gestures Firefoxアドオンの代表格の一つ、マウスジェスチャーを使用可能にするアドオン。マウスジェスチャーとはマウスの操作だけで、ブラウザの「戻る」「進む」を実現する便利機能です。 PDF Download ボタン1つで We

    これからFirefoxを使うビジネスマンのための5つのFirefoxアドオン | ClockMaker Blog
  • 40本のハイクオリティーすぎる Wonderfl 投稿作品 | ClockMaker Blog

    今年最大の発明かと思うぐらい、すごいサービス Wonderfl。ブラウザ上からActionScirpt 3.0を書くことで Flash が作れて、そのコードを共有できるという、クリエイターを刺激する画期的なサービスです。 Flasher なブログや Twitter を見ているとデビューしたという方が、ハイクオリティーなコードを投稿されていて毎日見ていて全く飽きません。これから Flash を勉強しようとする人にとっても、他の人が作ったコードが見れる & Folk して作品が投稿できるので、きっかけとしても楽しいはず。なにより、初期投資なしに Flash を学べるので、ぜひチャレンジして欲しいですね! 週末じっくり見て面白いと思った投稿 Flash をジャンル別にまとめてみました。 モーショングラフィック/ビジュアルアート系 Hello World!!! Hello World 2!!! S

    40本のハイクオリティーすぎる Wonderfl 投稿作品 | ClockMaker Blog
  • Progression 向けの拡張トランジション「ClockMaker Effects」 | ClockMaker Project

    ClockMaker Effects とは ClockMaker Effects は Flash でクールなトランジション効果を手軽に作成できる Progression™ 用の拡張機能です。エフェクト内部に3Dライブラリ「Papervision3D」を組み込んでおり、ActionScript を書かなくてもステージにドラッグ&ドロップで設置し設定するだけで簡単に3Dエフェクトが使用できるようになります。 サンプル ご利用にあたって ご使用のブラウザ環境では、サイトが正しく表示できない可能性があります。 以下の注意点を確認し、必要な設定を行った上で再度表示してください。 ブラウザの JavaScript 設定を有効化してください。 最新の Adobe Flash Player をインストールしてください。 ClockMaker Effects を利用した Progression 3 サンプ

    ruedap
    ruedap 2009/02/14
    タイルや3D演出を使ったトランジション効果3つ
  • Flashでやってしまいがちな16個の間違った使い方 | ClockMaker Blog

    Photoshopでやってしまいがちな12個の間違った使い方 – GIGAZINEが面白かったので、Flash版として「Flashでやってしまいがちな16個の間違った使い方」としてまとめてみました。 1.シンボル化しないままトゥイーンを作成している まずは誰でも一度はやったことがあるであろう、シンボル化しないままのトゥイーン作成。ライブラリに「トゥイーン○」という名もなきシンボルが作成され、後で見返したときや他の共同作業者が非常に困ることになります。 2.テキストフィールドに直接リンクURLを設定している getURLやnavigateToURLなんてスクリプトを知らない初心者のころはテキストフィールドにURLをいれてテキストリンクを作っていました。これは演出が作れないので、慣れてくると使うことはないでしょう。 3.文字をボタンに含めたときに後ろにシェイプを敷いていない ボタンを作ったとき

    Flashでやってしまいがちな16個の間違った使い方 | ClockMaker Blog
  • 1