UNIQLO_GRID みたいに「うねうね」揺れる線 - てっく煮ブログ
as既に各所で話題になっている UNIQLO_GRID ですが、ドラッグしたときに線が「うねうね」と揺れる様がステキだったので、マネしてみました。ドラッグして遊んでみてください（表示されない場合はリロードを）。手書き風効果に使えそうですね。揺れ具合など改善の余地はたくさんありそうです。それはそうと、どうやってアルゴリズムを想像したかを記録しておきます。右クリックから拡大して、UNIQLO_GRID の線がベクターであることを確認少ししか動かしていないときは直線として描画されていることを発見曲線になる条件は、移動距離や移動時間ではなく、mouseMove イベントの発生回数ではないかと仮定（実際は違うかも）曲線になった瞬間、途中に通った場所がベジェ曲線の中間点として採用されることを発見試験実装→そこそこそれっぽく動くマウスを早く動かすと、汚いことを発見→マウスの移動距離が既定値を超えると、そ
AS で別ドメインの画像を読み込むときの注意点 - てっく煮ブログ
asActionScript を使って 外部ドメインの画像を読み込むときの注意点を調べてみた。AS3 で調べたけど、AS2 でもセキュリティの機構自体は同じ（だと思う）。読み込み方Loader クラスを使えば外部ドメインの画像をロードできる。 var loader:Loader = new Loader(); var req:URLRequest = new URLRequest("http://www.example.com/sample.gif"); loader.load(req); addChild(loader); 画像形式は PNG、GIF、JPEG のみ。BMP はダメ。アニメーション GIF の場合は１フレーム目しか描画されない。読み込み完了したことを知るためには、contentLoaderInfo プロパティの complete イベントを監視すればよい。ファイルが存在し
Adobe MAX レポート：ドローイングとプログラミングの美しき衝突：The Art of Presstube - てっく煮ブログ
海外アーティストのPVなども手がける James Paterson 氏。歴史子供の頃、NINTENDO（ファミコン）を買って欲しかったが、与えられたのはコンピュータだった17歳(?)で Flash を使って創り始めた 最初の作品：ひどい例 (sex.swf) コマ送りアニメーション 大学２年で大学やめて、Web 会社にアミットピタルとの出会い作品を通してお互いに知っていた実は近くに住んでいた。作品作りのパートナーにスクリプトの開始描いた絵をスキャンした(3000〜4000) 小さな素材をランダムに組み合わせる作品 スケートボードの上に貼り付ける壁の壁面に絵を貼り付けたようなイメージ（壁面の絵がアニメーションする） 色の実験静止画 動くようにした ゆっくりとスクロールする回転しながら浮かび上がってくるアニメーション楽器のようにアニメーションを作る アニメータがライブのようにアニメーションをつ
ActionScript 的超絶技巧発表会に参加してきました - てっく煮ブログ
asTwitter 経由で企画された「ActionScript 的超絶技巧発表会」に参加してきました。日帰りで東京まで行ってきましたが、往復交通費以上に得るものは多かったです。参加条件が「発表する」だったため、ほんとにレベルが高かったです。かなりの自信作を持っていったつもりだったのに色あせてしまいました。ひとまず、勉強会まとめエントリとして投下しておきます。半分感想。HTML/JavaScript から SWF をいじる話(FlashBug) by muraken さんJavaScript 経由で MovieClip を作成したり、パラメータをいじったり、中の情報を覗いたりする。AS2。→関連エントリ作りこんでいけば、Flash 版デバッグ環境としても便利なものになりそう。Flash デバッグ環境って、あんまりいいのないですしね。クロスブラウザな Canvas として公開すればかなりヒット
てっく煮ブログ - ActionScript やるなら入れとけ。rascut 導入と使い方。
asActionScript 3.0 でコマンドライン開発してる人は必携の rascut を導入してみた。Flex 開発や AIR 開発でも使えるよ。rascut は id:secondlife さんによる fcwrap 後継バージョン。ファイル修正から自動的にプレビューまでできたり、trace() の出力をコンソールに出力してくれたり、かなり便利。以前、勝手が分からずにかなり苦労したけど、最近、RubyForge にアップロードされてからは gem 一発で超簡単になったよ。前準備Flex SDK と fcsh を準備しましょう。fcsh にはパスを通しておきましょう。Flex SDK については ActionScript 3.0メモ さんを参照あれ。fcsh については fcsh で Apollo を高速コンパイル あたりを参照あれ。Flex 3.0 SDK には fcsh が付属してる
ベジエ曲線の仕組み (4) - ActionScript 3.0 でベジエ曲線を描く - てっく煮ブログ
as今までは一般的な話だったけど、今回は ActionScript に特化した話をします。ActionScript には２次ベジエ曲線を描く Graphics.curveTo というのがありますが、３次ベジエ曲線を描画するメソッドは用意されていません。既にいろいろな方が３次ベジエ曲線を近似する方法を発表されています。flashrod - AS3でフリーハンドベジェsubtech - PBD - AS3 で三次ベジェ曲線を Graphics.prototype を拡張して実装するFlashゲーム講座＆ASサンプル集【曲線について】 - ３次ベジェ曲線を描画するしかし、このどれもが直線で近似しています。直線じゃなく、２次ベジエで近似したほうが精度よくなるかも！と思って、３次ベジエ曲線を２次ベジエ曲線で近似してみました。緑の線が直線で近似した３次ベジエ曲線です赤い線が２次ベジエ曲線で近似した３次
ベジエ曲線の仕組み (3) - ３次ベジエ曲線 - てっく煮ブログ
asちょっと息切れしてきたのでサンプルプログラムでごまかし。黒い点をドラッグすると、制御点を移動できます。赤いボタンの上にマウスを置くと、１つ目の２次ベジエ曲線を描きます。緑のボタンの上にマウスを置くと、２つ目の２次ベジエ曲線を描きます。青いボタンの上にマウスを置くと、１つ目と２つ目のベジエ曲線の間を描きます。これが３次ベジエ曲線だよ。３次ベジエ曲線といえども、２次ベジエ曲線を２つ書いてその間をとるだけです。簡単ですね！目次ベジエ曲線の仕組み (1) - 昔話ベジエ曲線の仕組み (2) - ２次ベジエ曲線を詳しくベジエ曲線の仕組み (3) - ３次ベジエ曲線ベジエ曲線の仕組み (4) - ActionScript 3.0 でベジエ曲線を描くソースコードソースコードは以下に(270行)。ちょっと凝ったことをすると、ソースコードが長くなるなぁ。 package { import flash.
ベジエ曲線の仕組み (2) - ２次ベジエ曲線を詳しく - てっく煮ブログ
as前回の種明かしをする前に、ベジエ曲線の定義を見てみてみましょう。ベジエ曲線の定義２次ベジエ曲線は３つの制御点から成り立っています。制御点から曲線を求めるには次のようにします。 図1制御点を t : 1 - t (0≦t≦1) に内分する点を結んで直線を引く。（上の図で常時動いている直線になる）この直線を t : 1 - t に結んだ点を求める（上の図の黒い点）。上の図で青い残像になっている部分が２次ベジエ曲線になります。前回の図と比較では、前回の図と比較してみましょう。 図2直感的に「ベジエ曲線だ！」と言いたくなってしまいますが、そう早まってはいけません。この曲線がベジエ曲線から少しでもずれていれば、ベジエ曲線とはいえません。「ベジエ曲線だよ！」と言い切るためには数学の力を借りる必要があります。センター試験の文型数学レベルの内容なので、よかったら読んでみてください。証明１：力技図のよう
ベジエ曲線の仕組み (1) - 昔話 - てっく煮ブログ
asドローソフトなどでもお世話になることが多いベジエ曲線について解説していくシリーズ。小学生のころ、BASIC で本のサンプルを入力して遊んでいたのですが、あまりのきれいさに衝撃を受けたプログラムがありました。それはこんな絵を出力するプログラムでした。左上と左下の点をそれぞれの x 座標、y 座標を少しずつ増やしながら、直線を引いています。いくつもの四角形が端に行くにしたがって変形していくところが、いかにも近未来風の CG に見えました（当時は）。しかも、この絵は直線だけで構成されているのに、カーブして見えるところが不思議でなりませんでした。さて、15年のときを経て、このプログラムを ActionScript で実装してみました。点をドラッグして曲線の変化を楽しんでみてください。前置きが長くなりましたが、実はこのカーブして見える曲線の部分は２次ベジエ曲線になっています。３つの黒い点がベジエ
Flex Internals1 〜MXML 再入門〜 発表資料 - てっく煮ブログ
flexFlex2勉強会第２０回＠大阪工業大学 で発表してきました。発表資料はこちらです。Flex Internals 1 〜MXML 再入門〜ソースコード (156KB)MXML の裏側がどうなっているかを掘り下げています。もっとマニアックに行く予定だったのですが、作っているうちに、結局初心者向けになってしまいました。注目してほしいのは後半に出てくる「インスペクタ」。今年のお正月に作ったまま放置してたものを、この機会に発掘してみました。ソースコードの中にインスペクタのソースも入っているので、興味がある人は見てください。あまり Flex を理解していない時代の作品なので、Flex っぽくないソースになってますが…。第２回はどうしようかと色々悩んだのですが、次回はてら子と共催ということで、レイアウトネタにしてみようかな、と構想中です。以下、スライド作りの苦労話今回は、Flex 勉強会というこ
JS や AS で長い関数をリファクタリングする１手法 - てっく煮ブログ
200行ぐらいある関数を、分かりやすく書きなおそう、というお話。お題はこんなJavaScript。あとで、軽く ActionScript 3.0 も出てくるよ。 function fly() { // 初期化処理 var init:Boolean = false; // 50行ぐらい初期化処理 // うまくいったら init が true になる // 実行 if(init) { var succeeded = false; // 100行ぐらい実行 } // 終了処理 // 30行ぐらい終了処理 } 構造化プログラミングについて知ってる人なら、きっとこうする。 function fly() { if(startFly()) { doFly(); } endFly(); } 構造がたいそうすっきりした。問題は、startFly()・doFly()・endFly() をどこに記述するか。fl
Google Gears の使い道 - てっく煮ブログ
Google Gears (BETA) が発表されました。Google Gears はウェブサービスにオフライン機能を付け加えやすくするためのフレームワークです。フレームワークが提供するのは次の３つの機能です。LocalServerオフラインになったときにも HTML や JavaScript、CSS にアクセスできるようにする。ブラウザのキャッシュ（一時ファイル）を強化したイメージ。Databaseオフライン時に行った動作を記録しておく。SQLite ベース。ブラウザの Cookie を大容量化したイメージ。WorkerPoolCPU を消費する機能をバックグラウンドで実施する機能。setTimeout で無理やり細切れに実行していた部分を任せることができる。スレッド機能とも考えられる。開発者は、これら３つの機能を駆使して、オフライン機能を実装することになります。ありがちな実装パターンは
てっく煮ブログ - すごく楽しかった Flash 談義のログをまとめてみたよ
twitter, asTwitter には Flash 界のブロガーさんが続々参入しているのですが、9日の 20:30 ごろから突発的に Flash 談義が始まり、２〜３時間ほど盛り上がっていました。この内容があまりに素敵だったので、勝手にまとめちゃいました。みんな、それぞれ問題意識や思いを持っていて、それが伝わってきてドキドキしてきます。ちょっと話はそれますが、JavaScript の面白いところって、Unix の人も、Mac の人も、Windows の人も、平等に議論できるところにあると思うんですよ。今まで、それぞれの分野でやってた「スゴイ人」が、共通の話題を持って交流できる場、それが JavaScript なんです。で、Flash になると、今度は OS の縛りがないどころか、開発者だけじゃなくてデザイナーさんとも議論や意見交換できちゃう。この世界の広がりっぷりは只者じゃない。すごく
JavaScript 用デバッグコンソール "IEerBug" [tech.nitoyon.com]
IEerBug は Internet Explorer 6.0 と FireFox 1.5 で動く JavaScript 用のデバッグ コンソールです。 FireBug と同じ console.log()、console.debug() などの関数が使えるようになるため、FireFox と IE の両方でデバッグする場合に便利です。コンソールに出力したオブジェクトを、DOM インスペクタを利用して解析することも可能です。 使い方 ieerbug.zip をダウンロードし、中身をアプリケーションのディレクトリに配置します。IEerBug 用のディレクトリを作成して、その中に配置しても問題ありません。 HTML の中で次のようにして ieerbug.js を読み込みます。
![JavaScript 用デバッグコンソール "IEerBug" [tech.nitoyon.com]](https://cdn-ak-scissors.b.st-hatena.com/image/square/95abde13f7ed41248843e654a2f2ddcde8983db4/height=288;version=1;width=512/http%3A%2F%2Ftech.nitoyon.com%2Fapple-touch-icon-114x114.png){kind=icon}
Google Maps で鈴鹿サーキット試走
Google Maps API を利用した便利なサービスが数々発表されているけど、別に遊びのために活用してもいいよね。 そんな思いから作ってみた、レーシングゲームです。 地図データを元に走るので、ゲーム史上いまだかつてないコースの再現性があります。 ただ、作者に車の知識があまりないため、車の走行に関してはかなりいい加減ですがご容赦ください。一応、ゲームバランスは調節したつもりです。 推奨環境 以下の環境で動作チェックを行っています。 Windows 版 Internet Explorer 6.0 (JavaScript有効) Windows 版 Firefox 1.0 (JavaScript有効) 遊び方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
『googlemapでドラクエ』でドラクエ 公開 - てっく煮ブログ