oitake blog

いろいろリンク

おすすめリンク

最近のエントリー

カテゴリー

20101012:コメントとトラックバックを停止したことにより、このサイトはアーカイブとなりました。以降、ご連絡はみもねるのウェブサイトへお願いします。
20100703:新ナマコメ(ナマコメ 2)を公開しました。コメントビューア付きで送信面においてもパワーアップしています。
旧ナマコメは将来的に使用できなくする予定なので、可能な限り新ナマコメをお使いください。
20091127:oitake は みもねる になりました。当ブログは無期限更新停止となります。詳細は最新の記事をご覧ください。

スポンサーサイト

一定期間更新がないため広告を表示しています


2009.12.16 Wednesday | | - | - | -

ラクガキライト:落書きでコミュニケーションするFlash

というわけでラクガキライトの紹介です。

ラクガキライトはみんなで共有する落書き帳のようなFlashです。
落書きの上に落書きが表示されるので、前の人が描いた落書きに感想を付けたり、ツッコミを入れたりできます。落書きを通して会話できたらいいなぁ、と思いつつ作りました。

簡単に扱えるよう、仕様は少な目です。
・.swfファイルをアップロードするだけで使用可能。
・落書きのデータはoitakeのサーバに送信。受信も同様。
・最大100個までの落書きを保存可能。
 100個を超えたら古い落書きから自動的に削除。
・閲覧モードと描画モードを搭載。
 「ラクガキする!」ボタンで切り替え。
・閲覧モードでは古い落書きからフェードイン/フェードアウトしつつ表示。
 ただし、最初に表示されるのは直近の5件。
・左右のマウスドラッグで落書きを1個ずつ表示可能。
・描画モードではマウスドラッグで落書きを描画。
・元に戻す・やり直す・(ローカルに)一時保存・一時復帰・消去・(サーバに)送信、といった機能を搭載。
 全てショートカットで実行可能な上、スペースバーでメニューを非表示可能。
・キャンバス(Flash)のサイズはHTML上で指定可能。
 他にも背景色・前景色・線の幅などを指定可能。
意外に多目でしたね…。

注意点としては、
・.swfファイルのURL、正確にはドメイン名ごとに保存先が用意される。
 例えば「oitake.chicappa.jp」にファイルを置いた場合はoitake用の保存先が用意されますが、「www.sample.com/yourdirectory」などのURLでは「www.sample.com」を利用している全ユーザーにひとつの保存先が用意されます。
・インクが切れると線を引けない。
 サーバ容量の兼ね合いから導入した妥協案です。インクの量は変更できません。
・ごくわずかな線を引いただけの落書きは送信されない。
 誤送信やいたずら防止の対応策です。このあたりもHTMLで変更できます。

最後に設置の仕方ですが、上に描いたとおり簡単です。
下記URLを右クリックメニューからダウンロードして、それをお使いのサーバにアップロードするだけ。あとは.swfファイルを表示するHTMLを書けば完了です。


HTMLの記述例は続きからどうぞ。

続きを読む >>

落書きライト:今日はムリ。

今日の更新は無理っぽいので、でっかい落書きライトで遊んでください。
でもすごく動作遅いです。でわでわ。

落書きライト:線の太さを変更する機能を実装


↑右下のアイコンをクリックすると線の太さを変更できます。

予告通り、落書きライトに線の太さを変更する機能を実装しました。今回は上手く行ったヽ(´ー`)ノ

つまづいた点もないので、ActionScript3におけるprototypeの使い方でも紹介します。といっても、oitakeは根本まで理解していないので、上っ面だけの紹介です。

クラス.prototype.メソッド=function(引数:型=初期値,...):クラス
{
    (ここに処理が入る)
    return this;
};

こんな感じです。内部では「this.プロパティ」でプロパティにアクセスできます。別に値を返す必要はありません。
自分で定義したprototypeを呼び出すには、

Object(インスタンス).メソッド(引数,...);

などとします。Objectクラスでキャストする必要があるみたい。ちょっと面倒。

紹介しておいて何ですが、Adobeはprototypeでゴニョゴニョするのを認めない、というようなくだりがリファレンスにありました。どちらにせよ、手堅く普通の関数を定義した方がわかりやすいかもしれませんね。
次はメッセージボックスを実装してみようかな。

落書きライト:カラーパレットを作ってみた


↑色の付いた四角をクリックすると線の色を変えられます。

今日も一昨日も落書きライトです。たぶん明後日も。
落書きライトに線の色を変えるカラーパレットを付けました。全部で6色+白。スペースが許せば他の色も追加するつもりです。

それにしても今回はつまづきました…。
JavaScriptでもつまづいたんですが、ActionScriptでもイベントリスナーの実装でつまづいてしまいました。
どちらも、リスナーの中から登録時に割り振られた値(カラーパレットの番号とか)にどうやってアクセスするか?というところです。それ以前に、どうやって割り振るか?でつまづいたんですが、これはJavaScriptでの経験に助けられ、登録するクラス(X.addEventListenerのX)に新しいプロパティを追加して割り振ればよい、ということはわかりました。それができたら、this.プロパティ名でアクセスして…あれ?できない。なぜかundefinedになってる。何で?(ー"ー;)<これですよ
結局、thisが登録先クラスを指していないこと、それはMouseEventクラス.targetであること、これらに気付くだけでずいぶん時間を割いてしまいました…。すごい肩こった。

明後日は線の太さを変えられるようにしたいんですが、大丈夫だよね?>自分

落書きライト:きれいなボタンを作ってみた


↑ボタンがきれいになりました(当社比)。

落書きライトのボタンをきれいにしてみました。というより、自前のボタンクラスを作ってみた。
前回、SimpleButtonクラスがどうのこうの書きましたが、結局今回も使っていません。ただの四角いボタンであればSimpleButtonクラスを使うべきかもしれませんが、任意の文字列をいっしょに表示しようとすると、ちょっと考えものです。
細かい話、SimpleButtonクラスを一番上に持ってくると、文字列が隠れてしまう、文字列を一番上に持ってくると、SimpleButtonクラスにマウスイベントが届かない、といった具合です。なので、一番下にグラフィックとしてのShapeクラスを、真ん中にTextFieldクラス(文字列。StaticTextクラスの方がいいのかな?)、一番上にマウスイベントを拾うための透明なSpriteクラスを配置しました。SpriteクラスのbuttonModeをtrueにしてマウスカーソルの形状を変わるようにするのも忘れずに。
しかしう〜ん、もっと簡単に作成する方法があると思うんだけど…。

今回も機能的には変わりありませんでしたが、次回は線の色を変えられるような機能を追加する予定です。