サンプルダウンロード
PDRファイル・CSFファイル在中
「lupe.zip」 13.0 KB (13,375 バイト)
しかし,学校というものにここ○○年通ったことがないので,よくはわかりませんが,いくら時代は変わっても,さすがにFlashは夏休みの宿題工作として提出はできないのでしょうね。
ささきち自身は,ほとんど図画工作と理科の観察をしている気持ちでこれを作ったのですが...。
これに限らず,Flashの作成は,美術・工作・算数数学・理科・国語・英語… と,かなりな教科と密接に結びついています。
もしこのページをご覧になっている方が教職関係の方であれば,総合学習の時間などに Suzuka や ParaDraw を取り入れるのも良いかもしれませんよ。ソフト自体はフリーですから,無料で面白い学習環境が整います。
また「Flashクラブ」というなクラブ活動や部活動などで Suzuka や ParaDraw を使っても良いかもしれません。現状の教科の勉強になるのみならず,情報工学やPCでの自己表現など,将来的にも発展・活用できるような勉強になると思います。
虫眼鏡(拡大鏡・ルーペ)作成方法解説
ParaDraw Ver.0.3a4 で作成した絵を,Suzuka Ver.0.7.3.3 で動作させています。
たまに Flash 解説サイトなどで目にする虫めがねです。虫を見るためではなく地図の拡大表示などに利用できるかもしれません。
コード自体は自分自身で考えて作成しましたが,原理についてはささきちは考えていません。
Flash に古くから伝わるもの(ちょっとした手品みたいな手法?)です。
種を明かせば簡単なことで,普通の図(写真でも良いです)と拡大された図とを重ねて用意し,
虫眼鏡が動く座標を元に,拡大された図の見える範囲と拡大された図の座標を変えてやるというだけのことです。
つまり,虫眼鏡が動くと同時に,拡大された図と,それにかけるマスクの位置を変えてやるというしくみです。

スクリプトはメインの フレーム1 のみに記述してます。
// ルーペの位置で拡大図の位置を初期設定
big_mc._x = -lupe_mc._x;
big_mc._y = -lupe_mc._y;
//
// ルーペのドラッグに関して
lupe_mc.onPress = function(){
this.startDrag(false,0,0,Stage.width-50,Stage.height-10);
};
lupe_mc.onRelease = function(){
this.stopDrag();
};
lupe_mc.onReleaseOutside = lupe_mc.onRelease;
//
// マウス監視用インスタンスの作成
mLst = new Object();
// マウスが動いたときの動作を定義
mLst.onMouseMove = function() {
mask_mc._x = lupe_mc._x;
mask_mc._y = lupe_mc._y;
big_mc._x = -lupe_mc._x;
big_mc._y = -lupe_mc._y;
updateAfterEvent();
};
// マウス監視用インスタンスを登録
Mouse.addListener(mLst);
|
たったこれだけです。
このようにシンプルな計算でできるのは,
虫眼鏡入りスプライトの基準点がレンズの中心になうように設定してあることと,マスクのスプライトの基準点もマスクの中央にしてあるということです。
また,拡大された図のスプライトの基準点は(0,0)で,拡大率は2倍にしています。
これで,普通の図の例えば (100,100) にルーペのレンズの中心が来たときは,ルーペの中心に拡大された図スプライトの(200,200)が来るようにすれば良いので簡単な計算式で済みます。
拡大率は何倍でも良いですが,「拡大された図の基準点は左上の(0,0)」,「レンズの中心とマスクの中心に基準点を用意する」ということをしておくと,考えることも少なく,スクリプトもシンプルになるということです。
Flash はスクリプトみたいなものが全てではありません。
どういうしくみや構造を作って動かすかを考えるのがメインで,そのしくみを作る根幹は,やはりスプライトの理解と利用にかかっていると思います。
|