タグ

ブックマーク / blog.mach3.jp (4)

  • FlashCS6+で生成したスプライトシートをjQueryでロードする実験(後編) - Mach3.laBlog

    この記事は賞味期限切れです。(更新から1年が経過しています) 前編に引き続き、FlashCS6のスプライトシートをjQueryで処理するお話です。 処理をライブラリにまとめましたので、ご紹介します。 FlashSprite.js Flashspritejs by mach3 Adobe Flash CS6+ で出力されたスプライトアニメーションシートを再生するjQueryベースのライブラリ。 前回の処理に加えて停止や逆再生、各種設定やイベント発火等の機能を付け足した物です。 使い方は上記URLで概ねわかると思いますが、簡単にご紹介しておきます。 簡単な使い方 1. FlashCS6+でスプライトシートを生成する FlashIDE上で、ステージに配置したアニメーションインスタンスを右クリックし、 コンテキストメニューから「スプライトシートを生成」を選択してダイアログを開きます。 データ形式は

    FlashCS6+で生成したスプライトシートをjQueryでロードする実験(後編) - Mach3.laBlog
  • FlashCS6+で生成したスプライトシートをjQueryでロードする実験(前編) - Mach3.laBlog

    この記事は賞味期限切れです。(更新から1年が経過しています) 結構前の話ではありますが、FlashはCS6から、アニメーションを「スプライトシート」として書き出す機能が実装されています。 これはCreateJS等で簡単に再生出来る様になる便利な機能ですが、 今回はこのスプライトシートをjQueryで再生してみようというお話です。 スプライトシートってなに スプライトシートは、CSSスプライトを利用したアニメーションテクニックです。 アニメーションの全フレームを一つの画像に並べて配置し、 要素の背景画像として埋め込んで background-position を変更していくことで パラパラ漫画のようなアニメーションを再生します。概要はこんな感じ。 一年程前、CS6が出るちょっとだけ前に似たような記事を書いたことがありました。 シンプルなスプライトアニメーションライブラリ 「MovieCrop

    FlashCS6+で生成したスプライトシートをjQueryでロードする実験(前編) - Mach3.laBlog
  • goo.glがAPI公開されたらしいので試してみた - Mach3.laBlog

    この記事は賞味期限切れです。(更新から1年が経過しています) Overview – Google URL Shortener APIGoogle Code Google製の短縮URLサービス「goo.gl」のAPIが公開されたそうなので、 試しに使ってみたメモ。 必要なもの 短縮してみよう 展開してみよう めんどくさいのでクラスにしてみる (おまけ) JavaScriptで展開する 必要なもの APIのURLを控えておく https://www.googleapis.com/urlshortener/v1/url APIキーを取得しておく Google APIs Consoleで 「URL Shortener API」をアクティブにしてAPIキーを控えて来る 今回は、PHP+cURLでやってみることに。 とりあえず持っている情報を変数につっこむ。 $api_url = "https:

    goo.glがAPI公開されたらしいので試してみた - Mach3.laBlog
  • シンプルなスプライトアニメーションライブラリ 「MovieCrop.js」 - Mach3.laBlog

    この記事は賞味期限切れです。(更新から1年が経過しています) CSSスプライトを使用したアニメーションライブラリは既に色々と選択肢がありそうですが、 敢えて今回これを書いてみたのは、ローテクでごくシンプルな物が欲しかったから。 さらに言ってみれば、それらの選択肢をまだ知らなかったから。 MovieCrop.jsについて MovieCrop.js via Github MovieCrop.jsは、CSSのbackground-imageを利用したアニメーションを実装するjQueryプラグインです。 名前から推察されるように、ActionScriptのMovieClipを模して作った…つもりです。 再生/逆再生/停止/巻き戻しが出来ます。 簡単な使い方 まず使用する画像を作成し、ブロック要素の背景にします。 要するにブロック要素のサイズの分だけ背景をズラしていってアニメーションさせる仕組みなの

    シンプルなスプライトアニメーションライブラリ 「MovieCrop.js」 - Mach3.laBlog
  • 1