FLASH講座1234_アクションスクリプトaction script　cgiの要らないフォームメール（２）

この講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです。

FLASH講座　ーアクションスクリプトの実践的事始めー
実務編
(6) FLASHによるCGI不要フォームメール ver.2

　FLASH画面でインプットされた情報を、メールソフトに送って、それを指定されたメールアドレスに送信するタイプの簡易フォームメールを前回学びました。　
　
　今回は、記入必須項目の指定と記入漏れチェック機能、および、メールアドレスの書式チェック機能を付加したフォームメールの作成についてです。　また、記入項目の数が増えたときのことを考慮して、項目名や、データインプット用テキストボックスなどを配列処理する方法を採用します。

　今回も、送り先メールアドレスはダミーですが、メーラーが立ち上がるまでは確認できるようになっています。
　なお、ｅｍａｉｌのアドレスチェックにはjavascriptを使っており、FlashとjavascriptのやりとりはExternalInterfaceクラスを使いました。（前回はgetURL()を使ってjavascriptにデータを送りましたが、今回はチェック結果をjsから取得する必要がありますので、このクラスを使いました。ExternalInterfaceクラスの使い方を「ExternalInterFaceを使ったFLASHとjavascriptの連携」にまとめました。)
　
　このメーラーを使う方法は、ユーザーがメーラーを使っていなかったりすると（webメールを使っていると）機能しないのでやはり、cgi やphpのsendmailを使う方がベターです。　その場合でもFLASHでこれらのチェックをしてcgi に渡す方法がサーバーへの負荷を軽減できると言うメリットがあります。　cgi を使う方法は次回の講座にする予定です。

ステージの準備

三つのシーンで構成している。　
　シーン1：入力画面（必須項目記入漏れチェック、E-mail書式チェック）
　シーン2：確認画面（シーン1に戻って修正をかけるか、送信するかをボタン選択）
　シーン3：終了画面
ライブラリーに以下のコンポーネントをドラッグしてドロップする（コンポーネントウインドウが開いていなければウインドウメニューで開いておく）
　ライブラリーに置くコンポーネント：Button, Label, TextArea
　画面サイズ、背景色、枠などを好みで設定する。
＜シーン1＞
・画面左サイドにライブラリーからＬａｂｅｌをドラッグ&ドロップして画面左に配置する。更に、インプットに必要な数だけ縦に並べる。上から、インスタンス名を、jLabel0,jLabel1のようにし、同時にパラメータタグをクリックしてtextのところに　お名前**　のように項目名をそれぞれにインプットする。このとき、最後に**を付けると記入必須項目として扱われる。
・上で配置した項目名のそれぞれの右にインプット用のテキストフィールドを左にあるツールボックスの「A」（テキストツール）を使って配置し、インスタンス名を上から、inBox0, inBox1のように、変数をindat0, indat1のように順に命名する。
・全項目の下に警告用のダイナミックテキストボックスを配置し、インスタンス名をalertBoxとする。
・その下にライブラリーからＢｕｔｔｏｎを配置し、インスタンス名をconfirm_btn、パラメーターでlabelを確認とする。
＜シーン２＞
・画面左サイトにシーン1からコピーして項目名を縦に並べる。
・それぞれの項目名の右側に、適当な幅のラベルを配置し上からインスタンス名をoutBox0から順に名付け、パラメーターでｔｅｘｔのlabelを削除し、何も表示しないようにする。メッセージのところだけは、TextAreaを配置する。
・最下部に、修正ボタン（edit_btn）と送信ボタン（submit_btn）を配置する。
＜シーン３＞
・終了メッセージと戻りボタン（back_btn）を配置する。

スクリプト（Script）

シーン1_rootに
（インスタンスを何も選択していない状態でF9キーを押し、出てきたウインドウに記述）


stop();
var item_num = 6;
_root.confirm_btn.onRelease = function() {
  alertStr = "";
  for (i=0; i<item_num; i++) {
    jlabel = _root["jLabel"+i];
    inbox = _root["inBox"+i];
    jT = jlabel.text;
    mark = jT.substring(jT.length-2, jT.length);
    if (mark == "**" && inbox.text == "")
  { alertStr += jT.substring(0, jT.length-2)+"　";
    }
  }
  if (alertStr == "") {
    alertBox.text = " ";
    emailCheck(inBox3.text);
  } else {
    alertBox.text = alertStr+"が未記入です";
  }
};
function emailCheck(emailIn) {
  import flash.external.*;
  function checkResult(str:String):Void {
    if (str == "OK") {
      nextScene();
    } else {
      alertBox.text = str;
    }
  }
  ExternalInterface.addCallback
  ("checkResult", this, checkResult);
  ExternalInterface.call("emailcheck", emailIn);
}

項目の数
確認ボタンがクリックされたら
alertStrの初期化
項目の数だけ
jLabel0 から順にjlabelと定義
inBox0 から順にinboxと定義
jlabel記載されているテキストをｊTと置く
ｊTの最後の2文字をmarkとする
もしmarkが**でinBoxに記入がなければ
alertStrに**を取り除いた項目名を加える

もし、alertStrが空だったら
alertBoxに空白を入れる
関数eamailCheckを実施
そうでなければ（未記入があれば）
alertBoxに未記入の項目を表示

ｅｍａｉｌチェック
ExternalInterfaceクラスの呼び出し
javascriptの検定結果を受けて行う
もし、OKなら
次シーンへ
そうでなければ
送られてきた文を表示（この場合は”E-mailアドレスを確認して下さい”）

ｊｓからデータを取得するためのメソッド

javascriptにデータを渡すメソッド
（javascriptの項参照）

シーン２_rootに


stop();
$body = "";
for (i=0; i<item_num; i++) {
  inData = _root["indat"+i];
  outData = _root["outBox"+i];
  outLabel = _root["jLabel"+i];
  if (inData) {
    outData.text = inData;
    $body += outLabel.text+"：　"
    +outData.text+"%0A";
  }
}
_root.edit_btn.onRelease = function() {
  prevScene();
};

$subject = "フォーム送信を受け付けました";
$body="以下のデータを送信します%A%A" + $body;
_root.submit_btn.onRelease = function() {
  getURL("mailto:aaa@bbb.com?subject="+$subject
  +"&body="+$body);
  nextScene();
};

$bodyの初期化
itemの数だけ
indat0から順にinDataと置く
outBox0から順にoutDataと置く
jLabel0から順にoutLabelと置く
もし、inDataにデータがあれば
outDataの内容テキストをinDataとする
$bodyにそのときの項目名と　"：　"
と　outDataの内容と改行を追加
（メーラーに送る主文をひとまとめにしている。即ち、記入のあった項目名＋内容＋改行記号をセットにして次々に足していく)

修正ボタンがクリックされたら
前のシーンへ

メールの件名
主文の前文を追加（%Aは改行）
送信ボタンがクリックされたら
件名と主文が記述されたメーラを立ち上げ

次のシーンへ

シーン３_rootに


_root.back_btn.onRelease = function() {
  gotoAndPlay("Scene 1");
};

戻るボタンがクリックされたら
シーン1に

HTMLの<head></head>内に記述するjavascript


function thisMovie(movieName) {
 var isIE = navigator.appName.indexOf("Microsoft") != -1;
 return (isIE) ? window[movieName] : document[movieName];
}
function emailcheck(str) {
 if(!str.match(/^[A-Za-z0-9]+[\w-]+@[\w\.-]+\.\w{2,}$/)){
 toFlash("E-mailアドレスを確認して下さい");
 }else{
 toFlash("OK"); }
}
function toFlash(str) {
 thisMovie("fFormMail").checkResult(str);
}

ユーザーのブラウザに合わせて参照を返す関数

emailcheck関数
FLASHから入力されたアドレスを受け取りチェックし、適否に応じたメッセージを、
toFlash関数に返す

FLASHにチェック結果に基ずくメッセージを返す　"fFormmail"はFlashファイルのid名
"checkResult"は結果を渡すFlaｓｈのメソッド名

なお、javascriptとのやりとりについては、「ExternalInterFaceを使ったFLASHとjavascriptの連携」を参照下さい。

本テーマについて、うまく作動しないと言う問い合わせが寄せられています。
実際に作動しているファイルをダウンロードできるようにしますので、こちらを参考にしてください。-->ダウンロード
なお、html、swfファイルを必ずサーバーにアップロードして確認してください。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

　このサイトで使用しました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 アクションスクリプト実務編 (7)

FLASH講座 ーアクションスクリプトの実践的事始めー 実務編 (6) FLASHによるCGI不要フォームメール ver.2

FLASH講座　ーアクションスクリプトの実践的事始めー
実務編
(6) FLASHによるCGI不要フォームメール ver.2