- ベストアンサー
ActionScript2.0で時間をカウントするFLASHを制作する際のJavascript置き換え方法
- ActionScript2.0を使用して時間をカウントするFLASHを制作していますが、ターゲットの時間をJavascriptで設定したいと考えています。具体的な置き換え方法を教えてください。
- ActionScript2.0のFLASHでターゲットの時間を設定する際に、Javascriptを使用して置き換える方法を知りたいです。
- FLASH制作において、ActionScript2.0の変数をJavascriptで置き換える方法を教えてください。
- oootes_001
- お礼率52% (9/17)
- Flash
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
＃１＆２です。 > 「〇〇年〇〇月〇〇日〇〇時〇〇分〇〇秒」を > ターゲットに、現在の時間からカウントダウン そういうことですね。 それでしたら次のような感じになるのではないでしょうか。 以下は ＃１ の補足で書かれたものをベースに変更しています。 HTML --------------------------- <html> <head> <title>test</title> <script type="text/javascript"> function sayTime() { //2010年12月1日0時をターゲットとする var targetDate = new Date(2010,11,1,0,0,0); var targetTime = targetDate.getTime(); return targetTime; } </script> </head> <body> <!--Flashを貼り付けるタグなど--> </object> </body> </html> --------------------------- swfファイルActionScript --------------------------- //externalクラスのインポート import flash.external.*; //1フレームで停止 stop(); //JavaScriptからターゲットのミリ秒数を取得 var jsTime:Number = Number(ExternalInterface.call("sayTime")); this.onEnterFrame = function() { // //現在のローカル日付オブジェクトを作成 var today:Date = new Date(); // //1971年1月1日から現在のミリ秒数を取得 var myTime:Number = today.getTime(); // //JavaScriptで得たミリ秒数から現在のミリ秒数を引いた残り var timeLeft:Number = jsTime - myTime; //その 残り を 秒 にしておく var secLeft = Math.ceil(timeLeft / 1000); // //残り時間のそれぞれ 日・時・分・秒 を割り出す var days:Number = Math.floor(secLeft / (24 * 60 * 60)); secLeft -= days * 24 * 60 * 60; var hrs:Number = Math.floor(secLeft / (60 * 60)); secLeft -= hrs * 60 * 60; var min:Number = Math.floor(secLeft / 60); secLeft -= min * 60; var sec:Number = secLeft; // //日を文字列に変換 var counter_days:String = String(days); //時を2桁文字列に変換 var counter_hrs:String = ("0" + hrs).substr(-2, 2); //分を2桁文字列に変換 var counter_mins:String = ("0" + min).substr(-2, 2); //秒を2桁文字列に変換 var counter_secs:String = ("0" + sec).substr(-2, 2); // //各テキストフィールドに 日・時・分・秒 を表示 _root.time_days.text = counter_days; _root.time_hrs.text = counter_hrs; _root.time_mins.text = counter_mins; _root.time_secs.text = counter_secs; // //カウントダウン終了時2フレームへ if (timeLeft <= 0) { delete this.onEnterFrame; gotoAndStop(2); } }; --------------------------- ※次の図は 日・時・分・秒 を求めるイメージ図です。 ※＃２の下に substr() についての図も追加しました。
その他の回答 (2)
- BlurFiltan
- ベストアンサー率91% (1611/1754)
> 思うように動かすことが出来ません。。。 と書かれましても， 何がどう動くことが「思うように動く」の状態なのかわからないため 解決策も，問題点すらもわかりませんよ。。。 文字数制限で書けなかったのでしょうか？ （私は ＃１ も，この ＃２ の回答も字数制限ほぼいっぱいですが。） 「思う/思わない」とか「うまく行く/行かない」などという主観でなく なるべく「何がどうなっていてそれをどうさせようとしているのか」という客観的な情報を書いてください。 補足で書かれていらっしゃることについての 根本的な大前提の質問です。 書かれた補足では ＃１で私が書いたスクリプトよりも複雑になったスクリプトを書かれていらっしゃいますが それは 「ExternalInterface の件はもう大丈夫だから次の問題点へ質問を変える。」 という意味なのでしょうか？ それとも 「ExternalInterface の件は大丈夫だったが，スクリプトを変えると JavaScript との連携ができなくなった。」 という意味なのでしょうか？ それとも 「ExternalInterface の件も大丈夫ではないが，その点は置いておいてスクリプトを変えた。」 という意味なのでしょうか？ 「ExternalInterface で JavaScript とのやりとりができたのかできなかったのか。」 その点すら書かれていらっしゃらないのですよ。 「思うように」 とは一体何のお話なのかがわかりません。 ===スクリプトの感想================== 検証もしてませんし細かい部分も見ていませんが ザッと見，次の部分は明らかに変（ナンセンス）だと思いました。 this.onEnterFrame = function(){ ～略～ //JavaScriptからターゲットのミリ秒数を取得 var jsTime:Number = Number(ExternalInterface.call("sayTime")); ～略～ } これだと onEnterFrame で ExternalInterface.call が実行され続けます。 ExternalInterface.call で得られる結果は変わらないにも関わらずです。 全く同じ値を得るために 毎フレーム時間(１秒間に十数回～数十回も) ExternalInterface.call が実行されるんですよ。 ダブルで変です。 「全く同じ値だと決まっているもの何度も請求する」のが変です。 また仮に同じ値ではないとしても 「ブラウザのプログラムであるJavaScriptを頻繁に叩く(ボコボコに連打して返事を請求し続ける)」のが変です。 ExternalInterface.call は最初に１回実行すれば良いだけです。 onEnterFrame の中ではなく前に出しましょう。 仮に JavaScript から送られる値が頻繁に変わるものであったとしても 最初の call によってその後の値が推測できる場合は Flash で計算すべきです。 （「最初の値は推測できないが，その後の値は１秒毎に１ずつが上がる規則がある」などの場合は当然 Flash でその後の値を計算すべき。） （その後の値を推測できなかったとしても onEnterFrame は やり過ぎ。）
補足
文字数制限もありましたが、 それ以上に説明不足で申し訳ございませんでした。 > 補足で書かれていらっしゃることについての > 根本的な大前提の質問です。 ExternalInterfaceでのjavascriptとの連携は、ご回答頂きました方法で出来ました。 ありがとうございます。 そして、頂きましたご回答を参考にし、私なりにjavascript連携前のスプリクトにExternalInterfaceを組み込んでみましたところ、 「ターゲットの時間をFlashで取得した時」と 「ターゲットの時間をjavascriptで取得した時」の 同じ動きが実装出来ませんでした。 この「既存スクリプトのターゲットの時間だけをjavascriptで取得し、同じ動きを実装したい」という事柄が当スレッドの本題の部分と考えていました。 そもそもの元スクリプトは 「〇〇年〇〇月〇〇日〇〇時〇〇分〇〇秒」をターゲットに、現在の時間からカウントダウンさせるものです。 残り日数/時/分/秒を、それぞれtime_days/time_hrs/time_mins/time_secsインスタンスに表示させるため、 1フレーム目に回答番号：No.1の補足にありますスクリプトの ---------------------- //JavaScriptからターゲットのミリ秒数を取得 var jsTime:Number = Number(ExternalInterface.call("sayTime")); //取得した時刻のDateオブジェクトを作成 var myDate:Date = new Date(jsTime); //ターゲットのミリ秒数から現在のミリ秒数を引いた残り var timeLeft = targetTime - myTime; ---------------------- の部分を ---------------------- //ターゲットの時間取得 var targetDate:Date = new Date(2010,11,1,0,0,0,0); //1971年1月1日からターゲットのミリ秒を取得 var targetTime = targetDate.getTime(); //ターゲットのミリ秒から現在のミリ秒を引いた値が残りミリ秒 var timeLeft = targetTime - myTime; ---------------------- に変更したスクリプトを書き、 2フレーム目にはカウント終了時（ターゲットの時間に達した時）に表示させる画像を置いたFlashになります。 動きとしましては、2010年12月1日0時をターゲットにカウントダウンして行き、時間に達したら2フレーム目の画像を表示するといったものになります。 『ExternalInterface使用でjavascriptでの時間取得ができたから・・・』 といった安易な考えで、そのままFlashターゲット時間取得部分を置き換えてみましたところ、回答番号：No.1の補足のスクリプトになり、もちろん動かず、1フレーム→2フレームという動きをしてしまいました。 これをカウントダウン後、目標時間に達したら2フレーム目へ移動という動きにしたいと考えています。 ご不明な点もあるかと思いますが、再度ご回答下さいましたら幸いです。 度重なるご質問で大変お手数をお掛け致します。
- BlurFiltan
- ベストアンサー率91% (1611/1754)
JavaScript で次のように書いた場合 var targetDate = new Date(年,月,日,時,分,秒); これで生成される targetDate は JavaScript の Dateオブジェクト であって JavaScript 内だけで通用するものです。 (JavaScript だけが理解できる Dateクラス という概念に属するオブジェクト) そういうものはやりとりできません。 ですから例えば JavaScript で作成した Dateオブジェクト から getTime() で1971年１月１日からミリ秒など取得し その数値（や文字列）を他言語(Flashなど)に送る。 というようなことをする必要があります。 ◎HTMLソースコード例 --------------------------- <html> <head> <title>test</title> <script type="text/javascript"> function sayTime() { var targetDate = new Date(2010,10,18,19,7,5); var targetTime = targetDate.getTime(); return targetTime; } </script> </head> <body> <!--Flashを貼り付けるタグなど--> </body> </html> --------------------------- ◎上記HTMLに貼り付けるSWFの フレームに書く ActionScript 例 --------------------------- //externalクラスのインポート import flash.external.*; //JavaScriptからミリ秒数を取得 var jsTime:Number = Number(ExternalInterface.call("sayTime")); //取得した時刻のDateオブジェクトを作成 var myDate:Date = new Date(jsTime); var ye:Number = myDate.getFullYear(); var mo:Number = myDate.getMonth() + 1; var da:Number = myDate.getDate(); var ho:Number = myDate.getHours(); var mi:Number = myDate.getMinutes(); var se:Number = myDate.getSeconds(); //テキストフィールドでも用意して表示してみる createTextField("time_txt", 0, 10, 20, 300, 20); time_txt.border = true; time_txt.text = ye + "年" + mo + "月" + da + "日" + ho + "時" + mi + "分" + se + "秒"; --------------------------- ※要：Flash Player 8 以上用の SWF パブリッシュ 上記HTMLをブラウザで開けば結果を見ることができると思います。 ===または====== JavaScript の function を次のように変え， function sayTime() { return "2010,10,18,19,7,5"; } そして ActionScript の時刻取得部分を次のように変えても良いと思います。 ～以上略～ var jsTime:String = String(ExternalInterface.call("sayTime")); var arr:Array = jsTime.split(","); var myDate:Date = new Date(); myDate.setFullYear(arr[0]); myDate.setMonth(arr[1]); myDate.setDate(arr[2]); myDate.setHours(arr[3]); myDate.setMinutes(arr[4]); myDate.setSeconds(arr[5]); var ye:Number = myDate.getFullYear(); ～以下略～
補足
ありがとうございます。 ご投稿頂きましてから現在まで色々と試してみたのですが、 思うように動かすことが出来ません。。。 現在のコードを書いてみますので、 どこが間違っているかをご教授お願いできますでしょうか。 HTML --------------------------- <html> <head> <title>test</title> <script type="text/javascript"> function sayTime() { var targetDate = new Date(2010,10,18,19,7,5); var targetTime = targetDate.getTime(); return targetTime; } </script> </head> <body> </head> <body> <!--Flashを貼り付けるタグなど--> </body> </html> --------------------------- swfファイルActionScript --------------------------- //externalクラスのインポート import flash.external.*; //1フレームで停止 stop(); this.onEnterFrame = function(){ //現在のローカル時間を取得 var today:Date = new Date(); //現在の年を取得 var myYear = today.getFullYear(); //1971年1月1日から現在のミリ秒数を取得 var myTime = today.getTime(); //現在の日付を取得 var tdays = today.getDate(); //JavaScriptからターゲットのミリ秒数を取得 var jsTime:Number = Number(ExternalInterface.call("sayTime")); //取得した時刻のDateオブジェクトを作成 var myDate:Date = new Date(jsTime); //ターゲットのミリ秒数から現在のミリ秒数を引いた残り var timeLeft = targetTime - myTime; //残り時間のそれぞれ秒・分・時・日を割り出す var sec = Math.floor(timeLeft/1000); var min = Math.floor(sec/60); var hrs = Math.floor(min/60); var days = Math.floor(hrs/24); //秒が1桁なら2桁に変換 sec = string(sec % 60); if(sec.length < 2){ sec = "0" + sec; } //分が1桁なら2桁に変換 min = string(min % 60); if(min.length < 2){ min = "0" + min; } //時が1桁なら2桁に変換 hrs = string(hrs % 24); if(hrs.length < 2){ hrs = "0" + hrs; } days = string(days); var counter_days:String = days; var counter_hrs:String = hrs; var counter_mins:String = min; var counter_secs:String = sec; _root.time_days.text = counter_days; _root.time_hrs.text = counter_hrs; _root.time_mins.text = counter_mins; _root.time_secs.text = counter_secs; //カウントダウン終了時2フレームへ if(timeLeft <= 0 ){ delete this.onEnterFrame; gotoAndStop(2); } } --------------------------- となっています。 間違いだらけかも知れませんが、再度ご教授頂けましたら幸いです。
お礼
ありがとうございます。 元の動きと全く同じ動きを実装することが出来ました！！！ ここまでスクリプトをまとめられてることにビックリしました。。 > //その 残り を 秒 にしておく > var secLeft = Math.ceil(timeLeft / 1000); > ～以下 掲載して頂きました画像でポイントが掴めました。 私はそもそもの考え方を間違えていたようです。。 また、複数の画像まで掲載していただきまして重ねてお礼申し上げます。 「substr()」 は恥ずかしながら使用したことがなく、とても勉強になります。 BlurFiltan様のおかげでFlashがさらに好きになりそうです！（笑） 私の不躾な質問からこんな素晴らしいご回答を頂きまして、本当にありがとうございました。