フラッシュの課題No.77(スクリプトの勉強 Study10)

2020.08.31.07:00



 スクリプトの勉強の第十弾です。

 前回はマウストレイルと云ってマウスのポイ

 ンターを動かすとテキストや画像キャラが

 追いかけて来て追随するスクリプトでした。

 今回はマウスによるドラッグアンドドロップ

 タイプのスクリプトについて説明致します。

 下欄のパノラマ画像をスクロールさせて行く

 と案内用のターゲット画像が現れるのでまこ

 こまさん達をドラッグして誘導して下さい。

 無事デパートの婦人服売り場の試着室に行く

 事が出来れば成功です。



 ここでFC2ブログ記事中に<iframe>タグを記述

 する際に、中に挿入するhtml文を作成する

 手順についてお話致します。

 先ず、ParaFlaの詳細設定で「swf生成時にHTML

 も保存する」にチェックを入れて下さい。

 次に「HTMLを編集する」をクリックして現れ

 たテキスト文をエディターで以下の様に作成

 して保存して下さい。

 このテキスト文はParaFlaをインストールした

 先のフォルダーの template.txt なので直接

 ここを開いてエディターで編集しても構いま

 せん。これでswfファイル生成時にHTML文も

 出力されます。このテンプレートでHTML文を

 出力した際に画像サイズの<<WIDTH>>にはParaFla

 で作成時の実際の数値に変換されます。また

 ファイル名の<<FILENAME>>にも出力したswfファ

 イル名に変換されます。

 従って出来上がったHTML文を更に確認して再度

 修正することが出来ます。その際、FC2ブログ

 上ではmeta属性でcharsetに"UTF-8"を使用して

 いるので、HTML文の文字コードを"Unicode

 (UTF-8)"に指定して下さい。その後、このHTML

 文と出来上がったswfファイルをFC2ブログに

 アップロードすればそのままブログ記事作成に

 利用出来ます。



 上記で述べたHTML文の中身は以下の通りです。

 JavaScript変換用の swf2js.js は<head>タグ内で

 指定します。以下のように保存した先のURLを

 記入して下さい。また、<body>タグや<table>タグ内

 に必要とあればそれぞれの背景画像を指定して

 下さい。以下の処のそれぞれのタグ内に保存さ

 れた先のURLを記入して下さい。

 更に、<<FILENAME>>には作成されたswfファイル名に

 変更されて表示されますが、実際にFC2ブログに

 アップした際のURLに修正しても構いません。

 また、id="xxx01"と{tagId: "xxx01"}はご自由に

 同じid名に変更して記述して下さい。



  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="https://blog-imgs-xxx.fc2.com/xxx/swf2js.js">
  </script>
  <title>ParaFla Sample File</title>
  </head>
  <body background="https://blog-imgs-xxx.fc2.com/xxx/xxx.jpg">
  <center>
  <table background="https://blog-imgs-yyy.fc2.com/yyy/yyy.png" border="0">
  <tbody>
  <tr><td width="<<WIDTH>>" align="left" nowrap="nowrap"><br /><br />
  <div id="xxx01" style="width:600px;height:500px;max-width:100%;">
  <script type="text/javascript">
  swf2js.load("<<FILENAME>>",{tagId: "xxx01"});
  </script>
  </div><br /><br />
  </td></tr>
  </tbody>
  </table>
  </center>
  </body>
  </html>






 次にHTML文とswfファイルをFC2ブログに保存

 した後、その記事本文には以下のように<iframe>

 タグを記述します。ここでは<table>タグを使用

 して作成していますが、任意の箇所に記述し

 ても構いません。また<iframe src="zzz">には

 保存した先のhtmlファイルのURLを指定して

 下さい。




  <table>
  <tbody>
  <tr><td width="600" align="left" nowrap="nowrap">
  <iframe src="https://blog-imgs-zzz.fc2.com/zzz/zzz.html" width="600" height="600" scrolling="no">
  </iframe>
  </td></tr>
  </tbody>
  </table>







 さて、次にドラッグアンドドロップタイプの

 マウスの移動によるスプライト画像の制御処理

 について述べます。

 即ち以下の様に on (press){this.startDrag (true);}

 と云う記述のスクリプトだけで実現出来ます。

 また、ターゲット画像に接触すると設定した

 ラベル先にフレームジャンプさせる為には

 以下のような(this.hitTest(_root.xxx.yyy) == true)

 を記述する事だけで良いのです。ここでター

 ゲット先のスプライト中のインスタンス名を

 指定するのです。ここでは背景画像中の看板

 のスプライトのインスタンス名を指定してい

 ます。



  on (press) {
        this.startDrag (true);
  }
  -
  on (release) {
        this.stopDrag ();
  }
  -
  onClipEvent (mouseMove) {
        updateAfterEvent(mouse);
  }
  -
  onClipEvent(enterFrame) {
        if(this.hitTest(_root.haikei.isetan) == true) {
                _root.gotoAndPlay("入口");
        }
  }







まここま母さんが気に入った洋服を

試着したいので、試着室を探しています。

フラッシュの課題No.76(スクリプトの勉強 Study9)

2020.08.24.07:00



 スクリプトの勉強の第九弾です。

 ボタンアクションにスクリプトを記述した前

 回までのフラッシュは、その.swfファイルを

 FC2ブログにアップロードして、記事中に

 JavaScript変換用の指定しても十分に対応

 出来るものでした。

 然しながら、これから述べるようなスプライト

 にスクリプトを記述してマウス処理を行おうと

 すると、その.swfファイルを記事中に記載して

 指定しても上手くマウスを操作出来ませんでし

 た。そこで、JavaScript変換用の指定したhtml

 文を別個に作成し、その.swfファイルと共にFC2

 ブログにアップロードして、記事中にはインラ

 インフレームタグを使用し、その中にhtml文を

 指定してFC2ブログの外でJavaScript変換を行う

 と上手くマウス処理がブログ上で行なう事が出

 来ます。原因はよく分かりませんが、多分ブログ

 上のテンプレートなどがマウスの動きを阻害して

 いるのではないかと思われます。



 今回はパノラマ画像をスクロールさせる

 マウスとキャラを移動させるマウスとの2つ

 のマウス処理を同時に行なうフラッシュです。

 先ず、指画像にオンマウスして左右に背景画

 を動かせて下さい。暫くするとデパートの入

 口が現れるので、3人のキャラを入口に向か

 わせて下さい。

 こうしてまここまさん達をデパートの中へ

 誘導して下さい。



 スプライトの座標位置をマウスの座標位置

 で制御する為の基本的なスクリプトは以下の

 通りです。



  onClipEvent(enterFrame){
        this._x=_root._xmouse;
        this._y=_root._ymouse;

  }






 次に複数のキャラのスプライトの位置を

 制御する為には各キャラの移動の速度を変化

 させなければなりません。即ち、

  現在の速度 = (マウスの位置 - スプライトの位置) / 減速度

 の式に従って各キャラの移動を制御します。

 即ち、以下の式のaの値を先頭のキャラから

 順に大きくして各キャラの位置を決めます。

 これにより先頭のキャラを追いかけて後続

 のキャラが追随して行きます。



  onClipEvent(enterFrame){
        this._x += (_root._xmouse - this._x)/a;
        this._y += (_root._ymouse - this._y)/a;

  }






 更に、ここではマウスが停止する際に各

 キャラがばね仕掛けの用に弾んで止まる指定

 にしています。それが以下の式の通りです。

  停止速度 = 現在の速度 * 振幅幅 + (マウスの位置 - スプライトの位置) / 減速度

 の式に従って各キャラの停止時点での

 ゆっくり減速しながらふわーっとした静止

 を演出しています。

 即ち、以下の式のbの値に振幅幅の値を

 各キャラに設定します。

 これにより先頭から順番にゆっくりと

 左右に揺れながら減速して止まります。



  onClipEvent(load){
        vx=0;
        vy=0;
  }
  -
  onClipEvent(enterFrame){
        vx = vx * b + (_root._xmouse - this._x)/a;
        vy = vy * b + (_root._ymouse - this._y)/a;
        this._x += vx;
        this._y += vy;
  }






 上記のようなスクリプト処理で3人の

 キャラであるまここま母さん、まここまさん、

 ミニラちゃんの動きを記述したのが以下の

 通りです。



  //まここま母さん
  onClipEvent(load){
    vx=0;
    vy=0;
  }
  -
  onClipEvent(enterFrame){
    vx=vx*0.65+(_root._xmouse-this._x)/10;
    vy=vy*0.65+(_root._ymouse-this._y)/10;
    this._x+=vx;
    this._y+=vy;
  }
  -
  onClipEvent(enterFrame){
        if(this.hitTest(_root.haikei.isetan) == true) {
                _root.gotoAndPlay("入口");
        }
  }




  //まここまさん
  onClipEvent(load){
    vx=0;
    vy=0;
  }
  -
  onClipEvent(enterFrame){
    vx=vx*0.65+(_root._xmouse-this._x)/30;
    vy=vy*0.65+(_root._ymouse-this._y)/30;
    this._x+=vx;
    this._y+=vy;
  }




  //ミニラちゃん
  onClipEvent(load){
    vx=0;
    vy=0;
  }
  -
  onClipEvent(enterFrame){
    vx=vx*0.65+(_root._xmouse-this._x)/50;
    vy=vy*0.65+(_root._ymouse-this._y)/50;
    this._x+=vx;
    this._y+=vy;
  }






まここまさん達がデパートの中で

楽しくお買い物しています。

フラッシュの課題No.75(スクリプトの勉強 Study8)

2020.08.17.07:00



 スクリプトの勉強の第八弾です。

 まここまさんの行きつけのデパートがIデパ

 ートと知りました。そこで急遽ここにお買い

 物に行くことにしました。普段は駅の歩道橋

 から行くのですが、歩行者が大勢いますので

 敢えて地上一階から入店する事にしました。

 今回はまここまさんのお母さんも登場して、

 まここまさんとミニラちゃんとの三人でのお

 買い物となりました。

 その様子をパノラマ画像と共にご覧下さい。



 ここで小生のパノラマ画像の作り方に

 ついてお話し致します。

 先ず、グーグルマップでお好みの場所を

 選んで下さい。次にその場所のストリート

 ビューを開いて下さい。そこの右下の方位

 コンパス画像を操作して0度90度180度270度

 の各画像を選択します。次に各画面の左上の

 3つの点をクリックして印刷形式の画面を表示

 させます。

 ここでwindows10の標準アプリであるSnipping

 Toolを使用して東西南北の各画像を画面キャプ

 チャーして、出来るだけ大きな範囲の4枚の画

 像を切り取ってpng形式の画像に出力します。

 次にこれらの画像をパノラマ合成するには多く

 のソフトがあり色々試してみたのですが、今の処

    Microsoft Image Composit Editor(ICE)

 が一番使い易いアプリだと思いました。これには

 様々なパノラマ形式に出力したり、細かな設定も

 出来るのですが、全てお任せモードにして処理

 すると簡単にパノラマ合成する事が出来ます。

 出来上がったパノラマ画像ではParaFlaに取り込む

 為には画像サイズが大き過ぎます。従って、

 横幅2000乃至3000、縦幅500乃至600程度の画像

 サイズに縮小します。この画像処理については

 小生は画像処理ソフトのGimp2を使っています。

 これにてストリートビューの4枚の画像を取り込

 んで、png形式のパノラマ画像を作成したのが

 以下のフラッシュ画像です。



 四階で洋服を買ってその場で早速着替えをして

 地下一階で美味しいものを買って帰りました。



まここま母さんとまここまさんと

ミニラちゃんとの三人での街でのお買い物



フラッシュの課題No.74(スクリプトの勉強 Study7)

2020.08.10.07:00



 スクリプトの勉強の第七弾です。

 前回まではキャラの移動処理について語り

 ました。今回からはマウス操作について勉強

 します。先ず最初にボタン操作により処理

 フレームへのジャンプ移動について述べます。

 次にマウスによる画面のパノラマ風の移動

 についてお話します。

 長引くコロナ禍の中久し振りにまここまさん

 がミニラちゃんを連れて街にお買い物にお出

 かけになりました。その様子をパノラマ画像

 と共にご覧下さい。



 先ずマウスによるボタン操作については、

 ボタン用の画像を用意してイベントのプロ

 パティにて「ボタンにする」にチェックし

 ます。ここでアクションの設定にフレームへ

 ジャンプなど直接処理指定すると、どうも

 上手くJavaScript変換出来ないようです。

 そこで、ここではアクションにスクリプト

 を選んでボタンアクション欄のスクリプト

 編集に以下のような僅か2,3行の記述をする

 だけで、ボタンアクションがJavaScript変換

 出来てラベル先のフレームへジャンプ出来

 ます。



  on(press)によりボタン画像を押すとラベルを

  設定したフレーム先へジャンプします。



  on(press){
        _root.gotoAndPlay("左向き");
  }






 次にマウスのパノラマ処理については、

 先ず、ParaFlaの画像枠より大きな横幅の

 画像を用意します。パノラマ画像は最近

 のデジカメでもパノラマ処理する機能が

 搭載されています。しかし、ここでは

 グーグルマップで適当な位置のストリート

 ビューの東西南北の画像を切り取ってパノ

 ラマ処理しています。その画像をスプライ

 ト用に取り込んでスプライトの設定欄で

 適当なインスタンス名を付与します。

 次に、左右の方向を示す矢印の画像を用意

 します。その画像をそれぞれ配置してボタ

 ンにしてアクションの設定で以下のような

 スクリプト文を記述します。



  右方向を示すボタン画像のボタンアクション

  に於いて、on(rollOver)でボタン画像にマウス

  を乗せるとhaikeiのスプライト画像のX座標の値

  が5ピクセルずつ増加して右方向に向かって移動

  します。また、on(rollOut)でボタン画像から

  マウスを外すとスプライト画像の移動が停止し

  ます。





  on(rollOver){
        onEnterFrame = function(){
               if(haikei._x > Stage.width-haikei._width){
               	haikei._x += 5; 
               }
        };
  }
  -
  on(rollOut){
        delete onEnterFrame;
  }






  左方向を示すボタン画像のボタンアクション

  に於いて、on(rollOver)でhaikeiのスプライト

  画像のX座標の値が0地点より大きくなったら、

  5ピクセルず値を減少させて今度は左方向に向

  かって移動します。




  on(rollOver){
        onEnterFrame = function(){
               if(haikei._x > 0){
			haikei._x -= 5; 
               }
        };
  }
  -
  on(rollOut){
        delete onEnterFrame;
  }






 上記のようにボタン画像のアクションに

 処理フレームのジャンプ処理を施したり、

 スプライト画像をパノラマ風に移動処理

 させたりして作成したフラッシュ画像を

 ご覧下さい。



まここまさんとミニラちゃんの

街でのお買い物



フラッシュの課題No.73(スクリプトの勉強 Study6)

2020.08.03.07:00



 スクリプトの勉強の第六弾です。

 前回はsin(サイン)とcos(コサイン)を使った

 キャラの回転運動について述べました。

 今回はその一種類だけを使用していわゆる

 サインカーブ、コサインカーブによるキャラ

 の動きを表現したいと思います。

 キャラのミニラちゃんが大きくなったり小さ

 くなったりしながら波の上でサーフィンする

 様子をご覧下さい。



①初期値(-80,100~300)、振幅1.0度ずつ拡大、波長4.4

キャラの傾き0度から変わらず




  onClipEvent(load){
        var px = -80;
        var py = Math.random()*200 + 100;
        var dx = 4.4;
        var phase = 0;
        var phase_speed = 5;
        var amp = 0;
  }
  -
  onClipEvent(enterFrame){
        amp += 1.0;
        phase += phase_speed;
        var d = Math.sin(phase * Math.PI / 180);
        var y = d * amp + py;
        px += dx;
        this._x = px;
        this._y = y;
        if(_x > 600){
        px = -80;
        phase = 0;
	amp = 0;
        }
  }






②初期値(-80,100~250)、振幅1.2度ずつ拡大、波長5.0

キャラの傾き0度から1度ずつ右回転




  onClipEvent(load){
        _rotation = 0; 
        var px = -80;
        var py = Math.random()*150 + 100;
        var dx = 5.0;
        var phase = 0;
        var phase_speed = 7;
        var amp = 0;
  }
  -
  onClipEvent(enterFrame){
        _rotation += 1;
        amp += 1.2;
        phase += phase_speed;
        var d = Math.cos(phase * Math.PI / 180);
        var y = d * amp + py;
        px += dx;
        this._x = px;
        this._y = y;
        if(_x > 680){
        _rotation = 0; 
        px = -80;
        phase = 0;
        amp = 0;
        }
  }






③初期値(-80,100~200)、振幅0.5度ずつ拡大、波長5.4

キャラの傾き0度から変わらず

キャラの大きさ100から1ずつ拡大




  onClipEvent(load){
        _xscale = 100;
        _yscale = 100;
        var px = -80;
        var py = Math.random()*100 + 100;
        var dx = 5.4;
        var phase = 0;
        var phase_speed = 10;
        var amp = 10;
  }
  -
  onClipEvent(enterFrame){
        _xscale += 1;
        _yscale += 1;
        amp += 0.5;
        phase += phase_speed;
        var d = Math.sin(phase * Math.PI / 180);
        var y = d * amp + py;
        px += dx;
        this._x = px;
        this._y = y;
        if(_x > 600){
        _xscale = 100;
        _yscale = 100;
        px = -80;
        phase = 0;
        amp = 0;
        }
  }






④初期値(-80,100~200)、振幅1.0度ずつ縮小、波長4.4

キャラの傾き0度から1度ずつ右回転

キャラの大きさ100から1ずつ拡大




  onClipEvent(load){
        _xscale = 100;
        _yscale = 100;
        _rotation = 0; 
        var px = -80;
        var py = Math.random()*100 + 100;
        var dx = 4.4;
        var phase = 0;
        var phase_speed = 10;
        var amp = 150;
  }
  -
  onClipEvent(enterFrame){
        _xscale += 1;
        _yscale += 1;
        _rotation += 1; 
        amp -= 1.0;
        phase += phase_speed;
        var d = Math.cos(phase * Math.PI / 180);
        var y = d * amp + py;
        px += dx;
        this._x = px;
        this._y = y;
        if(_x > 840){
        _xscale = 100;
        _yscale = 100;
        _rotation = 0; 
        px = -80;
        phase = 0;
        amp = 0;
        }
  }






⑤初期値(-80,100~150)、振幅1.0度ずつ縮小、波長3.4

キャラの傾き0度から変わらず

キャラの大きさ300から1ずつ縮小




  onClipEvent(load){
        _xscale = 300;
        _yscale = 300;
        var px = -80;
        var py = Math.random()*50 + 100;
        var dx = 3.4;
        var phase = 0;
        var phase_speed = 10;
        var amp = 100;
  }
  -
  onClipEvent(enterFrame){
        _xscale -= 1;
        _yscale -= 1;
        amp -= 1.0;
        phase += phase_speed;
        var d = Math.sin(phase * Math.PI / 180);
        var y = d * amp + py;
        px += dx;
        this._x = px;
        this._y = y;
        if(_x > 680){
        _xscale = 300;
        _yscale = 300;
        px = -80;
        phase = 0;
        amp = 0;
        }
  }






⑥初期値(-80,100~110)、振幅1.0度ずつ縮小、波長4.4

キャラの傾き0度から1度ずつ右回転

キャラの大きさ300から1ずつ縮小




  onClipEvent(load){
        _xscale = 300;
        _yscale = 300;
        _rotation = 0; 
        var px = -80;
        var py = Math.random()*10 + 100;
        var dx = 4.4;
        var phase = 0;
        var phase_speed = 10;
        var amp = 150;
  }
  -
  onClipEvent(enterFrame){
        _xscale -= 1;
        _yscale -= 1;
        _rotation += 1; 
        amp -= 1.0;
        phase += phase_speed;
        var d = Math.cos(phase * Math.PI / 180);
        var y = d * amp + py;
        px += dx;
        this._x = px;
        this._y = y;
        if(_x > 680){
        _xscale = 300;
        _yscale = 300;
        _rotation = 0; 
        px = -80;
        phase = 0;
        amp = 0;
        }
  }






 上記の6つのスクリプト文に基づいて

 作成されたフラッシュ画です。

 キャラクターのミニラちゃんが大波に

 大波に向かって波乗りする様子をご覧下さい。



ミニラちゃんのサーフィン画像



プロフィール

chappychan2

Author:chappychan2
FC2ブログへようこそ!

最新記事
最新コメント
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR