中級者向けの書籍になると思います。
が、AS2.0とAS3.0が同時掲載のボク的に「神本」。

AS2.0は、なんとか理解している。けど3.0ってとっつき難いな・・・って方にオススメです。
内容は2.0の方が多いですが、新しい発見満載です。

基本的にMdNは大好きなので、買ってみました。

では、早いとこ更新できるように体制を整えます。楽しみにしてくださっている方、ホント申し訳ない・・・。

最近やたら増えた案件が「FLASHで3D」。
基本的にお断りしているんですが、今年は3Dのご要望が多くステップアップの意味でもお受けしています。

確かに最近ネットでFLASHを検索すると3D(で演出したWEB)が増えているように思います。
WEBは見た目だけではダメなことは分かっていても、中身だけでもダメ。
こういった技術でクライアントの要望にお応えしていかなければ、後はないなぁ・・・と。

しかし問題は多く、渡されるデータが3Dっぽい2Dだったり(隠れている部分に何があるのか分かりません)、一番の問題はボクがZ座標を理解していないところにあるのかな・・・と。

以前、取引先のご好意でCADの勉強をさせていただいたことがあります。
平面図は難なく描けたのですが、奥行が出てくると手が止まるという始末・・・。
平面では建物を斜めから見たものとか描けるのに、「奥行がありますよ」の一言で・・・。無理。

と現在はFLASHの案件で四苦八苦しております。
Actionscriptのコーナーも中途半端で止まっておりますが来月には再開できるかと思います。(予定)
皆様しばらくお待ちください。

ご質問等はメールにて受け付けますので「どうしてもコレが分からないと死んでしまうんだ！」とか「お願い。一緒に飲みに行こう。(女子)」という方はinfo@makurazaki.infoまでメールください。

・・・。

前回の続きの「移動の範囲を制御する」です。

前回と違うのはステージ外に出ると移動が止まるところ。
早速ソースは以下の通り。

onClipEvent (enterFrame) {
	if (Key.isDown(Key.UP)) {
		if (this._y<0) {　//Y座標が0より小さければ
			this._y -= 0;　//移動距離は0
		} else {
			this._y -= 4;
		}
	}
	if (Key.isDown(Key.DOWN)) {
		if (this._y>200) {　//Y座標が200より大きければ
			this._y += 0;　//移動距離は0
		} else {
			this._y += 7;
		}
	}
	if (Key.isDown(Key.LEFT)) {
		if (this._x<0) {　//X座標が0より小さければ
			this._x -= 0;　//移動距離は0
		} else {
			this._x -= 3;
		}
	}
	if (Key.isDown(Key.RIGHT)) {
		if (this._x>400) {　//X座標が400より大きければ
			this._x += 0;　//移動距離は0
		} else {
			this._x += 7;
		}
	}
}

前回のソースをそのまま流用です。
追加した部分は青文字の部分です。
サンプルはステージのサイズが400px*200pxなので、上記のような数値になっています。
elseは勿論、そうじゃなかったらという解釈になります。
以上。

前回の記事を理解していれば、今回の内容も難しくはないと思います。

次回も引き続き、「MCをキーボードで操作する」を発展させていこうと思います。

キーボードのカーソルキーで操作。
※動かない場合はFLASHを一度クリックしてから操作してみてください。

レシピ
まずは、動かしたいものをチカライッパイ描きましょう。
描いたらムービークリップシンボルに変換します。名前は適当に。
インスタンスに以下のスクリプトを記述します。

●ムービークリップアクション
onClipEvent (enterFrame) {　//繰り返し
	if (Key.isDown(Key.UP)) {　//もし↑が押されたら
		this._y -= 4;　//Y座標を-4ずつ移動
	}
	if (Key.isDown(Key.DOWN)) {　//もし↓が押されたら
		this._y += 7;　//Y座標を7ずつ移動
	}
	if (Key.isDown(Key.LEFT)) {　//もし←が押されたら
		this._x -= 3;　//X座標を-3ずつ移動
	}
	if (Key.isDown(Key.RIGHT)) {　//もし→が押されたら
		this._x += 7;　//X座標を7ずつ移動
	}
}

以上

今回、新しく出てきたKey.isDownは以下の通り。

Key.isDown(キーコード);
キーコードは基本的には数値で指定します。
ただしカーソルキーやバックスペース、Enterなどは定数での指定が可能です。

定数：

BackSpace	Key.TAB
Enter	Key.ENTER
Shift	Key.SHIFT
Ctrl	Key.CONTROL
CapsLock	Key.CAPSLOCK
Esc	Key.ESCAPE
スペース	Key.SPACE

などなど

数値：

0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57

などなど

※詳しくはFLASHのヘルプより参照できます。

サンプルのそれぞれのカーソルキーに対する移動距離が違うのは、描いたものが飛行機だったので適当に変えただけです。
上に移動する時は重力があるかな？右に移動する時は前進だから速く移動かな？みたいな感じで。

次回ですが、
このままだとステージ外に出ても見えないところでずーーーーっと移動し続けます。
なのでステージ内だけの移動はどうやったらいいの？
という所を解説していきます。(出来るだけ早めに。)

外観はIE7とほぼ変化ないようですが、1つ気になっているのが「互換性ボタン」。
すでにインストール済みの方のブログ記事等を読んでみると「レンダリングエンジンをIE8からIE7に切り替え」ができるようです。
WEBクリエイターには便利な機能だと思いますが、欲を言えばIE6まで・・・なんて贅沢を言いたくなります。

またWEBページ上のテキストを選択すると表示されるボタン。簡単に検索や翻訳ができるようになっているようです。
これはカスタマイズも簡単にできるようです。

自分で使用していないので、使用感などお伝えできませんがIE7より若干使用感は上がったのかな？と思っています。
今度、時間があったら実際にインストールしてみたいと思います。
そのときに詳しくはレビューします。

Internet Explorer 8ダウンロード

前回の「オブジェクトをドラッグする」の応用。
ミュージックプレイヤーなどでよく見かける、スライダーの作り方をやってみます。

前回と同様にstartDrag()とstopDrag()を使用するわけですが、今回はスライドする範囲があるというところが違います。

まずはレシピ

on(press){　//マウスボタンを押した時
	this.startDrag(false,_root.hani._x,this._y,_root.hani._x+_root.track._width,this._y);　//ドラッグ開始
}
on(release, releaseOutside){　////マウスのボタンを離す、離して領域外に出た時

	this.stopDrag();　//ドラッグ終了
}

スライドする範囲の制限は色々な方法があり、また用途によって使い分けていかなければなりませんが、今回はスライドする範囲を視覚的に見せている白い横長のバーを基準にスクリプトを書いてみました。

手順は、
１、スライドする範囲を指定する横長のバー（今後トラックと呼びます）、実際にスライドするスライダーをステージ上に描きます。
２、どちらもMCシンボルに変換します。
３、トラックには「hani」とインスタンス名をつけておきます。
４、上記のアクションスクリプトをスライダーにMCアクションとして記述します。
以上です。

**解説**
2行目のstartDragの部分。
falseはマウスが押された時の状態でドラッグが始まります。逆にtrueにするとオブジェクトの中心にマウスが固定されてドラッグが始まります。
次に「_root.hani._x,this._y,_root.hani._x+_root.track._width,this._y」はインスタンス名haniの横幅を取得し、それを移動範囲にしています。
もう少し噛み砕くと
startDrag(false,ドラッグ範囲のX座標（左端）,Y座標（左端）,ドラッグ範囲X座標（右端）,Y座標（右端）)と指定してあげれば良いということです。
もちろん座標で指定しても可能です。

startDrag(false,10,0,200,0);

とするとOKです。

座標ではなくトラックで範囲を指定する利点は、スライドする範囲をカンタンに変更できたり、トラックを配置する時に座標とトラックの位置を合わせつける手間を省くところにあります。

と言うわけで、次回からはちょっと形あるものを創ってみたいと思います。お楽しみに。

<?xml version="1.0" encoding="utf-8"?>

上記のように記述するわけですが、これが実際必要なのか？
結論から言いますと必要です。

勿論、XHTMLで記述の際の場合です。（HTMLで記述の際は不必要）
TransitionalだろうがStrictだろうが、結論は必要です。

では、なぜ宣言しないサイトが多いのか？（シゴトで製作場合はボクも宣言しませんが、このサイトは宣言しています）
理由はカンタン。
IE6では互換モードで表示されてしまう。（IE6のバグ）
文字コードがUTF-8やUTF-16の場合は省略できるから。
大きな理由はこの2つだと思っています。

と言う訳で、ボクなりの結論。
IE6で互換モードになってしまうから宣言せずに文字コードをUTF-8で記述してしまえ。

これが正解ではありません。
もちろんIE6での回避方法もありますが、面倒だと言うことです。

今後はIE6のシェアが限りなくゼロに近づき、IE7、IE8でバグ修正されることを祈りつつ「新年あけましておめでとうございます」

IronMyers

YUI Grids CSSの配布サイトです。
ブラウザごとに違う、要素をリセットし、レイアウトまで組んだテンプレートがダウンロードできます。
レイアウトの種類は豊富で、さまざまなWEBサイトで使えそう。

WEBをデザインする際に、多くのクリエイターは以前作成したコードをコピーして使用している方も多いと思う。
そんな時間のないクリエイターにオススメです。

いくつかダウンロードしてみましたが、問題なく普通に使えそうだし、分割してMTタグ入れればMTのテンプレートとしても使えそうです。

そろそろ、このサイトもデザイン変更したいと思っていたので、IronMyersを使用してみようかと思います。

では。

html(xhtml)とはWEBページを作成する言語で、W3Cが作成している規格のこと。
そんな有触れた説明はどうでもいいわけ。

仕事上、いろんな言語を書いたり、見たりしていますが、このhtml(xhtml)って言語がイチバンの曲者だと思うわけです。
その他のWEBページを作成する言語、例えばperlだとかphpだとか、身近なところでjavascriptなんかもそうだけど、間違った記述をするとエラーを返してくれる利口な言語です。
しかし、html(xhtml)はちょっとやそっと間違っても、それなりの結果を返してくる、実はバカな言語です。
例えば

<p>明日の天気は？</p>
<p>晴れ</p>

と

<p>明日の天気は？<br /><br />晴れ</p>

は、ほぼ同じ表示になります。
そう。同じ表示になるだけであって、html(xhtml)の書き方としてはNGです。
当然、前者が正しいわけです。

本来ならば、後者はエラーとして返さなければならない記述です。

エラーを返せない言語html(xhtml)。
実はすごく奥が深い言語だということですね。

と言ってもASであーじゃこーじゃやるわけではありません。
完全にチカラワザです。
分かりやすく言うと、フレームアニメーションです。

1.適当な大きさのステージを用意し、テキストを書きます。
テキストは分解して塗りに変更しておきます。
※フォントはできれば流れるようなフォントがオススメ。文字と文字の繋がりをキレイに見せるためにもね。

2.ひたすら消しゴムツールで後ろから消していきます。
少し消してキーフレームを挿入、少し消してキーフレームを挿入。これを全部消えるまで繰り返します。

3.全部消し終わったらタイムラインを全部選択して、右クリックでフレーム反転を選択。
これで完成です。

コツは、まずフォント選び、それと本当に書いているように見せるために、実際に同じ文字を紙に書いてみると良いかもしれませんね。書くスピードの確認のためにね。

都合よくFLASH上の線や塗りはベクター形式です。
手ごろなフォントがない場合は、それらしいフォントで書いておいて、選択ツールでグリグリやってみるのも1つの手だと思います。
実際、今回サンプルで作ったモノも適当なフォントがなかったので、ない部分を足したり、要らない部分を消したりしています。

もちろん、文字だけじゃなくイラストなどをこの方法で書いていくと、もっと面白いかも。

第1回目は文字を光らせてみましょう。
とりあえずトゥイーンやらは理解しているという前提で進めていきます。

1.FLASHを起動し適当な大きさのステージを用意します。

2.ステージ上に光らせたい文字を書き、分解(Ctrl+B)し塗りに変更しておきましょう。
※光具合が分かりやすいように、フォントは太いものが良いです。

3.レイヤーを2つ追加して、それぞれ名前を上から「マスク」「光」としておきましょう。

4.レイヤー光に塗りグラデーションで四角を描きます。この四角が光になる部分です。
グレーデーションの設定は「白0%→白70%→白0%」に設定しましょう。

5.4で描いた四角をシンボル化しましょう。名前は任意、タイプはMC。

6.5で作成したMCを20フレーム程度使って、画面の左から右へ移動するモーションにします。

7.最初に書いた文字をコピーして、マスクレイヤーに同じ位置にペーストします。
ペーストしたら、レイヤー名マスクのレイヤーの上で右クリックしてマスクの設定をします。

8.背景の色を変更したりして完成です。

※背景の色が白で光の色を白、要するに背景と光の色が同一色だったら、マスクを使う必要はないのですが、もし違う色にしなければならないときのために、マスクを使用します。

だからと言うワケではありませんが、お問い合せのページは外しました。(笑)

挨拶はこれくらいにして本題に入ります。

この度、ご要望の多かったASに拘らないモノを公開することにしました。
要するに普通のアニメーションの創り方を公開します。
しかし、あまり期待しないで下さい。
ASのページを見てもお分かりかと思いますが、説明用の画像を一切使っていません。
でもアニメーションの創り方をご紹介するには、説明用画像は必須かなと。だよね？
と言うことは更新が面倒に。だよね？だよね？

ってことは、更新が今まで以上に遅くなるわけですよ。

そんな感じで、適当に更新して参りますので、あたたかい目で見守ってください。

また、
「こんなものってどうやって創ったらいいの？」とか
「こんなもの創ったんだけど、上手く動かないんだよね・・。」とか
「今日のゴハンは何にしようかしら。」とか
ありましたらinfo[at]makurazaki.infoまでお願いします。8割は無視しますけど。

**準備**
まずはステージ上にドラッグしたモノを配置(描く)します。
それをシンボル化（MC）しましょう。

インスタンスに以下のソースをたっぷりと。

**ソース**

MCアクション
on (press) { //マウスのボタンを押した時
	this.startDrag(); //ドラッグ開始
}
on (release, releaseOutside) { //マウスのボタンを離す、離して領域外に出た時
	stopDrag(); //ドラッグ終了
}

以上。

ポイントというポイントはありませんが、今回はじめて出てきたstartDrag() メソッドとstopDrag()メソッド。これを使うとオブジェクトをドラッグできるというワケです。
では、いつドラッグしていつ終わるのか？とonで指定するわけですね。

日頃、普通に使っているドラッグ。ActionScriptで書くとこんな感じです。

昔、よく見たアレですね。見た目がかっこよくて簡単にと思って作ってみたら、時が経つのは怖いもので、あの日見たアノかっこいいものが今では、そうでもなかったり。

**準備**
まずはステージ上にX座標用とY座標用の直線を引きます。
同時に、「X座標○○○」と座標を表示させるためのテキストボックス(ダイナミックテキスト)をそれぞれX座標用、Y座標用の2つを作成。
このテキストボックスには変数「x」「y」を設定しておきます。

X座標用の縦線とテキストボックスを選択し、シンボル化（MC）しておきましょう。名前は任意で。
同様にY座標用もシンボル化（MC）しておきます。

これで準備完了。

**ソース**

X座標用のインスタンスへのMCアクション
onClipEvent (enterFrame) {
	this._x=_root._xmouse; //このインスタンスのX座標はマウスのX座標に
	x="X座標　"+_root._xmouse; //テキストボックス(変数x)にマウスのX座標を代入
	updateAfterEvent(); 
}

Y座標用のインスタンスへのMCアクション
onClipEvent (enterFrame) {
	this._y=_root._ymouse;
	y="Y座標　"+_root._ymouse;
	updateAfterEvent();
}

以上。こんな感じです。

※updateAfterEventについて
前回の009[マウスカスタマイズ]での説明は、ちと分かりにくかったようなのでここでもう一度。
結局、上記の一連の処理は基本、フレームレートに依存します。
しかし、極端にフレームレートが低かったりするとスムーズに動いてくれないので、updateAfterEventを使うわけです。
updateAfterEventは明示的に画面の更新を行うコマンドなので、結果フレームレートは関係なくなるということです。
ちなみにupdateAfterEventを使用せずスムーズに動かすためにはフレームレート30程度は必要です。
PCの個人差はあると思いますが・・・。

前々回のデジタル時計を多少変更してあげるだけで、簡単にできますので、まずはデジタル時計を参照して下さい。

**準備**
まずはステージ上にアナログ時計の形を作ります。
作り方はそれぞれ自由にどうぞ。

同時に短針、長針、秒針をMCで作成します。
※それぞれ中心点は回転の軸になるようにしてください。

AS用のレイヤーを追加し以下のASを記述します。

**ソース**

フレームアクション(1フレーム目)
n_time = new Date();
hours = n_time.getHours();
minutes = n_time.getMinutes();
seconds = n_time.getSeconds();
if (hours>12) { //アナログ時計は12時間制なので13時以降は-12して12時間制に変換
	hours = hours-12;
}
if (hours<1) {　//1時より前は0時になるので12に変換
	hours = 12;
}
hours = hours*30+Math.floor(minutes/2);　//詳細は解説で
minutes = minutes*6+Math.floor(seconds/10);　//詳細は解説で
seconds = seconds*6;　//詳細は解説で

フレームアクション(2フレーム目)
gotoAndPlay(_currentFrame -1);

ムービークリップアクション（短針）
onClipEvent (enterFrame) {
	this._rotation=_parent.hours;
}

ムービークリップアクション（長針）
onClipEvent (enterFrame) { 
	this._rotation=_parent.minutes;
}

ムービークリップアクション（秒針）
onClipEvent (enterFrame) { 
	this._rotation=_parent.soconds;
}

**解説**
フレームアクション(1フレーム目)でのhours、minutes、secondsの定義ですが、それぞれ角度を定義しています。
その角度を、MCアクションでそれぞれの針の角度（_rotation）に代入しています。
これを繰り返し処理。

以上でアナログ時計の完成。