| Name |
ゆっけ
|
| Date |
2005年04月01日 (金) 13時46分 |
| Message |
はじめまして。憲ちゃんさんのflashさばき(?)に常々、関心させられています。今回、投稿したのは、外部JPGを画像サイズを問わず一定の大きさでスクロールしたいのですが、なかなかうまくいかなく困っております。知恵を貸していただけないでしょうか・・・。こんな感じのが作りたいです。↓
http://www.lucky-tv.net/LOOPDE/LOOP10DE.html宜しくお願いします。 |
Response
01
|
| 2005年04月01日
(金) 18時05分＞ 憲ちゃん
|
|
はじめまして、ゆっけさん♪
ご紹介のサイトを拝見してきましたが・・・
お遊びなら、おもしろい仕組みですが、写真愛好家にとっては重大な欠点があります（笑）
元になる画像の大きさがどんな場合でも、
MCに読み込んだ時点で一定の大きさに縮小（場合によっては拡大）するということは、
当該サイトのサンプルのように簡単な文字の場合は目立ちませんが、
サムネイル写真がグチャとつぶれたようになったり（拡大はブツブツが目立ったり）します。
そして縦横比率が異なれば、歪みます。
※サンプル集の「No.245画像の拡大」のような感じです。
それであまり乗り気がしないのですが(^^;
MCに読み込んだJPEGファイルを一定の大きさにする方法は・・
読み込むMCのクリップアクションで。。
onClipEvent (data) {
this._width = 240；
this._height = 180；
}
と記載しておくと、どんな大きさの写真を読み込んでも指定した大きさになります。
そして、このMCと指定したサイズと同じ大きさの「透明ボタン」を用意しておいて、
これをセットにしてひとつのMCに入れます。
サンプルでは、Flashムービーの下に「IFRAME」を使って、
そこに別途HTMLファイルに原画のJPEGファイルを埋め込んだものを表示するようになっていますから、
ボタンがクリックされたら「getURL」で、該当のHTMLファイル名と、IFRAMEに付けたフレーム名を
指定して表示させます。
ループさせる場合で、写真の枚数が決まっていないときは、
このボタンとセットになったMCをライブラリから「attachMovie」で、
ループ用のMCに順番に並べていくことになると思います。
このような考え方で一度挑戦してみてください(*^.^*)
|
|
Response
02
|
| 2005年04月01日
(金) 18時33分＞ ゆっけ
|
|
憲ちゃんさん、お早い返事ありがとうございます。なるほど歪んだり、荒くなるのは困りますね。(>
<)実は、どんな大きさでも崩れることなく縮小は出来ました。↓
myListener.onLoadInit = function (target_mc){
target_mc._x=scroll_mc._x; //trace(target_mc);
target_mc._y=scroll_mc._y;
//縮小前の画像のサイズ
var oldW=target_mc._width;
var oldH=target_mc._height;
//
var psX=target_mc._x;
var psY=target_mc._y;
//出力
trace("old: "+ oldW + "+" + oldH);
trace("old ps" + psX + "," + psY);
//画像サイズ
if(target_mc._width>82 && oldW>oldH)
{ newW=target_mc._width=82;
//var newH=target_mc._height;
target_mc._height=(oldH*newW)/oldW;
distance = (82-target_mc._height)/2;
distance2 = (82-target_mc._width)/2;
target_mc._y=psY+distance-10;
target_mc._x = psX + distance2;
}
else if(target_mc._height>62 && oldW<oldH)
{ newH=target_mc._height=62;
target_mc._width=(oldW*newH)/oldH;
distance = (62-target_mc._height)/2;
distance2 = (62-target_mc._width)/2;
target_mc._y=psY+distance;
target_mc._x = psX + distance2;
}
else if(oldW=oldH)
{
if(target_mc._width>62 && target_mc._height>62)
{
newW=target_mc._width=62;
target_mc._height=(oldH*newW)/oldW;
distance = (62-target_mc._height)/2;
distance2 = (62-target_mc._width)/2;
target_mc._y=psY+distance;
target_mc._x = psX + distance2;
}
if(target_mc._width<62 && target_mc._height<62)
{
distance = (62-target_mc._height)/2;
distance2 = (62-target_mc._width)/2;
target_mc._y=psY+distance;
target_mc._x = psX + distance2 ;
}
}
}
my_clip.addListener(myListener);
恥ずかしいのですが、読み込んだ画像をスクロールすることができないのです。汗）
簡単なことだと思いますが、指導の方を宜しくお願いします。m(_ _)m
|
|
Response
03
|
| 2005年04月03日
(日) 00時34分＞ 憲ちゃん
|
|
このスクリプトは縦横比率が同じになるように工夫されたものでしょうか？
しかし、同じ比率であったとしてもビットマップ画像の拡大縮小は、
あまり好ましいことではありません。
それにサムネイルは一度に十数枚のファイルを読み込むのですから、
１枚あたりの容量をできるだけ抑えようとするものですが、
20～30KBあるような原画をサムネイル代わりに読み込むなんて・・・とても耐えられないです（笑）
それはそれとして、外部JPEGのスクロールですが、
下準備として・・・メニューバー「挿入」→「新規シンボル」で、
名前を「picMC」、タイプを「ムービークリップ」として「OK」とすると、
白紙の「picMC」シンボル編集画面になります。
そこに、サムネイル写真の大きさで（サンプルは、ゆっけさんに倣って「82×62」）、
ダミーとして四角塗図形を左上が基準点になるよう描き、それをさらに「シンボルに変換」で、
名前を「読込用MC」、タイプを「ムービークリップ」、基準点を「左上」に設定して「OK」。
インスタンス名を”mc”としておきます。
以下がその編集画面です。
「読込用MC」以外に、ボタンやそれに連動するオブジェクトは、
ここでレイヤーを追加して適宜作成してください。（説明は省略します）
シーン編集画面に戻って、「ライブラリ」にある「picMC」の名前を右クリック、
右クリックメニューの「リンケージ」をクリックして「リンケージプロパティ」で、
「アクションスクリプトに書き出し」をチェック、自動的に「最初のフレームに書き出し」にも
チェックが入ります。そして「識別名」に”pic”と記載して「OK」。
これで「ライブラリ」にある”pic”という識別名のシンボルを、「attachMovie」を使って、
タイムライン上にインスタンスとして生成（作り出す）することができるようになります。
この「picMC(識別名：”pic”)」はサムネイルひとつ分のMCですから、
これを並べてスクロールさせるためのMCが必要です。
サンプルは見える部分については横に５個分としましたので、とりあえずこれもダミー図形ですが、
「410×62」の四角塗図形を描き、左上を基準点とする「ムービークリップ」に変換。
名前を「スクロールMC」としています。
これをいきなりシーン上に配置しても構わないのですが、
それだと座標計算の原点がムービーの左上になってややこしくなるので、計算を簡単にするために
これをさらに、左上を基準点とする「基準MC」という名前の「ムービークリップ」に変換して、
その中に包み込みます。それが以下の編集画面。
「スクロールMC」をステージでコピーしてから、そのレイヤーの上にレイヤーを追加し、
そこに同じ位置にペーストして、全く同じものを重ねて配置します。
上のMCのインスタンス名を”mask”として、レイヤーを「マスクレイヤー」にします。
これでこの範囲内のサムネイルだけが表示されます。
マスク図形のMCにインスタンス名を付けたのは、この範囲にマウスが乗ったときだけ、
スクロールさせたいので、「hitTest」対象として指定するためです。
※Flash５では、マスク図形がMCであってもにインスタンス名を付けることはできません。
以上が外部JPEGの読み込みと、そのスクロールに必要な構造です。
外部テキストには、ファイル名を記載してもいいのですが・・・
写真のファイル名をサンプルでは”p1.jpg”～”p15.jpg”と一連番号にしましたので、
とりあえずここでは、表示する枚数だけを外部テキストに記載することにしました。
外部テキストのファイル名を”maisu.txt”とし、その中の記載は・・・
maisu=15
としています。
「スクロールMC」をクリック選択してアクションパネルで、以下のようにクリップアクションを記載。
onClipEvent (load) { 最初に
this.loadVariables("maisu.txt")；←外部テキストの読み込み開始
function setPic(a,b) { 変数a,bを引数とする”setPic”メソッドを以下に定義
sam = "mc" + a；←MCインスタンス名に使うため変数samに"mc"+a の値を代入
this.attachMovie("pic",sam,a)；←識別名”pic”をsamという名前のMCにし深度aに作成
this[sam]._x = a * 82；←そのMCを「スクロールMC」内の座標で
this[sam]._y = 0； X=a×82,Y=0に配置
this[sam].mc.loadMovie("s"+ b +".jpg")；←そのMCの中の"mc"というMCに
} 「"s"+b+".jpg"」で表される外部JPEGを読み込む
} ↑※新しくMCを作成するたびに82px幅で横に並べます。（以上は定義だけで実行はまだ）
onClipEvent (data) { 外部テキストの読込が完了したら
Max = Number(maisu)+1；←外部テキストの変数maisuを数値変換後＋１し、変数Maxに代入
for (i = 1; i < Max; i++) { iを指定枚数まで１づつカウントアップしながら以下を実行
setPic(i,i)；←上で定義した”setPic()”に各引数とも「i」の値を入れて実行
}
j = 1； ※以降は、最後のサムネイルのあとに最初の６枚を追加する措置です。
for (i = Max; i <=Max+6; i++) {
setPic(i,j)；←引数にインスタンス名一連番号の続きとして「i」を
j++； 読み込む外部JPEGファイル名番号として「j」を入れています。
}
rightX = -82；←ループの右端最大値
leftX = -Max * 82；←ループの左端最小値
stageW = _parent.mask._width；←スクロール目標値としてマスクの横幅を代入
speed = 10；←スクロール速度の設定（値が大きいほどゆっくり、小さいほど速い）
this._x = rightX；←最初に配置する定位置として右端に設定
}
onClipEvent (enterFrame) { フレームレート(サンプルは1/24秒)ごとに以下を繰り返す
if (_parent.mask.hitTest(_root._xmouse,_root._ymouse,0) && Max>6)
{ ※※
this._x += (stageW/2 - _parent._xmouse)/speed；←マウスの座標により移動
if (this._x < leftX) { 左端より左へ行けば
this._x = rightX - (LeftX-this._x)；←右端に移動してはみ出た分だけ左に戻す
}
if (this._x > rightX) { 右端より右へ行けば
this._x = leftX + (this._x-rightX)；←左端に移動してはみ出た分だけ右に戻す
}
}
}
※※マウスがマスクの上にあり、かつ、サムネイルの指定枚数が５枚以上のときだけスクロール。
Maxの値は、先に＋１しているので「６以上」。
サンプルは、これ以外にサムネイルにマウスオーバーしたときの「アニメMC」や写真番号の表示、
ムりックしたときのフォーカスして停止もお遊びでいれていますので、
仕組み等は、flaファイルを分析してください(*^-^*
scroll02.zip ※MX仕様
なお、写真の大きさサイズを問わず「82×62」になるように「読込用MC」に・・・
onClipEvent (data) {
this._xscale = 82；
this._yscale = 62；
}
を記載していますので、試しに大きな写真を入れて試してみてください。
<関連記事１> <関連記事２>
|
|
Response
04
|
| 2005年04月03日
(日) 21時56分＞ ゆっけ
|
|
返信が遅れて申し訳ありません。一応どんな大きさでも縮小できるようにしましたが、大きいサイズは試していませんでした。（汗）いつものことながら、憲ちゃんさんには関心させられます。本当に感謝②です。私も憲ちゃんさんを見習ってFlashがもっと上手になるように努力します。はい！早速、大きい画像などでも試してみたいです。重さのことをすっかり忘れていました（汗）本当に今回は有り難うございます。
|
|
