Tipsブログ | The Designium - デザイニウム

02．Processingでセンサー（Phidgets編）
　ブログでもよく紹介しているPhidgets。ProcessingでPhidgetsを使えますよ♪Phidgetsのサイトの「Programming Resources」にはProcessing用のライブラリは置いていませんが、Java版をそのまま使えるようです！導入方法はこのサイトで紹介されていますよ！

03．Processingでセンサー（Gainer編）
　知っている方も多いとは思いますが、GainerにもProcessingライブラリがあります！詳しくはGainer.ccで紹介されていますよ！

04．ProcessingでAR
　「NyARToolkit for proce55ing」でARできます！！やってみると楽しいですよ！ただ現在は1種類の1マーカを検出のみなので認識できるマーカーの数を増やしてもらえるとうれしいですね。

05．メタセコイア形式データを表示するライブラリ
　「MqoViewer Library for Processing」3Dモデリングデータ使いたい！ってときは便利！

06．サウンド制御
　「Sonia」音の逆再生や音の大きさでグラフィックを変えるできるようになります。このライブラリを使用するには「JSyn Plugin」が必要になりますよ！

07．QRコード生成、読み取り
　「Processing QRCode Library」QRコードの生成、読み取りができます。読み取りはかなり近づかないと認識してくれません(^^;)ので生成専門で見た方がいいのかもしれません。

08．Wiiリモコンで制御
　「Wrj4P5」WiiリモコンがProcessingで使えるようになります。楽しい！！

09．Macの中に入っている加速度センサーを使う
　「Processing Sudden Motion Sensor Library」Macの中に入っている加速度センサーを使う。

10．ビデオライブラリ
「JMyron」標準のキャプチャではできないビデオキャプチャができたり、ビデオ解析のためのライブラリです。QuickTimeを使用していないため速いです！！使用方法はこちらのサイトで紹介されてますよ！

link: http://www.thedesignium.com/blog/skill/2105
autor: ミズタニキリン comment: 0件
tags: AR, GAINER, phidgets, Processing, Tips, Wii, wiimote, ミズタニキリンのクレイジーセンサー

弊社で製作しmixiアプリとして公開させていただいている「くくまり」は、主にFlash ActionScript3を用いて開発しました。その中でもゲームの根幹部分を担っている2D物理演算処理については、「Box2D」という物理演算ライブラリを使用しています（実際に使用しているのはBox2DのAS3移植版）。ボールの落下速度、衝突時の跳ね返りといった処理はすべてこのライブラリを使用して実現しています。

以前「Drop Burger」を製作した際もこのライブラリを利用したのですが、今回はより発展的な使い方をしています。開発中は主にネットで解説記事を探して問題解決していましたが、中には参考ドキュメントが見つからず苦労した部分がありましたので、その箇所について解説をしておきたいと思います。同じ事でお悩みの方がいましたらぜひ参考にして下さい。

なおBox2Dの基本的な使い方に関してはこの記事では解説しませんので、これから勉強しようという方は以下の記事を参考にしていただけるとよいと思います。

・「特集：Box2DでActionScript物理プログラミング｜gihyo.jp」

1．生成したオブジェクトに固有の属性（ID）を持たせる

「くままり」では落下するボールに種類があり、それぞれグラフィック、重さ、大きさなどに違いがあります。Box2Dで扱える物体オブジェクト（b2body）には固有IDや属性といった概念がないため、これらを実装するには一工夫必要です。b2bodyオブジェクトには「m_userData」という空のオブジェクトが用意されているので、ここにMovieClipオブジェクトを作成して、そこに必要な属性を入れていきます。

newBall.m_userData = new MovieClip();
newBall.m_userData.id = 'panda';
newBall.m_userData.flag = false;
newBall.m_userData.enable = true;

こんな感じです。m_userDataに作成するオブジェクトのデータ型はSprite型でもString型でも大丈夫ですが、複数の属性を持たせる事を考えるとMovieClip型が一番使いやすいでしょう。もちろんライブラリ内のMCのクラス名を指定してもOKです。くままりではIDの他にXY座標やボールのレベル（リフティング回数）などを持たせています。これをEnterFrameイベント中の処理分岐に使うわけです。

2．反発の強さ（ベクトル）を操作する

「くままり」では自機とボールの衝突の際、マウスクリックで一瞬反発力が強まり、より勢いよくはじき飛ばせるという仕様を取り入れています。通常ではb2Bodyに設定されたdensity（密度）・restitution（反発計数）・friction（摩擦係数）を元に物理運動が再現されます。これらを動的に動かす事も可能ではありますが、物体に初速度を与える処理を実現したい場合はこの方法では難しいため、別の方法をとる必要があります。

b2Bodyクラスには「b2Vec2」というオブジェクトがあり、ここには物体の運動ベクトルが格納されています。この値を操作する事で、物体に初速度を与えたり、勢いを強める、進行方向を変えるといった処理が可能になります。

var vec:b2Vec2 = cbb.m_shape1.m_body.GetLinearVelocity();
if (vec.Length() < minimumBallVec) vec.Multiply(minimumBallVec / vec.Length());
if (vec.Length() > maximumBallVec) vec.Multiply(maximumBallVec / vec.Length());
vec.Multiply(myBallStatus.restitution);
cbb.m_shape2.m_body.SetLinearVelocity(vec);

b2BodyのGetLinearVelocityメソッドでベクトルを受け取り、SetLinearVelocityメソッドで計算し直したベクトルを設定します。b2Vec2クラスに計算に使えるメソッドがいくつか設定されているので、それを使うとよいでしょう。詳しくはソースファイル、ドキュメントを参照下さい。
「くままり」では何度も衝突させているとボールの勢いが弱まって、自機とボールがぶつかってもバウンドしなくなるという問題があったため、ベクトルの大きさに最小値（minimumBallVec）を設ける事で勢いが弱まった状態でも一定量以上バウンドさせるようにしました。またこの例では自機に反発力（myBallStatus.restitution）のパラメーターを設けています。反発力は通常1ですが、マウスをクリックする事で一瞬2に設定され、この間に衝突したボールのベクトルにその計数を乗算しています。この反発力にTweenMaxを使って変化を付け、自然にバウンドするよう調整しました。

3．衝突時に処理が重なる仕様を回避する。

Box2Dでオブジェクト同士の衝突を検出するには「b2world.m_contactList」を使用します。基本的にはEnterFrameイベント中で以下のようなforループを回して使用します。

for (var cbb:b2Contact = world.m_contactList; cbb; cbb = cbb.m_next) {
  trace(cbb.m_shape1.m_body.m_userData.id
      + ' : ' + cbb.m_shape2.m_body.m_userData.id);
}

これで衝突したボールのIDをTraceできます。出力をみれば分かりますが、「A：B」と「B：A」のような順序違いはひとつの衝突として見なされ重複しません。
ただここでひとつ問題が発生します。m_contactListに格納される判定リストは「衝突した瞬間」ではなく「衝突と言っていいくらい近い距離にいる」という基準で取得されているようで、フレーム数が細かいと1度の衝突で2、3回のイベントを重複して実行したり、接触している状態だと延々とイベントを実行し続けてしまったりします。これはBox2Dの仕様上の問題であるため、実装で回避するしかありません。

くままりではこれを「衝突後に数フレームの処理間隔を与える」事で解決しています。

const crashInterval:int = 5;

function enterFrameEvent (e:Event) {
    // 全b2Bodyオブジェクトを走査
    for (var b:b2Body = world.GetBodyList(); b; b = b.GetNext()) {
        // 衝突インターバルをデクリメント
        if (b.GetUserData() is MovieClip && b.GetUserData().crashinterval > 0) {
            b.GetUserData().crashinterval--;
        }
    }

    // 衝突イベント処理
    for (var cbb:b2Contact = world.m_contactList; cbb; cbb = cbb.m_next) {
        // 長ったらしいので代入
        var u_data1:MovieClip = cbb.m_shape1.m_body.m_userData;
        var u_data2:MovieClip = cbb.m_shape2.m_body.m_userData;
        // 衝突オブジェクトの処理間隔が0なら何かする
        if (u_data1.crashinterval <= 0 && u_data2.crashinterval <= 0) {
            // ここで何かする
        }
        // 処理間隔を設定
        u_data1.crashinterval = u_data2.crashinterval = crashInterval;
    }
}

こうする事で衝突処理の重複を回避できました。「くままり」の場合、crashIntervalの値は調整した結果5になりましたが、この値はフレームレートなどによって変わってくると思います。

4．衝突したオブジェクトの種類により処理を分岐する

Box2Dは基本的には『動く物体』と『動かない物体』の2種類でしかオブジェクトを判別しておらず、たとえばブロック崩しのようなゲームでも「壁」と「自機のバー」は同じ『動かない』オブジェクトですが、ボールがそれぞれと衝突した際の反応は異なっています。たとえば衝突音を変化させたい、反発度を変えたい場合などは処理を区別しなくてはなりません。
これはオブジェクトの種類によりIDを割り振って処理分岐を作る事で実現できます。項目1の内容が出来ていればもうほとんど解決なのですが、「くままり」ではそれぞれのオブジェクトに割り振ったIDを判別してSwitch文で分岐処理しています。

for (var cbb:b2Contact = world.m_contactList; cbb; cbb = cbb.m_next){
  if (cbb.m_shape1.m_body.m_userData && cbb.m_shape2.m_body.m_userData) {

    var u_data1:MovieClip = cbb.m_shape1.m_body.m_userData;
    var u_data2:MovieClip = cbb.m_shape2.m_body.m_userData;

    switch (u_data1.id) {
      // 自機との衝突
      case 'myball':
      if (u_data2.crashinterval <= 0) {
        /* ここで何かする */
      }
      break;

      // 床との衝突
      case 'floor':
      if (u_data2.crashinterval <= 0) {
        /* ここで何かする */
      }
      break;

      case 'wleft':
      case 'wright':
      if (u_data2.crashinterval <= 0) {
        /* ここで何かする */
      }
      break;

      case 'border':
      if (u_data2.crashinterval <= 0) {
        /* ここで何かする */
      }
      break;

      // ボール同士の衝突
      default:
      if (u_data2.crashinterval <= 0) {
        /* ここで何かする */
        // 衝突インターバルを設定
        u_data1.crashinterval = u_data2.crashinterval = crashInterval;
      }
      break;
    }
  }
}

以上のコードをEnterFrameイベント中で実行しています。毎フレーム実行する処理なので、負荷に気をつけながらコンパクトなコードに仕上げるのがよいでしょう。

link: http://www.thedesignium.com/blog/skill/1919
autor: sakuma comment: 0件
tags: actionscript, Flash, Tips, webアプリ

待ち受けFlash制作Tips　[年月日取得]

2009.06.12 - スキル, 携帯/Mobile

wevyの待ち受けFlashでもよく使用する年月日取得。今回はその待ち受け制作に特化した3キャリア対応のテンプレートflaファイルを公開します！

初心者の方でもダウンロードすればすぐに使えるようになっており、ファイル内にあるbgレイヤーには現在発売されている携帯の縦横比で一番長い機種にあわせて240[px]×500[px]の背景用シェイプが置いてあります。

プログラムの内容ですが、スクリプト自体は年月日を取得して表示処理をしているだけなので今回は特に解説はしません。

※zip内のflaファイルはFlash8以降でファイルが開けるようにFlash8で制作しました。このflaファイルは商用/非商用に限らず自由に使用していただいて構いません。

>>zipダウンロードする♪

[「calender」ムービークリップ]　1フレーム目
////////////////////////////////////
//////// 情報取得
// 年取得
year = fscommand2(“GetDateYear”);

// 月取得
month= fscommand2(“GetDateMonth”);

// 日取得
day = fscommand2(“GetDateDay”);

// 表示が崩れるので10未満の場合「0」をつける
if(month < 10){
month = “0″ add month;
}

if(day < 10){
day = “0″ add day;
}

link: http://www.thedesignium.com/blog/skill/1567
autor: ミズタニキリン comment: 0件
tags: Flash, Tips, 待ち受けFlash

待ち受けFlash制作Tips　[時間取得(アナログ時計)]

2009.04.21 - スキル, 携帯/Mobile

wevyの待ち受けFlashでもよく使用する時間取得(デジタル時計)。今回はその待ち受け制作に特化した3キャリア対応のテンプレートflaファイルを公開します！

初心者の方でもダウンロードすればすぐに使えるようになっており、ファイル内にあるbgレイヤーには現在発売されている携帯の縦横比で一番長い機種にあわせて240[px]×500[px]の背景用シェイプが置いてあります。

プログラムの内容ですが、どの針を削除しても動けるように時、分、秒のムービークリップ内にスクリプトは書かれています。こういう風に分けていると秒針だけしか使わない場合とか制作してるとあるので何かと便利です！スクリプト自体は針の位置をちょこちょこ計算してローテーションで回転してるだけなので今回は特に解説はしません。

※zip内のflaファイルはFlash8以降でファイルが開けるようにFlash8で制作しました。このflaファイルは商用/非商用に限らず自由に使用していただいて構いません。

>>zipダウンロードする♪

[「hourMc」ムービークリップ]　1フレーム目
////////////////////////////////////
//////// 情報取得
// 時取得
hour = fscommand2(“GetTimeHours”);

// 針の位置指定
setProperty(“”, _rotation, hour*30+minute/2);

[「minuteMc」ムービークリップ]　1フレーム目
////////////////////////////////////
//////// 情報取得
// 分取得
minute = fscommand2(“GetTimeMinutes”);

// 針の位置指定
setProperty(“”, _rotation, minute*6);

[「secondMc」ムービークリップ]　1フレーム目
////////////////////////////////////
//////// 情報取得
// 秒取得
second = fscommand2(“GetTimeSeconds”);

// 針の位置指定
setProperty(“”, _rotation, second*6);

link: http://www.thedesignium.com/blog/skill/1387
autor: ミズタニキリン comment: 0件
tags: Flash, Tips, 待ち受けFlash

Webページで角丸のボックスを作る方法あれこれ

2009.04.16 - スキル

角丸ボックスはWebデザイン、特にブログのデザインなどで良く使われる手法です。デザインの「デフォルト臭さ」を軽減する方法としては非常に効果的で、デザインに柔らかさを出したい時は、とりあえずボックスを角丸にしてみると上手くいく事が多いです。

角丸ボックスを実現するには、通常のコーディングに一手間加える必要があるので、やり方が分からないとちょっと手を出しづらいところがあります。この記事は、角丸ボックスの実現方法を解説することで、角丸導入の敷居を少し下げようという趣旨で書いています。

角丸ブロックを実現する方法としては、画像とCSSを組み合わせる方法、Javascriptのライブラリを使う方法、CSSの拡張要素を使う方法の3種類があります。下記でそれぞれの手法の解説をしていきたいと思います。

画像とCSSで角丸を実現

これは最も古典的な手法です。CSSがメジャーでなかった頃は、テーブルを3×3マスで切って、四隅に角丸画像を配置する、という方法が良く採られましたが、それをそのままCSSで再現するような方針です。つまり、ブロックの角にそれぞれ角丸の画像を配置するようにマークアップ＆CSSコーディングを行います。

CSSで同様の表現をするには、以下のようなマークアップをします。

<div class=”block”>
　 <div class=”block_head”>
　　 <span></span>
　 </div>
　 <div class=”block_body”>
　　ここに本文が入ります。
　 </div>
　 <div class=”block_foot”>
　　 <span></span>
　 </div>
</div>

このマークアップをビジュアルで表すと以下の通りになります。block_head、block_footにはマークアップのみで文字などは入りません。
block_head内を拡大したものが右側ですが、この場合左上の角をblock_head要素の背景画像、右上の角をspan（divでも可）の背景画像として指定します。

CSSファイルの内容は以下のようになります。

.block {
background-color: #背景色;
}
.block_head {
height: 角の大きさ.px;
background: url(’┏.gif’) no-repeat top left;
}
.block_head span {
display: block;
height: 角の大きさ.px;
background: url(’┓.gif’) no-repeat top right;
}
.block_body {
color: #文字色;
}
.block_foot {
height: 角の大きさ.px;
background: url(’┗.gif’) no-repeat bottom left;
}
.block_foot span {
display: block;
height: 角の大きさ.px;
background: url(’┛.gif’) no-repeat bottom right;
}

Javascriptライブラリを使って角丸を実現

前述の画像を用いる角丸ボックスでは、HTMLにイレギュラーなマークアップを施さなければならない欠点があります。コードを汚さずに角丸を実現したい、という方には、Javascriptライブラリを用いた実現法をオススメします。

この方法では、HTMLのマークアップを崩さずとも、ライブラリを読み込んで少しJavascriptを書き加えることで、Webページの望んだ箇所に角丸コーナーを設置することが可能です。こういったライブラリはすでに数多く作られており、検索するといろいろなライブラリが見つかると思いますが、個人的にオススメなのがNifty Corners Cubeというライブラリです。

Link： Nifty Corners Cube

自分もこの手のライブラリはいろいろ試しましたが、このNifty Cornersが一番自由度が高く、且つコードを汚さない角丸ライブラリと思います。このライブラリの特徴は、画像を別途用意せずとも角丸を適用でき、しかも適用箇所を細かく指定できるという事です（左上隅だけ丸める、ということが可能）。
適用箇所・オプションを指定したJavascriptを書く必要がありますが、そのスクリプトを読み込ませることで、HTMLに細工をせずとも自動的に指定のブロックに角丸を適用してくれます。

リンク先にもありますが、具体的には以下のように記述します。これは「id=”box”」を指定したブロックに大きめの角丸を指定する場合の記述です。

<script type=”text/javascript”>
window.onload=function() { Nifty(”div#box”,”big”); }
<script>

これをページのヘッダ内、もしくは外部jsファイルに記述し読み込ませます。
スクリプトのオプションを追加する場合は、オプションを半角スペースで区切ります。以下の例は上記のボックスの上辺（左上と右上）だけに角丸を適用します。

<script type=”text/javascript”>
window.onload=function() { Nifty(”div#box”,”big top”); }
<script>

ブラウザごとのCSSの拡張要素を使って実現

この方法はここで述べている手法の中でも一番簡単で、且つValid（W3C規格に則っている）なのですが、Firefox・Sarafi・Chrome以外のブラウザでは使えないという大きな欠点があるため、なかなか採りづらい方法です。
ただし、厳密に全てのブラウザでの表示の整合性を取る必要が無いケース（個人ブログなど）では、導入が簡単という事もあるので試してみる価値はあると思います。

ブロック要素に拡張CSSを使った角丸指定をする場合、以下のCSSを記述します。

Firefoxの場合：
-moz-border-radius: 角の大きさpx;

Safari（Google Chrome）の場合：
-webkit-border-radius: 角の大きさpx;

両方記述しておけば、Firefox・Safari両方に適用されます。またかなり特殊な手法になりますが、IE系ブラウザでも同様にCSSのみで角丸を指定する方法があるようです。かなり力技なので、個人的にはこれを使うよりは前述のJavascriptを使う方をお勧めしたいです。

このborder-radius要素は次期のCSSの規格であるCSS3では正式に盛り込まれる予定であり（現在はCSS2.1が主流）、CSS3が策定完了し本格的に出回るようになれば、将来的にはIE系ブラウザでもサポートされるようになるでしょう。具体的にはこんなことが出来るようになる予定です。

link: http://www.thedesignium.com/blog/skill/1301
autor: sakuma comment: 0件
tags: javascript, Tips

待ち受けFlash制作Tips　[時間取得(デジタル時計)]

2009.04.16 - スキル, 携帯/Mobile

wevyの待ち受けFlashでもよく使用する時間取得(デジタル時計)。今回はその待ち受け制作に特化した3キャリア対応のテンプレートflaファイルを公開します！

初心者の方でもダウンロードすればすぐに使えるようになっており、ファイル内にあるbgレイヤーには現在(2月21日現在)発売されている携帯の縦横比で一番長い機種にあわせて240[px]×500[px]の背景用シェイプが置いてあります。

プログラムの内容ですが、「time」ムービークリップ内の1フレーム目で時間の情報を取得し、表示上デザインが変にならないように取得時間が10未満の場合「0」をつけるようにしました。

※zip内のflaファイルはFlash8以降でファイルが開けるようにFlash8で制作しました。このflaファイルは商用/非商用に限らず自由に使用していただいて構いません。

>>zipダウンロードする♪

[「time」ムービークリップ内]
——————————1フレーム目ここから—————————–

////////////////////////////////////
//////// 情報取得
// 時取得
hour = fscommand2(“GetTimeHours”);

// 分取得
minute = fscommand2(“GetTimeMinutes”);

// 秒取得
second = fscommand2(“GetTimeSeconds”);

////////////////////////////////////
//////// 表示処理
// 表示が崩れるので10未満の場合「0」をつける
if(hour<10) {
hour = “0″ add hour;
}

if(minute<10) {
minute = “0″ add minute;
}

if(second<10) {
second = “0″ add second;
}

——————————1フレーム目ここまで—————————–

link: http://www.thedesignium.com/blog/skill/1331
autor: ミズタニキリン comment: 0件
tags: Flash, Tips, wevy, 待ち受けFlash

待ち受けFlash制作Tips　[電波情報取得]

2009.04.10 - スキル, 携帯/Mobile

wevyの待ち受けFlashでもよく使用する電波情報取得。今回はその待ち受け制作に特化した3キャリア対応のテンプレートflaファイルを公開します！

前回の電池取得と同様に初心者の方でもダウンロードすればすぐに使えるようになっており、ファイル内にあるbgレイヤーには現在(2月21日現在)発売されている携帯の縦横比で一番長い機種にあわせて240[px]×500[px]の背景用シェイプが置いてあります。

プログラムの内容ですが、1フレーム目で電波の情報を取得して、その後if文で場合分けして電波が1だったら4フレーム目に飛べといったことをしています。

※zip内のflaファイルはFlash8でファイルが開けるようにFlash8で制作しました。このflaファイルは商用/非商用に限らず自由に使用していただいて構いません。

>>zipダウンロードする♪

——————————1フレーム目ここから—————————–

////////////////////////////////////
//////// 情報取得
// 電波最大値情報取得
signalMax = fscommand2(“GetMaxSignalLevel”);

// 電波情報取得
signal = fscommand2(“GetSignalLevel”);

////////////////////////////////////
//////// docomoの場合
if(maxsignal == 3){
  if(signal == -1){
    // 非対応の場合
    gotoAndStop(6);
  }else if(signal == 3){
    // 電波3本の場合
    gotoAndStop(2);
  }else if(signal == 2){
    // 電波2本の場合
    gotoAndStop(3);
  }else if(signal == 1){
    // 電波1本の場合
    gotoAndStop(4);
  }else if(signal == 0){
    // 電波0本の場合
    gotoAndStop(5);
  }else{
    // それ以外の場合はないが一応
    gotoAndStop(5);
  }
}

////////////////////////////////////
//////// auの場合
else if(maxsignal == 4){
  if(signal == -1){
    // 非対応の場合
    gotoAndStop(6);
  }else if(signal == 4){
    // 電波3本の場合
    gotoAndStop(2);
  }else if(signal == 3){
    // 電波2本の場合
    gotoAndStop(3);
  }else if(signal == 2){
    // 電波1本の場合
    gotoAndStop(4);
  }else if(signal == 1){
    // 電波0本の場合
    gotoAndStop(5);
  }else{
    // それ以外の場合はないが一応
    gotoAndStop(5);
  }
}

////////////////////////////////////
//////// softbankの場合
else{
  if(signal == -1){
    // 非対応の場合
    gotoAndStop(6);
  }else if(signal == 100){
    // 電波3本の場合
    gotoAndStop(2);
  }else if(signal == 31){
    // 電波2本の場合
    gotoAndStop(3);
  }else if(signal == 23){
    // 電波1本の場合
    gotoAndStop(4);
  }else if(signal == 0){
    // 電波0本の場合
    gotoAndStop(5);
  }else{
    // それ以外の場合はないが一応
    gotoAndStop(5);
  }
}
——————————1フレーム目ここまで—————————–

link: http://www.thedesignium.com/blog/skill/1254
autor: ミズタニキリン comment: 0件
tags: Flash, Tips, wevy, 待ち受けFlash

待ち受けFlash制作Tips 画像読み込み

2009.04.03 - スキル, 携帯/Mobile

待ち受けFlash制作のときにjpg等の画像を読み込んだりする場合があると思います。携帯で見るとその部分が赤いシェイプに変わるときがありませんか？今回はその現象を回避する方法についてのTipsを書きます。

(1) jpgの場合
　jpgの場合は簡単で画像の解像度を小さくしてやれば普通に表示されるはずです。

(2) psdの場合
　問題なのが透過のpsd。psdを読み込むと初期の設定のままでは最新機種は表示がされますが昔の携帯だと表示がされないんですよね。これを回避する方法です。

(1) まずはpsd画像読み込みをする
(2) ライブラリで読み込んだ画像を選択＞右クリック＞プロパティを選択
(3) プロパティが開くと下画像のようになっていますので圧縮のプルダウンを[写真画像(JPEG)]から[ロンレス(PNG/GIF)]に変更します。これで完了。携帯端末の動作チェックはAdobe Device Central CS4を使うととても便利です。

プロパティ1

link: http://www.thedesignium.com/blog/skill/1237
autor: ミズタニキリン comment: 0件
tags: Flash, Tips, 待ち受けFlash

みんなが大好きjQuery

2009.03.02 - スキル

ということで今回はjavascriptの話しです。タイトルの通りjQueryはGoogleを含む大手企業やWordpressなどにも組み込まれており、探してみれば割とすぐサンプルなどを見つけることが出来ると思います。ですので、僕のところではjQueryではなく、mootoolsというライブラリを使ったサンプルなどを紹介していく予定です。

ちなみにjQueryにはnoConflictという他のライブラリとの共存を前提とした特別な関数があります。今後mootoolsを使って紹介していくサンプルもjQueryに限っては同時に使えるようになっているかもしれません。また他のライブラリを使用している場合でも、コードの書き方が若干変わることになりますが、mootoolsでのサンプルとほぼ同様なことができると思います。では、長くなりましたがそろそろ本題に。

今回紹介するのはjavascriptの実行タイミングを制御するスクリプトです。これはどんなものかというと、例えばですが、「ページトップに戻る」などのボタンに、クリックで画面上部までスクロールする効果を設定したいとします。このとき、実行命令を促すためのイベント（クリックやマウスオーバーなど）をボタンに設定しておきたいのですが、このイベントはボタンが準備できた段階（要素としてアクセスができる段階）にならないと設定することができません。ここでこれを回避するためにonloadやaddEventなどを使って、各要素へアクセスできる段階にしてからイベントを設定していく形を取っていきます。

しかし通常、HTML要素が全て読み込まれていない段階でもブラウザでは随時レンダリングが行われていき、表示がされるようになっています。先ほどの「ページトップに戻る」のボタンも表示されていくわけですが、ここでページ全体の量が多く、読み込みが長かった場合、ボタンへのイベントが設置されていない状態（クリックしても動作しない状態）で表示する形になってしまいます。ユーザーにはボタンとして見えているのに、クリックしても動作しないというのは紛らわしい問題ですので、この実行タイミングを見計らってからユーザーが操作できるようにするのが今回のサンプルです。

▼Javascriptの実行タイミング制御サンプル
» http://www.thedesignium.com/sample/cover/
このサンプルは「読み込み中」などの文字を添えて、788kbの”brgr.png”画像を含む全てのHTMLがレンダリングされるまでページ全体を要素”cover”で覆っておく形になっています。

▼javascriptの流れ
01. windowにイベントを設定
head内でライブラリを含むjsファイルを読み込み、イベントとして”domready”,”load”,”mousewheel”,”resize”の４つを設定していきます。各イベントの実行タイミングは以下の通りです。
• domready
HTML要素が準備されたとき関数”Dsn.dominit()”を実行
• load
HTML要素が読み込まれた後、関数”Dsn.init()”を実行
• mousewheel
マウスホイール時に関数”Dsn.resize()”を呼び出して要素”cover”のサイズを変更
• resize
ブラウザのリサイズ時に関数”Dsn.resize()”を呼び出して要素”cover”のサイズを変更

※イベント”domready”と”load”の違い
“domready”は画像を含まない全てのHTML要素が準備されたとき（操作できる段階になったとき）に実行され、”load”の場合は画像を含む全てのHTML要素がレンダリングされた後に実行されます。

02. 新しい要素”cover”を作成
body内にjavascriptを書いて要素”cover”を作成します。このとき各プロパティ（id名、スタイル、不透明度など）も設定し、全体を覆う形でbody内に設置します。

03. 各イベントを実行
01で設定したイベントを実行していきます。”Dsn.dominit()”では読み込んだ画像”brgr.png”にリンクをつけ、また”Dsn.init()”では”Dsn.coverFunc()”を呼び出し、要素”cover”を不透明度０にしてから要素ごとbody内から取り除いています。

Link: 今回のサンプルデータ.zip

link: http://www.thedesignium.com/blog/skill/1054
autor: oikawa comment: 0件
tags: javascript, mootools, Tips

待ち受けFlash制作Tips　電池情報取得

2009.02.21 - スキル, 携帯/Mobile

wevyの待ち受けFlashでもよく使用する電池情報取得。今回はその待ち受け制作に特化した3キャリア対応のテンプレートflaファイルをを公開します！

初心者の方でもダウンロードすればすぐに使えるようになっており、ファイル内にあるbgレイヤーには現在(2月21日現在)発売されている携帯の縦横比で一番長い機種にあわせて240[px]×500[px]の背景用シェイプが置いてあります。

プログラムの内容ですが、1フレーム目で電池の情報を取得して、その後if文で場合分けして電池が1だったら4フレーム目に飛べといったことをしています。

※zip内のflaファイルはFlash8、Flash CS3、Flash CS4用を用意しました。このflaファイルは商用/非商用に限らず自由に使用していただいて構いません。

>>zipダウンロードする♪

——————————1フレーム目ここから—————————–
////////////////////////////////////
//////// 情報取得
// 電池情報取得
battery = fscommand2(“GetBatteryLevel”);
// 充電状況情報取得
dengen = fscommand2(“GetPowerSource”);

////////////////////////////////////
//////// 充電中の場合
if(dengen == 1){
gotoAndStop(2);
}

////////////////////////////////////
//////// 充電していない場合
else{
    if(battery == -1){
        // 電池情報取得非対応の場合
        gotoAndStop(7);
    }else if(battery == 0){
        // 電池0の場合
        gotoAndStop(3);
    }else if(battery == 1){
        // 電池1の場合
         gotoAndStop(4);
    }else if(battery == 2){
        // 電池2の場合
        gotoAndStop(5);
    }else if(battery == 3){
        // 電池3の場合
        gotoAndStop(6);
    }else{
        // それ以外の場合はないが一応
        gotoAndStop(7);
    }
}
——————————1フレーム目ここまで—————————–

link: http://www.thedesignium.com/blog/skill/885
autor: ミズタニキリン comment: 0件
tags: Flash, Tips, wevy, 待ち受けFlash

tg

:

wevy(38) wevyムービー(22) イベント(21) 待ち受けFlash(16) Flash(15) 地域(12) Tips(11) ミズタニキリンのクレイジーセンサー(7) SNS(6) javascript(6) 会津大学(5) wevy待ち受け特集(5) mixiアプリ(5) WordPress(5) wevy週間ランキング(5) Webデザイン(5) アート(4) 社内教育(4) phidgets(4) センサー講座(4) 会津しこん(4) HTML/CSS(3) actionscript(3) レイアウト(3) webアプリ(3) WEBユーザビリティ(3) 地域、会津(3) GAINER(2) CSR(2) wiimote(2) mootools(2) DSN(F)シリーズ(2) Wii(2) 会津漆器(2) マルチタッチディスプレイ(2) 取材(2) 福島県(1) OpenSocial(1) ハッカソン(1) 音楽(1) 会津若松(1) Movable Type(1) UI(1) AR(1) Processing(1) Joomla(1) Google App Engine(1) ドット絵(1) GAE(1) 会津　データ(1) DROP BURGER(1) 地域性(1) ワークライフバランス(1) 夢(1) API(1) concept(1) AIR(1) 映画(1) 新人研修(1) DSN Player(1)

2010.1.20
:
mixiアプリモバイル作成前に見ておくべき10のまとめLink
suzukimilanpaak：
お返事が遅くなってしまい大変申し訳ございません。ご丁寧な回答...
2009.11.26
:
mixiアプリモバイル作成前に見ておくべき10のまとめLink
ミズタニキリン：
下記(A)、(B)より80～90%の機種はFlash lite 2.0に対応しているという結果になり「mixiのユーザー層にFlash lite...
2009.11.24
:
mixiアプリモバイル作成前に見ておくべき10のまとめLink
suzukimilanpaak：
(2)FlashLite2.0での開発がオススメについて質問させてください。mixi�...
2009.10.10
:
ミズタニキリンのよくある質問Link
ミズタニキリン：
ごめんなさい。ゴーキのミズタニではないです。ゴーキってゴーキ美術研究所のことですよね？はちゃめちゃな妹は確かゴーキに行...
2009.10.6
:
ミズタニキリンのよくある質問Link
キョン：
ひょっとしてひょっとするとゴーキのミズタニさんですか？間違ってたらごめんなさい。

2009.12.10
:
センサー講座 Spe.001 Wiimote WhiteboardLink
お金と知識のない学生が努力と根性で作ったもの
from アナリハ
この前の１０月・１１月に定期的にプレゼンをする事になった。...
2009.10.27
:
11/7 CSS Nite in 新潟開催!Link
ブログで紹介いただきました。
from CSS Nite in NIIGATA
デザイニウムブログ
2009.9.4
:
越後妻有アートトリエンナーレ大地の芸術祭2009（前編）Link
ブログ | The Designium - デザイニウム
from 越後妻有アートトリエンナーレ大地の芸術祭2009（後編）
越後妻有アートトリエンナーレ...
2009.9.4
:
越後妻有アートトリエンナーレ大地の芸術祭2009（後編）Link
ブログ | The Designium - デザイニウム
from 越後妻有アートトリエンナーレ大地の芸術祭2009（前編）
越後妻有アートトリエンナーレ...
2009.6.25
:
若手向けの勉強会企画してみました。Link
[勉強会]みちのくIT会議ってのが福島であったようだ。
from 笑う角でずっこける。
まぁ、タイトルでまとまってしまったけど…。初めて聞く名前だったので情報を集めてみた。...

TheDesignium