graphics.drawGraphicsData のための回転対称による美的表現の模索 2009/06/17 22:03 - AS3.0 先だって学習した、Flash Player 10 から導入された graphics.drawGraphicsData を使って、何か作品っぽいもんができないかと、いろいろ試してみました。 っても、昔作ったことある作品を ActionScript 3.0 でリライトしたもんなんですけどね。 当時は AS 2 で組んだんですが、いやもうめんどくさくてめんどくさくて往生したもんです。 がしかし、ActionScript 3.0 ならスイスイと書けましたよ。ビバ！ AS 3.0！ ま、それはともかく今回の作品の話。 まずは現物の表示から。 graphics.drawGraphicsData のための回転対称による美的表現 - wonderfl build fl

おいおまえら！　BlendMode.INVERT は好きだよな？ 私は大好きです。 New Order という過去に作った SWF ではムダに INVERT 使ってますよ。 東京てら子で発表した時計でも、かなり INVERT を使いました。 「東京てら子 5」に行ってきた（後編）-アナログ時計編-の半円形針以降は全部そう。 あと、ウチのサイトやブログのバナーやファビコンはまさしくソレ。 まぁフォトショップなので INVERT じゃなくて「差の絶対値」や「除外」ですけどね。 わりと近ごろ目を惹いた INVERT といえば、やっぱ「FONTPARK 2.0」の上端にあるメニューでしょ。萌えるぅ！ そんな INVERT 大好きっ子なワタクシですが、実は気に障ることもあるんです。 INVERT の仕様上、異を唱えるのは非常識極まりないことは重々承知しているんですが、頭は納得しても心は納得しない。

塗りは純粋に1対1対応です。 代名詞的な名称のメソッド beginFill() に対応するクラスは GraphicsSolidFill となります。 タイプ数は増えましたが、分かりやすくなって良かったんではないでしょうか。 beginShaderFill() というのは、Flash Player 10 から加わった、シェーダー塗りなるものを指定するメソッドです。 次は線。 線 線を定義するメソッドは lineStyle() と lineGradientStyle() の2種類がありましたが、クラスは GraphicsStroke の一つに統合されました。 じゃあ単色の線とグラデーションの線はどうやって描き分けるんだよ、って話ですが、GraphicsStroke には fill というプロパティがあり、これで線の塗りつぶし状態を指定するそうな。 で、この fill プロパティ には「塗り」の

厳密にいうと lineStyle と GraphicsStroke は単純な対応ではありません。 これについては次回あたりで述べます。 で、このメソッドを置き換えたクラスを Vector 配列に突っ込みます。 Vector 要素として指定するクラスは IGraphicsData。 以下のような感じです。 graphicsData = new Vector.<IGraphicsData>(); graphicsData.push(fill); // GraphicsSolidFill graphicsData.push(stroke); // GraphicsStroke graphicsData.push(path); // GraphicsPath graphicsData.push(endfill);// GraphicsEndFill ところでこの drawGraphicsData

ここでちょっと Graphics クラスのメソッドでの図形描画について復習。 Flash Player 10 より前では以下のような手順でおこなってきました。 graphics.beginFill(0xFF0000, 0.5); graphics.lineStyle(10, 0xFFCC00, 0.25); graphics.moveTo(200, 50); graphics.lineTo(300, 200); graphics.lineTo(200, 350); graphics.lineTo(100, 200); graphics.lineTo(200, 50); graphics.endFill(); これは黄色い線で縁取りされた赤い菱形を描くコードです。 それぞれの命令は以下のような意味になっていることは、皆さま先刻ご承知のとおり。 1行目：塗りの指定と開始 2行目：線の指定 3～

graphics.drawPath の第1引数で指定する線種のコマンドについて、今まで GraphicsPathCommand.LINE_TO の例と GraphicsPathCommand.CURVE_TO の例について見てみました。 ところでこのコマンド、ライブヘルプの当該項目によると何かヘンテコなものがあるじゃあありませんか。 WIDE_LINE_TO と WIDE_MOVE_TO ってヤツ。ワイドって何ねん。太い線なん？ 説明を読むとそれぞれ以下のように書いてあります。 WIDE_LINE_TO 「line to」描画コマンドを指定しますが、1 つではなく 2 つの座標セット（4 つの値）を使用します。このコマンドを使用すると、各コマンドで使用されるデータ値の数を変更することなく、「line to」コマンドと「curve to」コマンドを切り替えられるようになります。このコマンドは

graphics.drawPath メソッドは以下のとおり3つの引数を取ります。 drawPath(commands:Vector.<int>, data:Vector.<Number>, winding:String = "evenOdd"):void それぞれ以下のようなものです。 第1引数：描画する線種を格納した Vector 第2引数：線のアンカーや曲線のコントローラになる座標を格納した Vector 第3引数：今回は関係なさそうなので割愛 第1引数は線種を格納しますが、"lineTo" や "curveTo" といった文字列を格納するのではなく、GraphicsPathCommand クラス で定義されているコマンドを表す整数を格納します。 第2引数に格納される座標というのはは、もちろんX座標、Y座標なわけですが、Point のようなひとまとめにしたものを Vector に格納す

ところで皆さんは "Foundation Actionscript 3.0 Image Effects" は買ったですか？ 私は買ったです。 ざっと目次を見たところ、Image Effects ってタイトルに偽りなし。 BitmapData 操作ばっかりで、今からもう楽しみで楽しみで仕方ありません。 が、第1章だけは "The Drawing API" というタイトルになっており、そのタイトルどおり graphics メソッドについて解説されています。 lineTo とか curveTo とかお馴染みのアレですね。 で、その中には Flash Player 10 から採用されたメソッドの説明があるんです。 たとえば drawTriangles。 このメソッドは発表当初から、三次元表現にしか使い途がないエラく特殊なメソッドを採用したもんだ、てゆーか 3D やる気まんまんだな、と巷の話題を独占

さっそく BetweenAS3 触ってみましたよ。 っても Tweener と入れ替えたレベルのコードしか書いてないけどな！ flash on 2009-5-11 - wonderfl build flash online 正方形のタイルを縦62個×横62個、計3844個ステージ上に敷き詰めて、トランジション風な動きをさせました。 クリックした場所を起点としてさざ波が起きるような感じ。 その昔 Tweener でこれを試したことがあるんですが、25×25=625個のタイルくらいがせいぜいってな感じだったんですよ。 BetweenAS3 はスゴいっすね。3844個のタイルでも実用レベルで動く。 なんて素晴らしい。萌える！ ところでこのプログラムは以下のような構造をしています。 Main └Subject ├Tile ├Tile ├Tile ├…… └Tile Subject と Tile は

かつて当ブログのコメント欄でもお勧めいただいたことのある「Head First デザインパターン」ですが、今まで後述する理由で買っていませんでした。 しかしその後、ネット上で良い評判を何度か目にしたのでいよいよ購入したわけです。 読んでみて「見かけが悪くてかなり損をしているが実はすごい良書」という印象を受けました。 例えるなら CSS が超ヘボで HTML のタグつけも難ありだけど、書いてある内容がとても優れたウェブサイトといった感じでしょうか。 個人的にちょっとどうかなぁと感じた部分から列挙します。 まず、書籍の有益性に疑問を抱かせるレイアウトや内容構成、編集方針なんじゃないでしょうかねぇ。 オブジェクト町のチョコレート工場とかヘンテコなストーリー仕立てで、写真や絵が過多。 そのおちゃらけ具合にはイラっとさせられることもしばしば。 その絵や写真の貼りつけ方も、なんかあちこちに飛んでいるよ

ついに wonderfl にサンプルきたーっ！ やったー待ちに待った正式発表だーっ！　と思ったら、違ってたーっ！ 今回のはアルファ版とのことで、今後、仕様変更が大量におこなわれる可能性大とのこと。 あまり早いうちから手をつけると、覚えたことがまるまるムダになる可能性も高くなるわけで、そうすると習得コストがかなり高くつくことになる。 Papervision3D で痛い目みた私としては、手を出す時期、手をつける内容の見極めには、ちょっと慎重になりますよ。 まぁでも各種チュートリアルが wonderfl に投稿されていてるんで、実際に試す側としては敷居がかなり低くなってありがたいことです。 Tweener に次ぐ Tween エンジンとしていろいろなものが登場してましたよね。 その中でも Tweensy が次世代 Tween エンジンのデファクトになりそうな雰囲気がちょっと漂ったようでしたが、私

TextField を BitmapData に draw するときに余白を断ち切りたい話が急転直下の大団円を迎えました！ 前回は BitmapData の4辺を getPixel32 でスキャンなどという頭悪いにもほどがあるコードをお示ししたわけですが、それに対してコメントで primevision さんから、ある解法のご提示をいただきました。 その方法を使ったら驚くほど簡単にできましたですよ！　primevision さん、ありがとうございました！ 以下、あっけないくらい簡単なコード。 var bmd1:BitmapData = new BitmapData(textWidth, textHeight, true, 0x00000000); bmd1.draw(this, new Matrix(1, 0, 0, 1, -2, -2)); var rectangle:Rectangle

TextField を BitmapData に draw するときに余白を断ち切りたい話の続き。 TextField クラスで取得できるサイズ系プロパティでは余白の計算はできないことを前回見ました。 仕方ないので、やはりここは愚直な手法を採りますかねぇ。 まずは今までどおり、2pixel の縁取りを取り除いた形で TextFiled を BitmapData に draw します。 このときの BitmapData のインスタンスは bmd1 とします。 var bmd1:BitmapData = new BitmapData(fld.width-4, fld.height-4, true, 0x00000000); bmd1.draw(this, new Matrix(1, 0, 0, 1, -2, -2)); 次にこの bmd1 に対して実に泥臭い手間をかけますよ。 bmd1 の天地

TextField を BitmapData に draw するときに余白を断ち切りたい話、前回から続く。 まずは復習の意味もかねて 2pixel の縁取りを裁ち切るにはどうするかについて。 これは簡単ですね。2pixel ってサイズが固定しているんだから。 以下のようにすれば良し。 TextField のインスタンスは fld、BitmapData のインスタンスは bmd とします。 fld.autoSize = TextFieldAutoSize.LEFT; を指定しておくのを忘れずに。 var bmd:BitmapData = new BitmapData(fld.width-4, fld.height-4, true, 0x00000000); bmd.draw(this, new Matrix(1, 0, 0, 1, -2, -2)); このように、断ち切りたいサイズが分かって

TextField には 2pixel 幅の縁取りが存在しますが、それ以外にも余白がありますよね。 今回の議題はその 2pixel の縁取り以上に発生する余白について。 下の図1を見てください。 外側の枠は TextField.border = true で描かれた枠、すなわち TextField.width × TextFiled.height の領域です。 内側の枠が 2pixel の縁取りを差し引いたサイズの枠で、これは TextField.textWidth × TextField.textHeight の領域になります。

最近めっきりご無沙汰ですが、そもそも私のネットにおけるアクティブな活動の始まりは、Flash による実験的な小品の公開だったのです。 ここのページがそうなんですが、もう何かシャッター商店街のような寂れっぷりで涙が出そう。 もっともこのページは何度かリニューアルしてまして、その都度、気に入らない作品とかけっこうデリートしてはいますが。 まぁそれはともかく、こういった小物作り好きな私にとって、wonderfl という環境は創作意欲を刺激する素敵プレイスだったりするわけで、前回の bit.fall のパクリに続いて、ちょっとした小物を、昨日今日と二日にわたって投稿してみましたよ。 今回のコーディングのテーマは bitmapData への描画のさらなる修練。 以前、ドット地球儀でもやりましたが、setPixel や setPixel32 を使った bitmapData への描画がメインテーマで、サ

先だって amatiny blog さんの「ウェブを通じてリアルワールドに出力する　：　Bit.Fall」というエントリーを拝見し、"bit.fall" というメディアアートの存在を知りました。 町のメディアアート好き、モーションタイポ好きとしては実に萌える作品ですね。 博多に行く機会があったら、ぜひともキャナルシティに立ち寄ってみたいものです。 まぁそれはさておき、こういうものを見ちゃうと自分でも作ってみたいと思うのが人情というもの。 てなわけでパクってみました。ツールはもちろん ActionScript 3.0。 で、すんごい久しぶりに wonderfl に投稿したとです。 パクったと言えるレベルには到底達していませんが、ってゆーかリアルワールドの実存としての水が持つパワーに、モニターに投影されたプログラムによる映像が太刀打ちできるわけないんですが、↓のようになりました。

前回からの続き。 「そうめん」はとっても便利なツールなのですが、場合によってはその便利な仕様が逆に不便に感じられる局面に遭遇した、そんな過去の体験談。 むかーし昔、勤め先が開催するイベントに使うからと、子ども向けにパズルやクイズといったフラッシュコンテンツを組むよう業務命令を受けました。使ったツールは確か MX。 そのイベントは年に1回定例的におこなわれていて、去年までずっとその AS2 製のコンテンツを使い続けてきたんですが、改造に次ぐ改造で、ソースは見たくないくらいゴチャゴチャしているし、修正してパブリッシュすると動かなくなる場合もある状態になっていたんですわ。 今後のことを考えると今ここでゼロから ActionScript 3.0 で組み直した方がいいなぁ、と思い、企画通すために、半年くらい前だったかなぁ、モックを作り始めました。 手を着けたのは下のサンプルのようなものです。 ステー

「ビジュアライジング・データ」第3章に触発されて作った都道府県の面積を表示する日本地図の各ソース説明の続き。 Dot を Sprite のサブクラスとした場合、マウスイベントリスナーの付加は MainThread でおこなうことになりますね。 コードは以下のような感じ。 private function addMouseEvent():void { for each (var element:Dot in dots) { event(element, MouseEvent.ROLL_OVER, rollOverHandler); } } private function rollOverHandler(e:MouseEvent):void { display.text = e.target.toStrings(); event(Dot(e.target), MouseEvent.ROLL_

Main.as （ドキュメントクラス） MainTread.as （主スレッドクラス） DotThread.as （表示する円を司るスレッドクラス） Tablize.as （csv を表にするクラス） DataManager.as （各種データを管理するクラス） 今回は上記5クラスのうち、Thread のサブクラスである MainThread と DotThread について。 MainThread.as MainThread は以下の流れでメソッド分割しています。 開始待ち データ表示用のテキストフィールド生成 csv の読み込み csv のテーブル化 テーブルの解析・マージ、DataManager・表示物（DotThread）の生成 MainThread は見たとおり特段の問題はないです。 一つだけ気をつけなくてはならない点は、最後に DotThread を作るところ。 Paralle