HTMLサイトを構築する際によく使う機能をまとめて、HTMLに１行追加するだけで以下のような様々な機能を追加できる、ライブラリ「SimpleLib」を公開しました。

accordion	シンプルなアコーディオンナビゲーション
checkAll	ひとつのチェックボックスで複数のチェックボックスを一括選択
fixHeight	複数のブロック要素の高さを揃える
ie6PngFix	Internet Explorer 6でも透過PNGを使えるようにする
ie6PositionFixed	Internet Explorer 6でもCSSの position:fixed を使えるようにする
imgSwap	a要素をクリックして、別のimg要素の画像を切り替える
lightBox	jQuery lightBoxプラグインを読み込む
overlayOthers	指定した要素の子のa要素にロールオーバーすると他のa要素にcssで背景色や背景画像を指定できる半透明の要素をかぶせる
rollOver	マウスオーバー／マウスアウトで画像を切り替える
scroll	スムーススクロール
showIfScroll	指定した要素をスクロールバーが表示されるとき（ドキュメントの高さがウィンドウの高さを超えるとき）だけ表示する
tab	シンプルなタブナビゲーション
textHint	非選択時のテキストボックスにヒントを表示する
trimmedScroll	img要素を含むa要素にロールオーバーすると別の画像をそのimg要素のサイズにトリミングしてスクロールしながら表示する

詳しくはこちらから
http://lab.starryworks.jp/js/simplelib/

以前作ったブロック要素の高さを揃えるのに便利な「fixHeight.js」というJavaScriptを大幅に改良して、アップデートしました。

以前の細かいオプションを廃止し、高さを揃えたい要素たちの親要素に「fixHeight」というクラスを付与すれば、行ごとのグループを自動で判断して高さを揃えてくれます。

jQueryプラグインの形にしたので、$("selector").fixHeight();として呼び出すこともできます。

なお、以前のバージョンと互換性はありませんのでお気をつけください。

fixHeight.jsはSimpleLibのプラグインとしても提供しています。SimpleLibの他のエフェクトやプラグインなどと併用する場合は、SimpleLibに同梱されているものをご利用ください。
http://lab.starryworks.jp/js/simplelib/

先日の大阪てらこで発表しようとして完成できなかったWiiリモコンのテルミンをちゃんと作りました。

機能は以下のとおり。
Aボタンを押し続けてる間、音が出ます。
前後に傾けると音程が変わり、左右に傾けるとリングモジュレーションというエフェクトがかかるようになっています。
Bボタンを押し続けてる間、音程とエフェクトの強さがロックされます。

Wiiリモコンの代わりにマウスで操作できるものも用意しました。
クリックすると音がでます。
マウスを上下に移動すると音程が変わり、左右に移動するとエフェクトのかかり具合が変わります。

ajaxを使ったユーザーインターフェイスを作っていると、状況によってボタンを無効化したり、また有効にしたり、別の動作をさせたりしたいときがよくあります。

そういった場合、イベントをbindしたりunbindしたりを繰り返すのが面倒だし、コードも長くなってしまいます。

こんな問題を解決する為に、一時的にイベントハンドラを無効化して、後から簡単に元に戻せたり、状況に合わせて複数のイベントハンドラのグループを切り替えることができる「EventManager」というプラグインを作りました。

例えば、ajaxでページネーションを行う場合、ナビゲーションの「前へ」のボタンは前のコンテンツがもうないときはマウスオーバーやクリックのイベント処理を一時停止しておき、「次へ」がクリックされて、「前へ」のボタンを有効にする必要が出て来たときに、一時停止しておいたイベント処理を復活させることができます。

I made a plugin to manage events of jQuery. The plugin makes it easy to disable the event handlers temporary and enable them again.

おはようございます

先日ある開発でFlashVarsがnullになる現象に悩まされました。しかも、１０回に１回くらいはnullにならないという現象。これを調べても、参考になる記事があまりにも無く、無いなら書いちゃいます。という事で書きます。

その時の実装は
SWFObject　　　version2.2
SWFAddress　　 version2.3
で構築してましたが、IEでなぜかFlashVarsがnull！！たまに、unnull！！
なんで！？

調べてみても、誰も同じ現象がいなく、なんか変な事ソースに書いちゃった？と調べに調べた結果。

SWFAddressのバージョンを2.4にしたら、すんなり直りました。もう！時間返してって感じです。でも、なんで１０回に１回はnullじゃなかったんだろ。。。

ほんと気まぐれ。

追記：
FlashPlayerのバージョンは９で、症状が出たのはIE6、IE7でIE8は確認していません
おそらくIEすべてで出るかもしれないですね。。。

ちょっと前にBitmapクラスのsmoothingプロパティ（画像を拡大縮小／回転したときにギザギザにならないようにするための設定）がちゃんと動作しないと思って、ちょっと調べてみたけどあんまり情報がなかったのでメモしておきます。

スムージングが効かない例：

var bitmap:Bitmap = new Bitmap();
bitmap.smoothing = true;
bitmap.bitmapData = someBitmapData;

これだとスムージングされない。new Bitmap( null, true );とかやっても同じくうまくいかない。そして、いろいろやってみた結果、smoothingをtrueにするタイミングがbitmapDataをセットした後にするとうまくいくようです。

いける例：

var bitmap:Bitmap = new Bitmap();
bitmap.bitmapData = someBitmapData;
bitmap.smoothing = true;

分かってみたら簡単なことだけど、ドキュメントのsmoothingプロパティのとこに書いてなくてちょっと困った。

ちなみにMac版Flash CS4の場合です。

Air初心者の小心者のtokorooooonです。

Airでフルスクリーンのブラウザを作る機会があり、すごく困った話です。
因に、これは僕の環境下での話なので、同じ状況でも、
動かない場合があるかもしれないので、作業を試すときには自己責任でお願いします。

いつも触ってるactionscriptでアプリーケーションを作れるという事で、
悠々と作り始めたのですが、HTMLLoaderクラスでHTMLを表示するとこまでは
順調で、『へへ〜ん♪』と作っていたのですが、ステージを

StageDisplayState.FULL_SCREEN_INTERACTIVE;

とした瞬間、swfがあった場所が、もぬけの殻に。。。

はじめまして、こんにちは。趣味は朝練のウエニシです。
既にweb上には業界の諸先輩方が書いておられるTipsなどが星の数ほどありますが、
上級者向けに書かれた記事などで内容が省略されていて、初心者や中級者にとってはもう少し詳しく説明されているとありがたいなあと思う事がよくあります。
自分自身もその一人で、調べたい事に関して説明しているサイトをいくつか見て、要約してまとめる事が多いです。ので、
そういったものを自分のメモの中で終わらせるのではなく、自分の備忘録的な意味も込めて、
このブログで公開していきたいと思います。
もちろんその他の事もいろいろ書いて行きたいと思っております！

記念すべきブログ1号目は、弊社の代表の木村が作りました、
複数のブロック要素の高さを、一行ごとに一番高い高さに揃えてくれるJavaScriptライブラリ「fixHeight.js」の事について書きたいと思います。

※このスクリプトは古いバージョンのものです。
大幅に改良された最新版がこちらにあります。

４日の土曜日に、いつも一緒にVJやってるメンバー２人と、ダンサーの人がコラボしてライブパフォーマンスをやっていました。
残念ながら参加できなかったのですが、かっこいいライブ映像をYoutubeに上げてくれてたので紹介します。

ステージ映っているパターンはWiiリモコンでリアルタイムで制御できるFlashで作ったVJツールです。wiiflashを使うと簡単にFlashとWiiリモコンを連携できていろいろできちゃいます。

こんばんは、村井です。
早いもので明日で三周年をむかえます。今後ともどうぞ宜しくお願い致します。

第一弾はリクエストもあったので、後輩のみんなへ「サイト公開前にこれだけは忘れずにやっておきましょう」的なメモ。また思いついたら追記します！

• ファビコン
• 文法・ブラウザ・リンク切れチェック
• パフォーマンスチェック
• アクセス解析
• サイトマップXML

ActionScriptを始めて２ヶ月の『すたーりーわーくす』のやんちゃに見られるけど、 真面目な男子です。

今まで役に立った事や詰まった箇所を、今後ActionScriptを始める人が見て役に立つような事を記載していこうと思ってます！
でも、まだまだ初心者なので、間違っている箇所があれば、ご指摘していただけたら幸いです！


今回はMatrix3Dにおいて、初心者でも理解出来るようなWeb上の資料がなかったので、自分のメモ代わりとしても書いておきます。

今制作中のサイトで少し変わったナビゲーションを実現させるために、ActionScriptからJavaScriptをのFunctionを呼び出したり、逆にJavaScriptからActionScriptのFunctionを呼びだすというような処理を多用するものを作っています。
それを実現するためにはActionScriptのExternalInterfaceを使うのですが、それでかなりハマってネットで検索しても同様の情報がなかったのでメモしておきます。

症状

以下のようなコードで、Flash Playerのバージョン9.0.48以前＋IE 6/7の組み合わせの場合のみ、SWFを配置しただけでJavaScriptエラーが発生してExternalInterfaceの機能が全く動かなくなります。

ActionScript(2.0)例

//TextFieldを作る
var greetingText:TextField = this.createTextField("greeting",this.getNextHighestDepth(),0,0,100,100);

//JavaScriptから呼びだしてTextFieldの内容を変える
function changeText(t:String) {
	greetingText:TextField.text = t;
}
//ActionScriptのFunctionをJavaScriptから呼びだせるように登録
ExternalInterface.addCallback("extChangeText", null, changeText);

概要

ページ内リンクをクリックするとその場所までスムーズにスクロールし、対象のエレメントをチカチカさせるスクリプトです。
今やってる商業施設の仕事でイメージマップを使ったフロアマップから同じページ内にあるショップの一覧への遷移を分かりやすくするために作ったモノで、かなり簡単なスクリプトですが、気に入ったので公開します。

サンプル

• １
• ２
• ３

フラッシャーなら気になっている人も多いと思いますが、Gainerを触ってみました。

FLASHムービーの書き出し「パブリッシュ」

パブリッシュは、FLASHで作ったムービーを実際にある形式に書き出すことをいいます。
【ファイル】>【パブリッシュ設定】

•  Flash Playerのバージョンを選択します。（2007年9月時点のFlash Playerバージョン毎の普及率は、Flash Player 7...99.5%、Flash Player 8...99.0%、Flash Player 9...93.7%）
  よくFLASHがブラウザで見られないということが起こりますが、これはそのバージョンのFlash PlayerがDLされていないことが考えられます。
•  画質の調整を行えます。デフォルト値が80ですが、100にすると最大限に綺麗な画像で出力されます。
•  出力する形式についてチェックをいれます。WEBで公開する場合はswf、htmlにチェックをいれておくと良いでしょう。
•  形式で「HTML」にチェックが入っている場合に、HTMLに関する細かい設定をすることができます。

画像の読み込みと、パスの読み込み

さて、ステージで画像を作る際に、外部からの画像をもってきたり、パスデータを読み込みたい場合が出てくると思います。ここでは、外部からの画像やパスの取り込み方について説明していきます。

画像の読み込み方

FLASHには、jpgやgif、アルファチャンネルつきのPNG画像などが読み込めます。
画像の読み込みの手順としては...

1. 【ファイル】>【読み込み】>【ステージに読み込み】
2. 読み込みたい画像を選択（複数可）し、【読み込み】をクリック
3. ステージ上に画像が読み込まれる

パスデータの読み込み

イラストレーターでつくったパスデータをFLASHに読み込みたい場合の手順は...

1. イラストレータ側でで、【ファイル】>【データ書き出し】
2. フォーマットは「swf」を選択し、名前をつけて保存
3. FLASH側で、【ファイル】>【読み込み】>【ステージに読み込み】で先ほどのswfを読み込む

パスデータを読み込む場合、イラストレータのデータが、ある条件を満たしているとうまくいかないことがあるので、下記に挙げます。

• イラストレータのデータにグラデーションが使用されている
• マスクが使用されている
• パスのポイントが極端に多い

などです。イラストレータのパスデータは極力シンプルなものにし、グラデーション等はFLASH側に読み込んでから、FLASH側で再設定するのが無難です。

手頃なモーションタイポグラフィー

WEBサイトでFLASHを設置するとき、せっかくFLASHで制作するのだからキャッチコピーなどの文字を動かしてみたい...でも具体的にどんな動きにすれば良いのかわからない...

今回は、そんなときに手頃につかえるモーションタイポグラフィーをいくつか紹介します。

マスク機能について

イラストレーターやフォトショップにも「マスク」機能があるように、FLASHにも「マスク」機能があります。FLASHのマスク機能は、イラストレーターやフォトショップのように、マスクの対象が静止画だけではなく、動的なものにもかけることができたり、マスク自身を動的に動かしたりできるので面白いです。

マスク機能の使い方

マスク機能の使い方は、前回のモーションガイドの使い方とほぼ同じで、レイヤーを選択して【タイプ】を「マスク」、「マスクの対象」にそれぞれ設定するだけです。マスクは応用すれば、とても変わった表現が可能になるので覚えておくとよいでしょう。

空を飛ぶ鳥の軌跡を操る

以前は、「ハネを羽ばたかせた鳥が空を飛ぶムービー」の作り方について簡単に説明しました。さて、第1章の最後は「モーションガイド」についてのレクチャーとなります

「モーションガイド」って？
モーションガイドとは、トゥイーンを使用する際に、合わせて使えるトゥイーンの軌跡を設定できる機能です。

前回の、鳥の体をトゥイーンで動かすところを思い浮かべて下さい。この場合、トゥイーンで始点と終点を決め、直線に鳥を飛ばしてもなんだか無機質な感じがしますよね。

では直線ではなく、曲線で動かすとどうでしょう。少しはそれっぽくなりそうです。

シンボルのおさらい

FLASH WORKSHOP 1-05でシンボルについて少し触れましたが、覚えているでしょうか。
●おさらい●
ステージで作った部品をまとめてシンボル化（F8または、【修正】>【シンボルに変換】>名前をつけ、【ムービークリップ】を選択してから【OK】）してライブラリに格納（これは自動的に格納されます）すると、シンボル化したアイテムをライブラリからドラッグ＆ドロップで、大量に複製することが可能でした。

さらに、シンボルのひとつを改造すると、複製されたすべてのシンボルに、改造が適応されました。