FLASH講座 ーアクションスクリプトの実践的事始めー
実務編
(3) FLASHによるサイト作成例
[2] 化粧品販売サイト森と女性

 以前、サイト作成例として化粧品販売サイトの例をアップしましたが、その作成方法についてはまだ未公開でした。  商品数が多い場合や、買い物かごをある程度Flash画面で処理するケースなど、バージョンアップしたいところです。 その後公開したショッピングカートがバージョンアップに参考となるかもしれません。
 なお、モーショントウイーンとスクリプトが混在している作り方になっていますが、ある意味、実践的といえるかもしれません。
ステージの準備(サイズ:615×500、背景色:黒、12fps)
●会社ロゴ:ステージ左上にを配置
●副メニュー:必要に応じて、画面右上にメニューボタンを置く
●背景になる写真:(600×350)を、x:10、y:50に配置。 ここでは多少明度を上げた(うすく見える感じの)写真にした
●マスク:写真の上層にレイヤーを追加、150×350の矩形を描き、枠線:白・1px、色:#EBEBEB、アルファ:20%に設定
      この矩形をシンボルに変換し、maskと名づける
      このmaskを写真の上に4枚横に並べて写真いっぱいに配置し、左からインスタンス名をmask1,2,3,4とする
      mask1,2,3,4すべてを選択し、シンボルに変換、mask_mcと名づける
      mask_mc編集画面で、全体を右クリック「レイヤーに配分」で4つのレイヤーに分ける
      mask1のタイムラインでFRAME10にキーフレームを挿入し、モーショントウイーンを作成、FRAME1の幅を1に
      mask2、3、4も同様にトウイーンを付け、2FLAMEずつずらして設定、FLAME4の最終フレームにstop(); を記述
      シーン1タイムラインのレイヤー名のところで、右クリック、マスクにチェックを入れる
      ここでプレビューすると、写真が4分割されて、ずれながら、表示されてくるはず!
●マスクの上層にレイヤーを追加し、ライブラリーからmask_mcをドラッグし、写真と同じ位置にドロップする
  このレイヤーは、maskと同じ動きをしながら、枠線を表示し、全体に薄いスクリーンをかけるのが目的
●さらにレイヤーを追加し、写真の左下外側に150×25の矩形(塗り:白、アルファ40%、枠線:白、1px)を描き、シンボルに変換(bar)、編集画面で、以下のようなトウイーンを設定する(ロールオーバー効果などの付与に使う)
FLAME1:alpha 0%
FLAME30,35:着色#ff6600、50%
FLAME15,30,45にstop();
●このbarを写真の下に横に4つ並べて、左からインスタンス名をbar1,bar2,3,4とし、それぞれに洗顔剤などの文字をメニューとして書き込む
●モデル写真読込み用セル:適当な大きさの矩形を描き、シンボルに変換しpcell と名前を付ける。この矩形はscriptで座標指定するので、どこに置いてもいいが目障りなので、アルファを0にしておく
●商品説明表示用スクリーン:450×350の矩形を描きsubscreenを名前を付けて、リンケージを設定し、ステージから削除しておく(このスクリーンシンボルは、説明画面の背景にも使う)
●150×20の矩形を描き、枠線1px白、塗り色#0066cc、アルファ70%に設定しシンボルに変換bar_orderと名づけ画面から削除しておく
●各商品説明画面の作成:product1.swfからproduct4.swfまで同じ作り方をしている
450×350のステージに、静止テキストで説明文を書き、写真を挿入して、全体をシンボルに変換(グラフィック)し、タイムラインでフェインドインのトウイーンを作成する。これを上記のファイル名でswfとして書き出し、同じフォルダに格納する
スクリプト

var bar:Array = new Array();
for (i=1; i<=4; i++) {
  bar[i] = eval("bar"+i);
  bar[i].num = i;
  bar[i].onRollOver = a;
  bar[i].onRollOut = b;
  bar[i].onRelease = c;
}
_root.attachMovie("bar_order", "bar_order", 30);
with (bar_order) {
  _x = 10;
  _y = 380;
  _alpha = 0;
}
function a() {
  m_num = this.num;
  pcell.loadMovie("model"+m_num+".jpg");
  pcell._x = 10+150*(m_num-1);
  pcell._y = 50;
  pcell._alpha = 0;
  this.gotoAndPlay(20);
  _root.onEnterFrame = function() {
     pcell._alpha += (100-pcell._alpha)/10;
     ssc.removeMovieClip();
     ssc0._alpha = 0;
     bar_order._alpha += (0-bar_order._alpha)/4;
  };
}
function b() {
  this.gotoAndPlay(35);
  if (flag) {
     flag = false;
  } else {
     _root.onEnterFrame = function() {
        pcell.unloadMovie();
        bar_order._alpha += (0-bar_order._alpha)/4;
     };
  }
}
function c() {
  m_num = this.num;
  _root.attachMovie("subscreen", "ssc0", 4);
  _root.attachMovie("subscreen", "ssc", 5);
  ssc.loadMovie("product"+m_num+".swf");
  ssc._x = ssc0._x=160;
  ssc._y = ssc0._y=50;
  ssc0._alpha=0;
  flag = true;
  _root.onEnterFrame = function() {
     pcell._x += (10-pcell._x)/3;
     pcell._alpha += (100-pcell._alpha)/3;
     ssc0._alpha += (85-ssc0._alpha)/5;
     bar_order._x += (10+150*(m_num-1)-bar_order._x)/4;
     bar_order._alpha += (100-bar_order._alpha)/6;
     bar_order.onRelease = function() {
     getURL("javascript:OpenWin();");
     };
  };
}

配列barの定義



ロールオーバー時に 関数 a へ
ロールアウト時に b へ
クリック時に c へ

bar_orderをステージに読み込む

配置するx座標
y座標
見えなくする

ロールオーバー時
ロールオーバーされているbar番号
その番号のモデル写真をロード
配置するx座標
y座標
写真のアルファを0に
barのタイムラインの20に(色がfadein)
フレームアクション
モデル写真のフェードイン
前に表示されている商品説明画像を消す
背景スクリーンを消す
注文barをfadeoutさせる


ロールアウト時
barタイムラインの35へ(色を消す)
もしflagがtrueなら
falseに変える
そうでなければ

モデル写真を消し(fadeout)
注文barを消す



クリック時
番号取得
subscreenをステージに呼びssc0とし、
subscreenをステージに呼びsscとし、
商品説明swfをsscに読み込む
配置x座標
配置y座標
背景スクリーンのアルファを0に
flagをtrueに

モデル写真を一番左のセル位置に
アルファを100に
商品説明swf背景のfadein(よく見えるように)
注文barをクリックした位置に
注文barをfadein
もし、注文barがクリックされたら
注文ウインドウを開く

)モデル写真はpcellに読み込まれるので、pcellにアクションをつければ、同じアクションが写真に反映される
注文ウインドウ:注文すると言う bar_order をクリックすると別ウインドウ(HTML)が開き、この先は、ショッピング用のcgi を用いる通常の買い物かごに接続するようになっている。 商品数がすくないこの例では、javascriptとフォームメールの組み合わせで行うようにしている。 javascriptの部分、即ち金額計算部分はFlashでも作成可能であり、そうすれば、同じ画面で処理できるようにすることが出来る。 この部分については、まだ出来ていないので解説しないが、FALSHとHTMLの繋ぎについて、以下に解説する。
FLASHのscript最終部分で、getURL("javascript:OpenWin();");と記述しているが、これは、このFLASHを表示しているページ(HTML)に記載してあるjavascriptのOpenWinという関数を呼び出している。このjavascriptの記述は、HTMLのHEADの部分に以下のように記載する。
  <SCRIPT language="JavaScript">
  <!--
    function OpenWin(){
      win=window.open("orderform.html","new","width=665,height=500,scrollbars=yes");
    }
  // -->
  </SCRIPT>
すなわち、orderform.htmlというページを別ウインドウで指定したサイズで開けというスクリプトになっている。注文フォームが記載されている orederform.html が同じディレクトリーにあるとしたときの記述になっているが、他のディレクトリにあるときはそのパスを記述する。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。
 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。
 氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。 
  macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。                                                                           (by Hiraoka)
HOME   Flash講座総リスト    flash アクションスクリプト 実務編 (4)