外部ファイルで内容を管理するFlashメニュー

Flashを起動せず更新可｜web creators 2008 7月号

バタバタしておりまして、すっかり更新をサボっております…。
少し古いネタで申し訳ないんですが、今回はweb creators 2008 7月号の「動くサイト、感じるサイトをつくる」という特集に紹介されていた「外部ファイルで内容を管理するスライドメニュー」を作ってみます。
ボタンテキストや読み込み画像を外部ファイルで管理しているので、更新も楽ですし、AS2.0を使用しているので、プログラムが苦手な方でも難しくないハズです。

何はともあれ、サンプルです。

続きを読む "外部ファイルで内容を管理するFlashメニュー"

ActionScript 3.0 で時計を作る３

ActionScript 3.0で始めるオブジェクト指向スクリプティング

前々回から紹介している「連載：ActionScript 3.0で始めるオブジェクト指向スクリプティング｜gihyo.jp … 技術評論社」というページを読み進めて、時計を完成させてみます。

…とは言っても、表示要素としてはほとんど完成しています。今回は、Stringクラスにより文字列を操作し、日付の表示方法を修正。そして、その処理を関数として定義するというコトをやってみます。

まず、日付のフォーマットを「YY/MM/DD」のように各２桁になるように文字列を操作します。
文字列の文字数はString.lengthプロパティで調べ、文字列から文字の一部を取出すには、String.substring()メソッドが使えます。これで、年の表示は下２桁を取り出すコトが出来ます。

次は月日のフォーマットです。１桁の場合は、先頭に0を付けて２桁にしたいのですが、条件判定をするのは少し面倒です。
サンプルでは、それぞれに100を加えて下２桁を取り出すという方法をとっています。これは簡単で使いやすいです。

これで年月日、それぞれを２桁で表示できるようになります。
ただ、今回はもう一歩踏み込んで、2桁より大きな数値は下2桁を取出し、2桁以下の数値は2桁の文字列に変換する関数を定義してみます。

ここまでをまとめたのが、下記のスクリプトです。MC:clock_mcの1フレーム目を下記のスクリプトに書き換えてみてください。

---------------------
// 時刻を調べる関数を定義
function xSetTime(eventObject:Event):void {
    // Dateインスタンスから時刻と日付のプロパティ値を取得
    var my_date:Date = new Date();
    var nHours:Number = my_date.hours;
    var nMinutes:Number = my_date.minutes;
    var nSeconds:Number = my_date.seconds;
    var nYear:Number = my_date.fullYear;
    var nMonth:Number = my_date.month+1;
    var nDate:Number = my_date.date;
    var nDay:Number = my_date.day;
   
    // 時計の針のアニメーション
    second_mc.rotation = nSeconds*6;
    minute_mc.rotation = nMinutes*6;
    hour_mc.rotation = nHours*30 + nMinutes/2;
   
    // 曜日の変換
    var day_str:String
   
    if(nDay == 1){
        day_str = "mon";
    }else if(nDay == 2){
        day_str = "tue";
    }else if(nDay == 3){
        day_str = "wed";
    }else if(nDay == 4){
        day_str = "thu";
    }else if(nDay == 5){
        day_str = "fri";
    }else if(nDay == 6){
        day_str = "sat";
    }else{
        day_str = "sun";
    }
   
    // 日付のフォーマットを設定
    var year_str:String = xSetDigits(nYear);
    var month_str:String = xSetDigits(nMonth);
    var date_str:String = xSetDigits(nDate);
   
    // 日付と曜日をTextFieldインスタンスに設定
    my_txt.text = year_str+"."+month_str+"."+date_str;
    my_txt2.text = day_str;
   
    // 数値を2桁の文字列に変換する関数定義
    function xSetDigits(n:int):String {
        var temp_str:String = String(n+100);
        var n_str:String = temp_str.substring(temp_str.length-2);
        return n_str;
    }
}

// イベントリスナーでxSetTime関数を呼び出す
addEventListener(Event.ENTER_FRAME, xSetTime);
---------------------

↑このFlashデータはこちらからダウンロードできます。

ActionScript 3.0 で時計を作る２

ActionScript 3.0で始めるオブジェクト指向スクリプティング

前回紹介した「連載：ActionScript 3.0で始めるオブジェクト指向スクリプティング｜gihyo.jp … 技術評論社」というページをもう少し読み進めてみます。

今回は、Dateインスタンスから日付のプロパティを取得して表示させます。日付プロパティを表示するには、TextFieldインスタンスを作成し、TextField.textプロパティに文字列を代入という手順で行います。
ただし、日付プロパティはNumber型ですが、TextField.textプロパティに代入するには、文字列に変換しなければなりません。なので、String()関数に引数としてその値を渡すという作業が必要になります。
気をつけるのはそこだけでしょうか。ある程度ActionScriptに慣れている方なら難しいコトはないと思います。

とりあえず、サンプルです。

続きを読む "ActionScript 3.0 で時計を作る２"

ActionScript 3.0 で時計を作る

ActionScript 3.0で始めるオブジェクト指向スクリプティング

ActionScript 3.0で何かを組んでみようと思ったのはいいのだが、ActionScript 2.0も心もとない僕の事、なかなか敷居が高く、何か参考になるモノはないかと思ていたトコロ、初心者にうってつけのページを見つけました！

「連載：ActionScript 3.0で始めるオブジェクト指向スクリプティング｜gihyo.jp … 技術評論社」というページなんですが、ここから始めるコトにします。
まずは、ActionScript1.0 or 2.0で誰しも一度は作ったコトがあるであろう時計をActionScript 3.0の文法で作ってみます。

とりあえず、サンプルです。

続きを読む "ActionScript 3.0 で時計を作る"

Tweenerで動きの制御

モーショントゥイーンはActionScriptで制御せよ

Flashと言えば動き。
…で、昔はタイムライン上でモーショントゥイーン機能を使って拡大縮小やら移動やら、アルファ値などを変えていました。Flash8からはフィルタ機能も加わり、ブラーでぼかすのも定番になりました。
しかし、モーショントゥイーンをActionScriptで制御するような流れになり、プログラムの知識のない人達は、かなり試行錯誤してFlashを作らなければならない時代に突入しています。
そんな中、１つの救いになろうとしているのが、このブログでも幾度となく紹介している「Tweener」ライブラリです。

（前置きが長くなりましたが…）ちょっとしたFlashの仕事があり、本格的にTweenerを使って、動きの制御を試みてみました。Tweenerの良いトコロは、モーショントゥイーンに限らず、様々なプロパティをトゥイーンでき、何より記述の仕方が非常にシンプルになるというトコロ！
今までだったら、プログラムの知識がなくて力業でやっていた作業が、たった数行でできてしまう。やはりコレは、使わない訳にはいかないです。

サンプルはこちら。
（スタートするには画面をクリックして下さい）

続きを読む "Tweenerで動きの制御"

ActionScriptライブラリ「Tweener」

話題のトゥイーンアニメーションライブラリ｜web designing 2008年9月

以前にこのブログでも「auサイトのようなアコーディオンメニュー」と題して、Tweenerを紹介しましたが、9月号のweb designing「Flash開発の新規軸 ActionScriptライブラリ」という記事で詳しく紹介されています。
ホントに便利なライブラリですね！工夫次第では何十行もスクリプトを書かなければならなかったアクションがいとも簡単に作れてしまいます！！
AS3.0用のライブラリというコトですが、ウチのFlash８、AS2.0環境でも動作してますので、前回のサンプルをちょっと手直しして再び紹介してみます。

サンプルはこんな感じです。
（パネルをクリックすると中央に移動します）

続きを読む "ActionScriptライブラリ「Tweener」"

Flashで携帯コンテンツ

ケータイdeヒーロー度チェック｜Flash Lite 1.1

先日、知り合いの方からFlashを使って携帯電話用コンテンツは作れないかと連絡がありました。とりあえずウチの開発環境（Flash8）でもFlash Lite 1.1としてパブリッシュできるようなので、試しに作ってみたのが今回のサンプルです。
最初はクイズを作ろうと思っていましたが、Flash Lite 1.1ではActionScriptがFlash4相当のモノまでしか使えないので、かなり制約があり、簡単なスクリプトでもエラーが出てしまったり…（もうちょっと勉強しないとな）。
不本意ながら簡素化して、一種の診断チェックのようなモノを作ってみました。

そのサンプルがこちら。

続きを読む "Flashで携帯コンテンツ"

Webサービスと組み合わせた天気情報

マッシュアップで作るお天気Flash｜web creators 2007年2月

このところ毎回登場している「1ランク上の技を身につけるFlashの強化書」でも同じようなFlashが紹介されていますが、機能的にはこちらの方が断然実用的なのでweb creators 2007年1月〜2月の「Flash Creative Technique」に掲載されていたFlashを紹介してみます。

今回は「Weather Hacks - livedoor 天気情報」のAPIから天気情報をXMLデータとして受け取り解析することになります。
しかし、Flashはセキュリティ対策上、異なるドメイン間でのデータをやり取りするコトができません。
そこで、間にphpファイルを入れ、データのやり取りを行う対象を同じドメインに属すという構成にしてしまいます。
※この時点でほとんど僕のキャパをオーバーしているのですが…。
詳しくは、web creators 2007年1月〜2月号をじっくり読んで理解して下さい。

百聞は一見に如かず、サンプルです。

続きを読む "Webサービスと組み合わせた天気情報"

XMLで管理するFlashフォトギャラリー

swfはインターフェイスのみ｜web creators 2006年6月

前回紹介した「1ランク上の技を身につけるFlashの強化書」でも紹介されていますが、端折られている部分もあるので、Flashにあまり明るくない方は、web creators 2006年6月の「Flash Creative Technique」に掲載されている方が理解できるかもしれません。興味があれば購入して読んでみても良いかと思います。

さて、今回は「XMLで管理するFlashのフォトギャラリー」です。XMLでデータを管理するので、更新は各xmlファイルを修正するだけです。つまり、swfはインターフェイスのみ担当するので、一度作ってしまえば触る必要がなくなります。

このブログでも以前に「XMLデータを使った画像ビューア」という記事で、同じようにXMLで管理する画像ビューアを紹介しましたが、今回紹介するサンプルの方がいろいろと拡張性があると思います。
ただその分、スクリプトも難しいので、どちらが使いやすいか？とは言えません。自分の知識と何をしたいか？に合わせて使ってもらえればと思います。

まずは、サンプルです。（コンボボックスからタイトルを選択して下さい）

続きを読む "XMLで管理するFlashフォトギャラリー"

スクリプトで制御するタイポグラフィックス

プログラムを勉強しないと始まらないな…｜Flashの強化書

仕事で結構Flashを作って来ましたが、実際に使っているスクリプトはAS1.0に毛の生えたようなモノで、効率的なプログラムとはほど遠く、もう１度はじめから勉強しなければ…と、常々思っています。
その度に配列やら関数やらオブジェクトやらリスナーやらなんやらかんやらの壁に阻まれ、なかなかに向上しないのですが…。
だいたい参考書を読んでいても何故だか急に難しくなりませんか？
どこかごっそり見落としたんじゃないだろうかと思う程、聞き慣れない言葉や書式がいきなりドカッと出てきてしまう。
正直お手上げである。
しかし、こんなんじゃAS3.0時代にとてもじゃないけど着いていける訳がないので、何度目かの悪あがき（？）を始めています。

さて、今回紹介するのは「１ランク上の技術を身につけるFlashの強化書」出てくるサンプルですが、いままで手作業でやっていたモーションタイポグラフィをスクリプトだけで制御してしまおうという代物です。

まずは、サンプルです。（startを押して下さい）

続きを読む "スクリプトで制御するタイポグラフィックス"

XMLデータを使った画像ビューア

Flashで更新が手軽なスライドショー

あるデザイナーさんからFlashで更新が簡単な画像のスライドショーができないかと訊かれ、右の本に載っていたサンプルを参考に試作品を作ってみました。
XMLファイルからデータを読み込むので、ほとんど更新の手間が要りません。

しかし、小手先だけのFlashじゃもう全然ダメですね。やはりもっとプログラム的なコトを勉強しなきゃ、これからは厳しいとつくづく思います。サイトがどんどんインタラクティブになってきてますからね。

そんなこんなでサンプルはこちら。

続きを読む "XMLデータを使った画像ビューア"

FlashでメールフォームCGI

Flash×フォーム＝簡単シミュレーター

仕事先からFlashで商品のカスタマイズをシミュレーションしながら注文がとれる仕組みができないモノか？と訪ねられ、少し考えてみました。
原理としては、Flash側でラジオボタンやMC（ムービークリップ）を使い、選択肢を設ける→そこで選択された値によって、商品画面を変更→選択された値はCGIを使って、サーバーに送信。（FlashからCGIへの連動はgetURL()を使用します）

…と、何となく仕組み自体は分かっていたんですが、実際に出来るかどうかはやってみないと分かりません。また、思いもしないトコロで不具合があって使い物にならない可能性もありますし。
確証が持てないコトに対して出来るとは言えない（営業マンには向いていない）性分なので、とりあえずサンプルを作ってみました。
インターフェイスもスクリプトも実際に使用するにはもっと改良しなければいけませんが、試作第１号としては、なんとか形になったのではないでしょうか。

そのサンプルがこちら。

続きを読む "FlashでメールフォームCGI"

ロールオーバーでフォーカスする表現

Adobeのサイトみたいにはできませんが…

今回も例によって１月号のWeb creatorsからの使えそうなテクニックを…。
AdobeのCreative Suite 3のサイトようにコンテンツにカーソルをロールオーバーすると、フォーカスされて拡大率・不透明度・ぼかし等が変更するといったFlashです。
本をパラパラ見ていた時は「すぐ作れそう」と思っていましたが、実際やってみると少しはまりましたね。初期設定で拡大率・不透明度・ぼかしを設定するんですが、どうやって設定するかで試行錯誤してしまいました。（Webデザイナーとして恥ずかしい話ですが…）

さて、サンプルです。

続きを読む "ロールオーバーでフォーカスする表現"

auサイトのようなアコーディオンメニュー

Flash モーションライブラリ｜Google Tweener

また今月のWeb creatorsからの使えそうなテクニックを…。
今度は、auのオフィシャルサイトで使われているようなFlashを使ったアコーディオンメニューが簡単に作れるモーションライブラリを紹介してみます。
Flashコンテンツ制作者なら、一度は作ってみようと思ったり、クライアントから要望された経験があるのではないでしょうか？でも実は、矛盾のでないようにスクリプトを組むのが思いの外難しかったりします。…僕も凝った仕組みは作れません。
しかし、Google codeの「Tweener」というライブラリを使えば、あら不思議？！　簡単に作れてしまいます。

サンプルはこんな感じです。

続きを読む "auサイトのようなアコーディオンメニュー"

ブラウザに合わせて背景画像が拡大縮小

最近、Flashの勢いが復活してきたようだ。一時期はSEOに弱いと言われ、Webにとって諸悪の根元のように嫌われていたのだが、映像を取り込むという伝家の宝刀を手に入れたコトによってWeb表現の可能性が飛躍的に上がった。その影響が大きいんだろう。やっぱり見ていて楽しい方が良いからね。
作り手にとっては、技術やセンスが今まで以上に問われるので厳しい時代だが、面白い時代に突入してきたと思ってちょっとワクワクだ。

さて、前置きが長くなってしまいましたが、今回はブラウザのサイズに合わせて背景画像は拡大縮小、しかし、その他の要素は各ポジションを保つというサンプルです。htmlの方でもエラスティックレイアウトという手法が出てきているけれど、ディスプレイ解像度がドンドン高くなっている現在、知ってて損はないスキルだと思います。

→サンプルを新規ウィンドウで開く
→このFlashデータをダウンロードする

下記のサイトに詳しく説明されていますので、一度ご覧ください。
FLASH-JP.COM - フォーラム｜背景は画面サイズで可変、メニューは固定にするには

多分、あまりFlashに明るくない方はデータを見ても作り方が分からないと思います。ポイントとしては、背景・メイン画像などの各MCは_rootのフレーム上には置かず、フレームアクションattachMovie();を_rootの1フレーム目に記述して読み込みます。

ストリーミングビデオプレイヤー

マルチメディアビューアで動画を表示（１）

よく使うAjaxにlightboxがあります。画像の拡大表示がポップアップウィンドウやFlashを使うより簡単にできるので、よく利用させてもらっています。
ただ、画像の替わりにswfファイルやhtml、動画などを表示できないかと思い、うってつけのAjax、thickboxを試したりも…。
しかし、９月号のWeb Designingにもっと使い勝手の良さそうなAjaxが出ていました。こちらも大変便利なようです。これを使えば、画像データはもちろん、swfファイルや動画ファイル、外部htmlやpdfまでなんでもビューアの中に表示させるコトができてしまう！…世の中、いろいろ便利なモノを作ってくれる人がいて感謝します。
…で、早速使ってみようという訳ですが、今回は動画の表示に絞り、準備段階として動画をFlashで扱えるflvファイルに変換するコトから始めてみます。

flvファイルの作り方、Flashに読み込んでの制御の仕方は右の本に詳しく出ています。まあ、Flash Player7／Flash MX2004の時代の技術ですので、このページでは詳しく説明しませんが、動画をFlashに取り込んで他のmcと同じように扱えるというのは画期的ですよね。
（以前かかわった仕事でサイトのトップページに自社のＣＭ動画を入れたいという案件があって、この方法を提案したんですが理解されず、納入先でwmvファイルを埋め込まれてしまいました。…残念。）
…という訳で、flvファイルを組み込んだ簡単なswfファイルを作ってみました。

サンプルはこんな感じです。

続きを読む "ストリーミングビデオプレイヤー"