サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
www.scratchbrain.net
1 Comment » [...] [HTML5チートシート] Comments (0) Tweet This! [...]
HTML5 <canvas>タグとJavascriptライブラリを使った棒グラフ描画サンプル。 イメージ画像 [グラフ描画サンプルの動作確認はこちら] (more…)
Flashで始めるActionScript3.0（AS3）入門、オブジェクト指向（OOP）の基礎知識、サンプルコードなど カスタムクラスからイベントを送出するようにするにはEventDispatcherクラスを拡張します。 すでにほかのクラスを継承している場合は、IEventDispatcherインターフェイスを使います。 ここではEventDispatcherクラスを使う場合について取り上げています。 CustomDispatcherクラス作成 まず、CustomDispatcherクラスを作成し、イベントの内容を定義します。 このクラスはEventDispatcherクラスを継承して作ります。 DisplayObjectContainerクラスがEventDispatcherクラスを継承しているので、CustomDispatcherクラスはSpriteクラスを継承しても作成可能
クラスの概要 タイプライター表現を簡単に行うためのカスタムクラス（ActionScript3.0用） バージョン 1.0.0 サンプル テキスト入力エリアに文字を入力して、[タイピング開始]ボタンをクリックしてみてください。 ダウンロード（Download source） 基本的な使い方 1.import import net.scratchbrain.text.TypeWriter; 2.オブジェクト生成 var typeWriter:TypeWriter = new TypeWriter(str,time,_textfield,_format); 3.表示リストに追加 addChild(typeWriter); パラメータ word:String タイプライターで表示する文字列 time:int タイピングの間隔（単位はミリ秒） _textField:TextFi
Flashで始めるActionScript3.0（AS3）入門、オブジェクト指向（OOP）の基礎知識、サンプルコードなど インデックス配列とは、値とインデックスを結びつけて格納する配列です。値にアクセスするにはインデックスを使います。 インデックス配列を作成するには２通りの方法があります。 配列の作成 Arrayクラスのコンストラクタを使用する方法 var myArray:Array = new Array(); myArray.push("a"); myArray.push("b"); myArray.push("c"); trace(myArray);//出力 a,b,c 配列リテラルを使用する方法 var myArray:Array = ["A","B","C"]; trace(myArray);//出力 A,B,C インデックスの先頭は0から開始します。インデックスの最大は4
やりたいこと バッジ（インストールボタン）をウェブページに配置し、クリックされるとシームレスインストール（Adobe AirランタイムとAirアプリの同時インストール）が開始するようにしたい。 はまったとこ badge.swfを使ったシームレスインストールを実装しようとしたところ、バッジをクリックしても、Adobe Airのインストーラー画面が現れず、シームレスインストールが動作しなかった（Windowsの話。Macは動作した）。 シームレスインストールの実装サンプルはAdobe AIR SDKをダウンロードすると同梱（[samples]-[badge]フォルダ）されているので、badge.flaを編集してバッジを作る。 badge.swfを使ったシームレスインストール実装は、書籍『Flashで作る AIRアプリケーション レシピブック』を参考に。 シームレスインストールが動作しなか
minimライブラリに標準で用意されている7つのエフェクトと、minimのAudioEffectクラスを拡張して作成されたエフェクト（[File]-[Examples]-[Libraries]-[Minim (Sound)]-[User DefinedEffect]で使用されている『ReverseEffect』）を使ってみた。 表示（音が出ます） サンプルソース
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
Flashで始めるActionScript3.0（AS3）入門、オブジェクト指向（OOP）の基礎知識、サンプルコードなど Flash 9 Public alpha版でActionScript3.0を使って配置したTextFieldへのフォント埋め込みメモ。 Adobe Labs Forumsを見ると、Flash 9 Public alpha版には一部バグがあるようです。なので、以下の内容は次期Flashの正式リリースでは違う箇所も出てくると思うので、注意してください。 フォント埋め込み手順 １.ライブラリに埋め込みたいフォントシンボルを作成 上の画面ではArialを埋め込んでいます。シンボル名は任意の名称にします。 ２.リンケージ設定で『ActionSciptに書き出し』にチェックします。 Flash 8では後でテキストフィールドにフォントを指定する際、リンケージ名を使います。 Flas
WP-PostRatingsは下のように、記事に対して星（5段階）評価してもらうプラグイン。 WP-PostRatingsを導入してるブログ 導入方法 1.プラグイン取得 PHP « Programming « Portfolio | lesterchan.netからダウンロード。 2.解凍して『plugins』フォルダにアップロード 3.プラグインの有効化 WordPressの管理画面にログインし、[プラグイン]で『WP-PostRatings』を有効にする 4.『WP-PostRatings』に各種設定をする [Rating]-[Rating Options]を選択 星以外にもビジュアルがあるので、導入したいものを選択 必要に応じて他のOptionも設定し、『Save Changes』ボタンを押す 5.プラグインを表示したい箇所に次のコードを記述 <?php if(fun
上のような翻訳ツールをブログのサイドバーなどに表示し、閲覧者が国旗を押すと、該当する言語に表示内容を翻訳してくれるプラグイン。 導入方法 1.プラグイン取得 Wordpress Global Translator Plugin | Nothing2Hideからダウンロード。 2.解凍して『plugins』フォルダにアップロード 3.プラグインの有効化 WordPressの管理画面にログインし、[プラグイン]で『Global Translator』を有効にする 4.『Global Translator』に各種設定をする [設定]-[Global Translator]を選択 翻訳エンジン選択 自分のブログが何語で記述されているか選択 翻訳対象にする言語にチェック 表示レイアウトを設定（下の設定は1行に国旗を9個並べる場合） 『Update options』ボタンをクリック
２.[名前]と[フィールド数]を入力 名前はわかりやすくつける（ここではartist_list）。 フィールド数は『アーティストID』『アーティスト名（英語）』『アーティスト名（カナ）』の３つ。 ３.『実行する』ボタンをクリック ４.次の画面が表示されるので各項目を入力 ・フィールド 項目名のこと。 『アーティストID』『アーティスト名（英語）』『アーティスト名（カナ）』に該当する言葉を入力する。 ・フィールドタイプ ・長さ／セット 項目のデータ型と桁数（バイト数）。 MySQLリファレンスマニュアル『データタイプ』を参考にして入力する。 CHAR型４桁と指定した場合、そこに格納した値が４桁未満の時に余ったバイトをスペースで埋める。VARCHAR型は埋めない。 アーティストIDは固定長４桁にしたいので、CHAR型に。アーティスト名は可変長なのでVARCHAR型を指定する。
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所要時間（秒）、
第51回 グラミー賞のCMは、タイポグラフィーでトム・ヨークの顔を表現したものになっていて、最近、Processingばかりやっているせいか、Processingっぽいなあ、なんて思ってしまう。 作品を作るにあたり、トムにいくつかお気に入りのアーティストを挙げてもらったそう。 スコット・ウォーカー、R.E.M.、エルヴィス・コステロ、ビョーク、ライアーズ。 参考記事: Thom Yorke takes part in Grammy promo campaign | Radiohead At Ease（英語） タイポグラフィーはトムが挙げたアーティストにちなんだ言葉（曲名や歌詞？）で構成されていて、ビデオではレディオヘッドの『Reckoner』をBGMに、トムがなにやらしゃべっている。 デヴィッド・ボウイの『Ashes to Ashes』のこととか。 Ashes to ashes - D
クラスがどんなものか知らない人に、まず簡単に『クラス』について。 クラスとは 4色ボールペンを例に考えてみます。 4色ボールペンの芯は中に入っているインクの色は違えど、形状や機能は同じです。 製造工場で生産するときは、きっと芯の形状は同じ生産ラインで作って、インクを入れるときだけ個別の処理を行うことで、合理化をはかっているんじゃないかと思います。 このように同じような意味合いを持つ部品を、ひとつのくくりとすることをプログラムの世界では『クラス』と呼びます。 よくわからなくても、実際にクラスを作ってみると、感覚としてわかると思います。 今回、Processingでクラスを使ったのは、次のサンプル。 画面をクリックするとランダムな色・サイズ・位置の10個の円が切り替わります。 表示 円は色・サイズ・位置は違えど、基本的な形状、機能は同じなので、『クラス』化することが可能です。 クラス
Movable Type 4.2x でテンプレートをいじっていたら、ブログ記事の確認画面でつぎのようなエラーが出る。 Can't call method "entry_based" on an undefined value 原因 ブログ記事のテンプレートで、を使っていたことが原因。 解消 をに変えることで解消。 よかった。 参考記事 MT4の覚え書き - 中川陽平 MovableType4.2 (akiblog)
Flashで始めるActionScript3.0（AS3）入門、オブジェクト指向（OOP）の基礎知識、サンプルコードなど クラス図はクラス自体とクラス同士の関係を表現したものです。 オブジェクト図を抽象的にしていくとクラス図になります。 本来、オブジェクト図、クラス図を作ってからプログラミングをすべきですが、今回は先にflaファイルを作ってから、オブジェクト図、クラス図ではどう表現するのか考えてみます。 今回考えるのはとても単純な例です。 MainクラスからHelloWorldクラスの関数を呼び出し、「Hello World !」とtraceします。 Main.as package { import flash.display.Sprite; public class Main extends Sprite { var _Hello:HelloWorld = new Hell
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
Tweenerのドキュメントにtransitionパラメータの違いが一目で分かるページが追加された！ Tweener Documentation Transition Types 関連記事 scratchbrain blog ver.2 Tweener.addTween（ver.1.25.57）の使い方 scratchbrain blog ver.2 Tween.addTween 注意点（delayに注意） scratchbrain blog ver.2 Tweener.addTweenバージョン1.26.62で追加されたパラメータbaseを使う scratchbrain blog ver.2 Tweener.addCallerメソッドを使ってみる scratchbrain blog ver.2 Tweener.removeTweens検証
『ビジュアライジング・データ』に載っているサンプルを参考に、都道府県の人口データをProcessingで視覚化してみた。 2005年都道府県人口マップ表示 x軸は緯度、y軸は経度、円のサイズは面積、色は人口で決定。 データは、すべてWikipediaから。 日本の緯度経度一覧 - Wikipedia 都道府県の人口一覧 - Wikipedia 都道府県の面積一覧 - Wikipedia 使用したのは2005年の人口データだけど、これが正しいデータだとして、東京周辺はやっぱり人口が集中。 そんな中、山梨県の人口が少なく、全国41位。 東北地方はもっと少ないのかと思っていた。 日本地図と人口をこうやって結びつけて考えたことなかったかも。 比較したくなったので、つづいて1920年の人口データを使ってみる。 1920年都道府県人口マップ表示 全国的に少なくて、茶色や赤いとこはない。 中間の年とかや
表示 [Processing 1.0 入門 #1] mp3ファイル再生と同様、minimライブラリを利用。 波形出力する際の基本的な流れ // minimライブラリをimport import ddf.minim.signals.*; import ddf.minim.*; // 変数定義 AudioPlayer player; Minim minim; // 初期化処理 void setup() { size(512, 400);// キャンバスサイズ minim = new Minim(this); player = minim.loadFile("test.aif", 1024); player.play(); } // メイン処理 void draw() { colorMode(RGB,256);// RGBでカラー指定するようにモード設定 background(0,0,0); s
標準ライブラリのひとつ、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再生だと次のよ
次のページ
このページを最初にブックマークしてみませんか？
『SCRATCHBRAIN.NET』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
