『[HTML5メモ] 追加された文書構造化タグ #1』のつづき。 asideタグ サイドバーなど、メインのコンテンツ部分と明確にわかれる部分をくくる。 navタグ ナビゲーションをくくる。 <nav> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="corp.html">会社概要</a></li> <li><a href="access.html">アクセス</a></li> </ul> </nav> 『[HTML5メモ] 追加された文書構造化タグ #1』と併せると、HTML5だと次のような文書構造になるんだと思う。 HTML5の文書構造化タグを利用したレイアウトイメージ navはheaderに入れなくてもいいかも。 参考 HTML 5のレイアウト要素(1/4):CodeZine HTML 5 ― HTML 4 か
やりたいこと バッジ(インストールボタン)をウェブページに配置し、クリックされるとシームレスインストール(Adobe AirランタイムとAirアプリの同時インストール)が開始するようにしたい。 はまったとこ badge.swfを使ったシームレスインストールを実装しようとしたところ、バッジをクリックしても、Adobe Airのインストーラー画面が現れず、シームレスインストールが動作しなかった(Windowsの話。Macは動作した)。 シームレスインストールの実装サンプルはAdobe AIR SDKをダウンロードすると同梱([samples]-[badge]フォルダ)されているので、badge.flaを編集してバッジを作る。 badge.swfを使ったシームレスインストール実装は、書籍『Flashで作る AIRアプリケーション レシピブック』を参考に。 シームレスインストールが動作しなか
メモ1 次のようにウィンドウの最大サイズを指定しておくと、stage.nativeWindow.maximize();で全画面にならずに済む。 stage.nativeWindow.maxSize = new Point(502, 454); メモ2 ウィンドウリサイズ時、ウィンドウサイズを取得するには、stage.stageWidthではなく、NativeWindowBoundsEventクラスのafterBounds.widthを見るようにする。 stage.nativeWindow.addEventListener(NativeWindowBoundsEvent.RESIZE, resizeHandler); // ボタンの位置をウィンドウサイズに合わせて変更 private function resizetHandler(e:NativeWindowBoundsEvent
SCRATCHBRAIN.NETのトップページにツールチップをつけようと思い、qTip.jsを使用。 qTip.js と qTip.css 取得ページ Tip › Code › Learn Fireworks/Code › qrayg.com 利用手順 1.qTip.js と qTip.css 読み込み <script type="text/javascript" src="js/qTip.js"></script> <link href="css/qTip.css" rel="stylesheet" type="text/css" /> 2.ツールチップで表示したいテキストを<a>タグのtitle属性に書く (ツールチップ内のテキストは<br />タグで改行もできる!) <a href="http://www.scratchbrain.net/blog/ver2/" title
『bulk-loader - Google Code』で公開されているBulkLoaderクラスは、複数のファイルのローディングをまとめて行うときにとても便利なクラスです。 たとえば、example.jpgとexample.xmlをロードすると、そのローディング経過と両方のロードが完了したタイミングのイベントが拾えます。 サンプルソース BulkLoaderの使い方 (サンプルソース見るのが一番てっとりばやいかも) 1.import import br.com.stimuli.loading.BulkLoader; import br.com.stimuli.loading.BulkProgressEvent; 2.BulkLoaderのインスタンス生成 private var loader : BulkLoader ;loader = new BulkLoader("main");
Tweensyで色操作したかったので、パラメータを試せるのようなものを作成。 ColorMatrixFilter利用の流れ 1.import import flash.filters.ColorMatrixFilter; import com.flashdynamix.motion.extras.ColorMatrix; 2.TweensyGroupインスタンス生成 tween = new TweensyGroup(); 3.画像配置 var _img:Bitmap= new Bitmap(new Img(200,160));// ImgはFlashのライブラリで書き出した画像データ addChild(_img); 3.tween実行 tween.to(new ColorMatrixFilter(), new ColorMatrix(_b, _s, _c, _h), 2, nul
minimライブラリに標準で用意されている7つのエフェクトと、minimのAudioEffectクラスを拡張して作成されたエフェクト([File]-[Examples]-[Libraries]-[Minim (Sound)]-[User DefinedEffect]で使用されている『ReverseEffect』)を使ってみた。 表示(音が出ます) サンプルソース エフェクトさせる手順 上のサンプルをもっと簡略化したもの。 // ライブラリをインポート import ddf.minim.*; import ddf.minim.effects.*; // 定義 Minim minim; AudioPlayer player; HighPassSP highPs; void setup(){ // minimインスタンス生成 minim = new Minim(this); // プレーヤ
ボタンをクリックすると色が一瞬変わるだけのサンプル 表示 ソース 次の3つの条件を使うことで、Processingでボタンを作成。 ボタンの上にマウスがあるか マウスがクリックされたか マウスが離されたか ボタンの上にマウスがあるか ボタンの上にマウスがあるかどうかは、mouseX、mouseYを使って判定。 ボタンの上端、下端、左端、右端の座標とマウスの位置を、次のようなif文で比較。 if(mouseX > ボタンのx座標 && mouseX ボタンのy座標 && mouseY マウスがクリックされたか マウスがクリックされると、mousePressed()メソッドが呼ばれる。 mousePressed()メソッドはスケッチのどこをクリックしても呼ばれるので、ボタンの上にあるときだけ反応するようにするには、さっきの「ボタンの上にマウスがあるか」判定と組み合わせる。
どうやら近頃、ポストTweenerとして期待を集めているTweensy。 参考記事 Tweensy トゥイーンライブラリが面白そう(trick7) Tweensyが早いらしい(storage.goodmix) TweensyとSWF Profiler(Relishable Blog) Tweensy Originalを使って、イージングパラメータテスト & コード生成できるようなものを手始めに作っておいた。 パラメータ変化させて『tween開始』を押すと、実行。 次のようなソースが生成されます。 Tweensy.fromTo(testObj,{x:15,y:15}, {x:350, y:250},2,Back.easeIn,0); パラメータは順番に、次のようになります。 Tweenさせるインスタンス、 Tween開始位置、 Tween終了位置、 Tween所要時間(秒)、
クラスがどんなものか知らない人に、まず簡単に『クラス』について。 クラスとは 4色ボールペンを例に考えてみます。 4色ボールペンの芯は中に入っているインクの色は違えど、形状や機能は同じです。 製造工場で生産するときは、きっと芯の形状は同じ生産ラインで作って、インクを入れるときだけ個別の処理を行うことで、合理化をはかっているんじゃないかと思います。 このように同じような意味合いを持つ部品を、ひとつのくくりとすることをプログラムの世界では『クラス』と呼びます。 よくわからなくても、実際にクラスを作ってみると、感覚としてわかると思います。 今回、Processingでクラスを使ったのは、次のサンプル。 画面をクリックするとランダムな色・サイズ・位置の10個の円が切り替わります。 表示 円は色・サイズ・位置は違えど、基本的な形状、機能は同じなので、『クラス』化することが可能です。 クラス
Web Premium をインストールして本格的にFlash CS4。ここのところ、縦書きを使うものを作っていたので、その過程で出てきたことを、ひとつ。 Flash Player 10 になって、ActionScript 3.0でテキスト表示をするには、2つの方法が用意されている(flashx.textLayout系もあるけど)。 1.flash.text系(TextFieldクラス)を使う 2.flash.text.engine系を使う flash.text系はこれまでもあったやつなので最後に少し触れるだけにして、flash.text.engine系の話。 flash.text.engine系は、ただテキストを表示するだけでも結構まどろっこしい。 少しでも単純にするために、縦書きじゃなくて、横書きで考えてみる。 次のようなことをしたかった場合。 TextFieldでいいじゃん、と思
Category Map 表示(要 Flash Player 10) 作ったものの概要 Movable Type からブログのカテゴリーと数を出力して、そのデータをもとにFlashでツリーマップを作成(どのカテゴリーのエントリーが多いか、視覚化) 考え方 ツリーマップは、位置、サイズ、色で表現するので、それぞれで使用する情報を決める。 位置と色は、カテゴリー同士のグループや親和性で決定。 サイズはエントリー数。 おまけ Flash Player 10の縦書きを使ってみた。 縦長のエリアに表示するときは、縦書き。 横長のときは、横書きって感じに。 ツリーマップについてはgihyo.jpの『具体例で学ぶ!情報可視化のテクニック』を参考に。『第3回 ツリーマップによる木構造の可視化(前編)』あたり。 Flash CS4のUIは改良がいろいろされたかいあって、CS3よりたしかにつかい
フォント指定の流れ 1.[Tools]-[Create Font]を選択 2.フォントとサイズを指定して、『OK』 dataフォルダにフォントが書き出される。 3.次のようなソースを記述 // 書き出されたフォントの名前を指定 PFont font = loadFont("AppleCasual-30.vlw"); textFont(font); // フォントの色を指定 fill(0); // 整列を指定 textAlign(CENTER,CENTER); // 文字列、x座標、y座標を指定 text("Hello World",width/2,height/2); 参考 Processing 1.0 APIリファレンス PFont
『ビジュアライジング・データ』に載っているサンプルを参考に、都道府県の人口データをProcessingで視覚化してみた。 2005年都道府県人口マップ表示 x軸は緯度、y軸は経度、円のサイズは面積、色は人口で決定。 データは、すべてWikipediaから。 日本の緯度経度一覧 - Wikipedia 都道府県の人口一覧 - Wikipedia 都道府県の面積一覧 - Wikipedia 使用したのは2005年の人口データだけど、これが正しいデータだとして、東京周辺はやっぱり人口が集中。 そんな中、山梨県の人口が少なく、全国41位。 東北地方はもっと少ないのかと思っていた。 日本地図と人口をこうやって結びつけて考えたことなかったかも。 比較したくなったので、つづいて1920年の人口データを使ってみる。 1920年都道府県人口マップ表示 全国的に少なくて、茶色や赤いとこはない。 中間の年とかや
標準ライブラリのひとつ、minimライブラリを使えば、mp3ファイルの読み込みや波形出力が簡単にできる。 mp3ファイルを再生するだけなら、ソースは6行。 // minimライブラリをimport import ddf.minim.*; // 変数定義 Minim minim; AudioPlayer player; // インスタンス生成 minim = new Minim(this); player = minim.loadFile("test.mp3");// ロード // 再生 player.play(); setup メソッドとdraw メソッド 『Built with Processing』を流し読みしていたら書いてあったんだけど、初期化処理とメインのループ処理をそれぞれsetup メソッドとdraw メソッド内に記述して構造化するのがいいみたい。 今回のmp3再生だと次のよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く