What's New
<FLASHでスロット(SLOT)ゲーム> 2008_5_2
先に記載した「SLOT(スロット)型「おみくじ」の延長として作成したもので、3列の数字が下方に流れるのを、ストップボタンで止め、3つが揃うかどうかと言う非常にシンプルなスロットゲームです。
応用編 「FLASHでスロットゲーム 」を参照ください。
<FLASHフォトビューアー4> 2008_3_29
表示しようとする写真枚数が多い時のサムネイル表示の一つとして、一画面にサムネイルを並べ、画面をスクロールすることによって、すべてのサムネイルを選択できるようにしたタイプのフォトビューアです。 拡大写真が表示された画面で、順送りに拡大写真が切り替えられるようなボタン機能も付与しました。
活用編 「FLASHフォトビューアー4 」を参照ください。
<SLOT(スロット)型「おみくじ」> 2008_3_17
サイトに軽いお遊びを置きたいときの一つとして、FLASHによる「おみくじ」を作ってみました。 SLOT形式で、上から流れ落ちる図柄を見ながら、stopボタンをクリックすると「吉」などの運勢が減速しながら停止するものです。 非常にシンプルな作りですが、これをベースに工夫すれば、楽しいものが出来上がると思います。
「大吉」で止まった時だけ、ちょっとした図柄を表示させています。
応用編 「SLOT(スロット)型 「おみくじ」 」を参照ください。
<FLASHフォトビューアー3> 2008_3_7
画面中央に複数のサムネイル写真を横方向のサイズを縮めて並べておき、ロールオーバーされたサムネイルを本来の大きさに、左右のサムネイルを離れる方向に順番に小さく表示させる効果を付与したフォトビューアーです。 サイトメニューにも応用できると思います。 活用編「FLASHフォトビューアー3 」を参照ください。
<FLASHカレンダー(DateChooserのカスタマイズ)> 2008_2_20
FLASHコンポーネントに「DateChooser」があり、カレンダー作りに大変便利です。 そのままD&Dすれば出来上がりと言う手軽さです。 それでは、ちょっと芸がありませんので、見た目をカスタマイズすることにしました。
さらに、このコンポーネントは、カレンダー内の日付をクリックすると、その日付データを取得することができますので、その日の月齢を計算し、その月齢に相当する月の満ち欠け写真を表示するようにしてみました。
基本編 「FLASHカレンダー 」を参照ください。
<FLASHフォームメールas3.0Lite(cgiでsendmail)> 2008_2_6
actionscript3.0による「フォームメールの作成 」で汎用性を考えたscriptを先に作成しましたが、もっと軽いものを、と言うか、必要な項目のみを作成したいとの要望が寄せられましたので、ステージにあらかじめ項目ラベルとインプット用のテキストフィールドを配置し、必須項目の記入漏れチェック、必要な項目の正規表現による入力書式チェックを行うタイプのフォームメールを作成してみました。 sendmail
はcgiを使っています。 前回、as2.0によるフォームメールを勉強していますが、全体のflashをどちらのversionで作るかによって使い分ければよいと思います。
実務編 「FLASHフォームメールLite (as3.0) 」を参照ください。
<FLASHフォームメール(cgi でメール書式チェック、sendmail) as2.0> 2008_2_1
「FLASHフォームメール(cgiのsendmail使用) 」ではメールチェックにjavascriptを使っていましが、ここでは、cgiでメールチェックを行い、書式が不正であったらFLASH側でその旨を表示するタイプに変更しました。 javascriptを使用しない分すっきりしたと思います。
実務編 「FLASHフォームメール(cgi でメール書式チェック、sendmail) 」を参照ください。
<ロールオーバーで拡大し他のバーがスライド移動するナビゲーション> 2008_1_14
音楽配信サイト「モーラウイン(mora win)」のTopページに使われているランキング表示ナビゲーションと同じようなものを作成してみました。 穏やかな動きですので、メニューやギャラリーなどに安心して使えそうです。
活用編「ロールオーバーで拡大し他のバーがスライドするナビゲーション 」を参照ください。
<フォーム用チェックボックスの動的作成> 2008_1_2
アンケート調査などに使われるチェックボックスの作成です。 先に作成した、テキストフィールド、コンボボックス、ラジオボタンなどと組み合わせてフォーム作成に有用なものとなればと思います。 actionscript3.0での作成です。
実務編 「フォーム用チェックボックスの動的作成 」を参照ください。
<FLVPlayback(as3.0)で動画再生> 2007_12_31
複数の外部 flv ファイルをコンボボックスの題名をクリックすることで選択すると再生が開始するタイプのビデオプレイヤーの作成です。 さらに、複数のファイルを自動で連続的に繰り返し再生するタイプについても作成してみます(左の作例)。
活用編 「FLVPlayback(as3.0)で動画(ビデオ)再生 」を参照ください。
なお、閲覧にはFlashPlayer9.0以上が必要です。
左の作例は以下のサイトから動画を引用しています。
http://www.puntopower.com/
音声は消してあります(volume 0)。
<フォームメールの作成> 2007_12_28
actionscript3.0 の正規表現処理機能を使って入力チェックを行い、必須項目の指定、未記入チェック機能を付加したフォームメールです。 cgi
の sendmail を使うケースと、クライアントのブラウザを立ち上げるケースについて作成してみました。 以前、javascript と連携させた同様のフォームメールを解説しましたが、js
を使わずに入力チェックができるようになります。 cgi を使わないsenmail が今後の課題です。
実務編 「フォームメールの作成 」を参照ください。
<フォーム用コンボボックス、ラジオボタンの動的作成> 2007_12_18
選択項目(ラベル)を配列データとし、それを引数として授受するswf、クラスファイルの組み合わせでコンボボックス、ラジオボタンのスクリプトによる作成方法です。 actionscript
3.0による作成です。
実務編 「フォーム用コンボボックスの動的作成 」
実務編 「フォーム用ラジオボタンの動的作成 」
<フォーム用テキストフィールドの動的作成> 2007_11_30
actionscript3.0で実装された正規表現パターンチェック機能を利用し、インプット文の入力チェックを兼ね備えた、テキストフィールドの動的作成クラスファイルを作ってみました。 テキストフィールドの属性、テキストのフォーマットについては、引数を配列にして受け渡すようにしています。 まだ、フォームとしては完成した段階ではありませんが、テキストフィールドの作成用として汎用的に使えるのではないかと思われます。
実務編 「フォーム用テキストフィールドの動的作成 」を参照ください。
<FLASH MP3プレイヤー2> 2007_10_31
コントロール部にコンポーネントのMediaDisplayとMediaControllerを使い、Listコンポーネントで複数曲の曲目を表示し、そのリストから選択された曲を再生すると同時に、テキストボックスに曲に関するデータを表示するタイプのMP3プレイヤーです。 データはxmlファイルに納め、Flashに読み込むタイプにしました。
応用編「MP3プレイヤー2(MediaController、List、xml を使う) 」を参照ください。
<FLASH MP3プレイヤーの手直し> 2007_10_4
活用編 「MP3プレイヤー 」のスクリプト及びボタン類切り替え方法を手直しし、分かりやすくしました。
<ムービークリップの変形にMatrixを使ってみる> 2007_10_6
「flash.geom.Matrix クラス」はムービークリップや、ビットマップデータの変形に使われますが、今回は、その使い方の取っ掛かりとして、ムービークリップに適用する方法のお勉強です。
広島カープの球団マスコットSlyly君に登場願って、彼をSwing運動で酔わせたり、回転させながら勉強することにします。
応用編 「ムービークリップの変形にMatrixを使ってみる 」を参照ください。
なお、本サイトで以前勉強した、活用編 「BitmapData クラスを使って画像をスライス 」では、ビットマップデータから一部の四辺形を切り取るときにMatrixを使っていますので、改めてここで紹介しておきます。
<FLASHによる写真の出し入れ(7)> 2007_9_7
スクリプトを使わない写真の出し入れ第7弾は、「マスク効果」を使った切り替えと、 「塗の変形ツール」で施した変形を「シェイプトゥイーン」で変化させたトランジット効果を加えた出し入れです。
比較的簡単な操作で、変化に富んだ効果を見せることができる手法だと思います。
モーショントゥイーンの写真の出し入れ(7) を参照ください。
<FLASHフォトビューアー2> 2007_8_24
ステージ一杯に並べられたサムネイル(SAMPLEは5列5行)がマウス位置によって大きさが変化するようにしつらえておき、サムネイルがリリースされると、ほかのサムネイルはすべて消え、リリースされたサムネイルだけが残ります。 このサムネイルは、マウスをフォローして動き、リリースされると、画面いっぱいの大きさに拡大します。
活用編「FLASHフォトビューアー2 」を参照ください。
<FLASH動画(ビデオ)ビューアー> 2007_8_8
複数の動画をサムネイルで表示し、ロールオーバーで再生開始、リリースで拡大表示するタイプとビューアーです。
活用編「FLASH動画(ビデオ)ビューアー 」を参照ください。
<FLASHでマウストレイルとフォトビューアーとの組合せ> 2007_6_27
世界4都市の夜景を切り替え見せるビューアー。 切り替え画面に星と、文字列(都市名)がマウスを追いかける味付けを施しました。
写真の代わりに、ページを切り替えるようにすれば、メインメニュー画面にも応用ができそうです。
活用編「マウストレイルとフォトビューアーとの組合せ 」を参照ください。
<FLASHでVista 3Dフリップ風ウインドウビューアー(アルバム)> 2007_6_22
Windows Vista エアロ一環の売りもの「3Dフリップ」を真似したウインドウ(ページ)ビューアーを作って、花のアルバムに使ってみました。 ページ(ウインドウ)の動きは、ぎこちないですが、多少は気分が出るのではないかと思われます。
活用編 「FLASHで3DFlip風アルバム 」を参照ください。
<フォト ビューアー> 2007_5_5
並んでいるサムネイルを選択してクリックすると、サムネイル群が消え、ステージいっぱいに拡大写真が表示されるタイプのフォト ビューアー。 ステージのどこかをクリックすると、元の状態に戻る。
活用編 「フォトビューアー 」を参照ください。
<FLASHによる写真の出し入れ(6)> 2007_4_20
スクリプトを使わない写真の出し入れ第6弾は、第5弾の手法を応用し、FLASH上で写真を短冊状に分割し、これに回転エフェクトを付与したものです。
第5弾とはまた違った趣が生まれたので、再度のお勉強としました。
モーショントゥイーンの「写真の出し入れ(6) 」を参照下さい。
<Flash で旅行アルバム> 2007_4_6
旅行先のマップ(ここでは、GoogleEarth の3DMap)に訪問地を配置し、ここのクリックで訪問地毎にサムネイル群を発生させ、サムネイルクリックで拡大写真を表示するタイプのアルバム(フォトギャラリー)を作成します。
活用編 「FLASHで旅行アルバム 」を参照ください。
<Flash Lite 1.1(携帯・ケータイ)でアナログ時計> 2007_3_21
定番のアナログ時計を作成し、それを、gifアニメーション、モーショントウイーンと組み合わせて表示します。
携帯編 「FlashLite1.1 でアニメつきアナログ時計の作成 」を参照ください。
<FLASHによる写真の出し入れ(5)> 2007_3_5
スクリプトを使わない写真の出し入れ第5弾は、FLASH上で、画像(写真)をスライス (SAMPLEは12分割)し、それぞれにモーショントウイーンを施して、その集合として写真を登場、退場させるものである。
画像スライスの方法は、描画した12個の矩形シェイプ(レイヤーに分割され、4列3行に並べられたもの)を、同じ大きさの写真を分解してできたシェイプで塗りつぶす手法を用いている。
モーショントゥイーンの「写真の出し入れ(5) 」を参照下さい。
<BitmapData.copyChannel を使って画像に透明グラデーションを施す> 2007_2_21
写真などの画像そのものに透明グラデーションをかけると、背景がグラデーションで透けて見える画像が出来て面白いのではないかと考え、今回のお勉強とした。 BitamapData
クラスの copyChannel を使うと、アルファチャンネルをBitmapData オブジェクトにコピーできるので、こういったことが出来る。
活用編 「BitmaData.copyChannel を使って画像に透明グラデーション 」を参照下さい。
<BitmapDataクラスを使って画像をスライス> 2007_1_28
画像をいくつかの部分に切り分ける(スライスする)には、一般にはFireWorks などの画像処理ソフトを使うが、FRASH のスクリプトで切り分け、そのままスライスをムービークリップとして扱えればいろいろ面白いことが出来そうです。
ということで、今回は、BitmapData クラスを使ったお勉強です。
BitmapDataクラスで切り分けたスライスには、いろいろなアクションを付与できますが、今回は移動、静的回転、アルファ、拡大・縮小などを付与した例です。
スライスへの切り分けは、いろいろな可能性を感じさせます。
活用編 「BitmapData クラスを使って画像をスライス 」を参照下さい。
<画像枚数読み取り型スライドショー> 2007_1_22
自動再生のon/off、自動再生間隔指定、次へボタン、戻るボタンなどの機能がついたベーシックなスライドショーであすが、画像フォルダーに連番で画像を格納しておけば、その枚数を読み取るので、swfファイルの更新なしに、フォルダ内画像を入れ替えたり、増減させたりすることが可能になります。 トランジションで画像が八方向のいずれかへスライドする趣向も施しました。
活用編「画像枚数読み取り型スライドショー 」を参照ください。
<Flash Lite 2.0(携帯・ケータイ)でサイトメニュー> 2007_1_17
携帯サイトのメニューの作成方法と、リンク先ページとして、ファイル内フレームに飛ぶ方法と、別ファイルに飛ぶ方法のについて、
解説しました。
携帯編「FlashLite2.0でサイトメニューの作成 」を参照下さい。
<Flash Lite 2.0(携帯・ケータイ)で画像ビューアー> 2007_1_6
画面一杯に配置されたサムネイル画像を、4方向キーで移動する矩形で選択、決定ボタンが押された画像を拡大表示する。
エフェクトを工夫したり、ナビゲーションに利用したり、いろいろ応用出来そうです。
携帯編「FlashLite2.0で画像ビューアー 」を参照下さい。
<Flash Lite 2.0(携帯・ケータイ)で画像ギャラリー> 2007_1_4
サムネイル表示の画像を十字左右キーまたは選択ソフトキーで左右に送りながら選択し、決定ボタンで表示するタイプのギャラリー
携帯編「FlashLite2.0で画像ギャラリー 」を参照下さい。
<Flash Lite 2.0(携帯・ケータイ)でアナログ時計(時刻アニメ付き)> 2007_1_1
1時、2時などの時刻になったらアニメーションが出現する、アナログ時計(Flash Lite 2.0対応版)
携帯編「FlashLite2.0でアナログ時計(時刻アニメ付き) 」を参照下さい。
<Flash Lite (携帯・ケータイ)でスライドショー> 2006_12_25
FlashLite2.0対応版。 外部画像ファイルを読み込むタイプのスライドショー。 画像切り替えは、携帯電話の決定ボタンを押すだけ。
携帯編 「flashliteでスライドショー(Lite2.0向け) 」を参照下さい。
Flash Lite 1.1対応版。 外部画像ファイル(swf)読み込み型。 右へボタン、左へボタンで切替型。
携帯編 「flashliteでスライドショー(Lite1.1向け) 」を参照下さい。
<Flash Lite (携帯・ケータイ)でストップウオッチ・タイマー> 2006_12_21
FlashLite2.0版で、ストップウオッチとタイマー複合型の作成です。
携帯編 「FlashLiteでストップウオッチ・タイマー 」を参照下さい。
<Webサイト作成例(2)の作り方> 2006_12_19
2006年3月に、Webサイト作成例として化粧品販売サイトの例を公開しましたが、その作成法のお勉強はまだ出来ていませんでした。と言うか、私がさぼっていたからなのですが、催促のカキコを頂きましたので、今回、急いで作成しました。 遅まきながら、ここに公開いたします。 実務編 「サイト作成例(2) 」を参照下さい。
<Flash Lite (携帯・ケータイ)でデジタル時計> 2006_12_16
携帯電話用サイトと向け、あるいは携帯画面で楽しむためのFLASH作りのお勉強第1弾は、定番のデジタル時計です。 例えば、自作のFLASH待ち受け画面を自分だけで楽しむのも、あるいは、友人に提供するのもいいかなと思い、その作り方の基本を解説しました。
おいおい、サイト作りを考えたFLASH作りのお勉強を重ねていきたいと思っています。
左の作例の解説は、携帯編 「FlashLite でデジタル時計 」 を参照下さい。
スクリプトは、Flash Lite1.1、Flash Lite2.0 両方のものを載せています。
<FLASHでデジタル時計、アナログ時計、ストップウオッチ、タイマー> 2006_12_8
時間取得の基本機能を使って、定番の時計を作成するお勉強です。
基本編 「デジタル時計・アナログ時計 」、「ストップウオッチ、タイマー 」 を参照下さい。
<画像クリックで拡大・縮小するFLASH画像ギャラリー(2007年水墨画カレンダー)> 2006_12_1
サムネイルで12ヶ月分が表示されている縮小画像をクリックすると、その月のカレンダーが表示される。 更に、そのカレンダー部をクリックすると、水墨画の部分だけが拡大表示され、もう一度クリックすると、元のカレンダー表示に戻る。 こういった画像ギャラリーを、雲遊さん(三戸博成さん) 作成の水墨画カレンダーを素材に作成しました。 スクリプト(script)は、クラスを使った記述にしています。 活用編「クリックで画像が拡大・縮小する画像ギャラリー 」を参照下さい。
<FLASHによる写真の出し入れ(4)> 2006_11_23
写真の出し入れシリーズ第4弾は、ブラインドタッチのシャッターが開閉して写真を切り替えるタイプのスライドショーです。 ここでは、オートマチックに切り替えていますが、もちろんボタン操作で切り替えるタイプに拡張することもできます。
また、サムネイルのロールオーバー、ロールアウトのエフェクトにも使えそうです。
モーショントゥイーンの「写真の出し入れ(4) 」を参照下さい。
<ボタン操作で画像が拡大・縮小・スライドするFLASHビューアーの作成> 2006_11_11
googlemapのような地図ソフトとまではいかないまでも、表示写真をボタン操作でスライド(移動)させたり、拡大・縮小させたりする機能を付与したビューアーの作成です。 活用編「拡大・縮小、スライド機能付きビューアー 」を参照下さい。
<FLASHとCGI の sendmail を組み合わせたフォームメール> 2006_10_11
これまで、cgi が要らないフォームメールを勉強してきましたが、今回は、メール送信だけcgi のsendmail 機能を使うヴァージョンのお勉強です。 cgi
が使えるサーバー環境ならば、sendmail を使った快適なメール送信を行うことが出来ます。 また、cgi を使わないヴァージョンと同様、必須項目未記入チェックとe-mail
アドレスの書式チェックはFLASHで行い、最後にサーバーのsendmailを使うという方式をとりました。 実務編 「FLASHによるフォームメール(cgiのsendmail使用) 」、及び、「FLASHとCGIとのやりとり(交信、連携)の仕方 」を参照下さい。
<FLASHによるCGI不要フォームメール(1)、及び、(2)> 2006_9_22、 2006_10_8
FLASH画面のダイナミックテキストボックスにWeb上でインプットされたテキスト文を、メーラーを介して、希望するメールアドレスに送信するタイプの簡易型フォームメールです。 実務編「FLASHによるCGI不要フォームメール (1)」を参照下さい。 さらに、FLASHで必須項目未記入チェック機能とe-mail アドレス書式チェック機能を盛り込んだ ver.2 「FLASHによるCGI不要フォームメール(2) 」も参照下さい。
なお、ver.2においては、e-mailチェックにjavascriptを使っている。「ExternalInterFaceを使ったFLASHとjavascriptの連携 」に、連携の仕方をまとめましたので、そちらも参照してください。
<xml ファイルデータ読み込み型ショッピングカート(買い物かご)> 2006_9_19
商品データ(商品名、コード、価格、色、サイズ、説明書き、画像ファイルパスなど)をxml に記載しておき、これをFLASHから呼び出して、商品注文画面を構成すると、動く画像を表示できたりして、商品によっては有効かな、と考えて勉強することにしました。 まだ、本格的なものには仕上がっていませんが、ひつの提案として参考になればと思います。 実務編「xml データ呼び出し型ショッピングカート(買い物かご) 」を参照ください。
<xml ファイルデータ読み込み型スライドショー> 2006_9_10
写真のファイル名、サイズ(幅、高さ)などのデータを
xml ファイルに記述しておき、そのデータをFLASHで呼び出して表示させるタイプのスライドショーです。
いろんなアプリケーションでxml ファイルのデータを活用するようになってきました。 FLASHにおいても、一つのオブジェクトに対して複数の属性データを格納できる xml
はいろいろ活用できるのではないかと思われます。
活用編「xml データ呼び出し型スライドショー 」には、自動再生の他に、ボタンの手動操作で順送りすることも出来るタイプの例を解説しています。
また、xml の記述例と、xml データのFLASHからの呼び出し方を、「xml データをFLASHで活用 」にまとめました。 詳しいxml に関する解説は他のサイトを参照いただくとして、必要最小限の知識として参考にしていただければと思います。
<写真の出し入れ(1)(2)(3)> 2006_8_12
写真を画面に登場させたり退場させたりするのは、ウェブのページ作りには欠かせないFLASHのテクニックですが、モーショントウイーンの復習をかねて特集として勉強することにしました。 解説は入門者がそのままトレースすればできあがるように心がけたつもりです。
写真の出し入れ(1) では、フェイドインや移動など、
モーショントウイーンの基本機能を使う勉強をします。
写真の出し入れ(2) では、基本機能のいくつかを組み合わせた例を勉強します。
右に示した作例 SAMPLE1です。
写真の出し入れ(3) 作例 SAMPLE2です。