What's New
<FLASHフォトビューアー14 -オールインワン型ギャラリー-> 2010_2_4
サムネイル表示、順送り(正、逆)、スライドショー、フルスクリーンなどの機能を備えた、いわば、オールインワンタイプのフォトビューアー(ギャラリー)の作成です。 切り替えで、複数のシリーズの表示にも対応しています。
活用編「FLASHオールインワン型フォトギャラリー 」を参照ください。
<FLASHフォトビューアー13 -サムネイル自動移動型-> 2010_1_13
サムネイルが一定時間間隔で自動的にスライド移動し、順送りになるタイプのビューアーです。 ボタン操作で、移動方向の左右切り替えが可能で、フルスクリーンへの切り替えもできるようにしました。 これは、前項「バナーがスライド移動して入れ替わるナビゲーション」を応用したものです。
活用編「FLASHフォトビューアー13 」を参照ください。
<バナーがスライドして入れ替わるナビゲーション> 2010_1_10
複数、もしくは、一個のバナーが一定時間間隔でスライド移動しながらステージで入れ替わるタイプのナビゲーションの作成です。 垂直、水平方向に移動するそれぞれの例を示しました。 広告バナーやメニューバーに応用できると思います。
活用編「バナーがスライド移動して入れ替わるナビゲーション 」を参照ください。
<背景が移動して切り替わるページ作り> 2009_12_28
ページの背景がボタン操作で連続移動して切り替わるタイプのページづくりです。 連続した複数の背景画が一枚の絵で描かれているような感じが出せるサイト作りに応用できると思います。 フルスクリーンにも対応するようにしましたが、最近普及しているワイド型のスクリーンの場合横伸びしてしまうので、背景の作り方に注意を要します。
活用編「背景が移動して切り替わるフルスクリーン対応ページの作成 」を参照ください。
<フルスクリーン対応FLASHフォトギャラリー> 2009_12_9
複数シリーズのサムネイル群を切り替え表示し、そのクリック、または、送り・戻りボタンのクリックで写真を切り替え表示するタイプのフォトギャラリー。 写真のサイズは均一でなくてよく、表示のレイアウトをフルスクリーンに対応させ、ウィンドウのサイズに応じて配置を相対移動させている。
活用編「フルスクリーン対応FLASHフォトギャラリー 」を参照ください。
<YouTube複数動画のサムネイル表示とそのクリックによる動画再生> 2009_10_29
You Tube の好みの動画(複数)を、そのVideoIDを使ってサムネイル画像を読み込み・表示し、そのクリックで動画をプレイヤーごと読み込み、表示させるプレイヤーの作成です。 You Tube用FLASH API を知らなくても作製可能です。
活用編「You Tube 動画のサムネイル表示とそのクリックによる動画再生 」を参照ください。
<フォトビューアー12> 2009_10_12
ブックタイプ(ノートを開くような感じ)のビューアーで、単に写真を表示させるだけでなく、絵本や解説書のような使い方もできると思います。 いわゆる手めくりのようなタイプでなく、クールな動きにしてみました。
活用編「フォトビューアー12−ブックタイプ− 」を参照ください。
<複数動画のサムネイル表示とそのクリックによる動画再生(FLVPlayback使用)> 2009_9_24
複数動画のサムネイルを表示し、それをクリックすることで選択・再生を行うタイプのビデオプレイヤー(FLVPlayback)です。 サムネイルは、FLVPlaybackをそれぞれに用意し、スクリプトでビデオソースを参照することで表示し(as3.0ではsource、as2.0ではcontentPath)、動画の数が多いときはスクロールで表示されるようにしています。
活用編「複数動画のサムネイル表示とそのクリックによる動画選択・再生 」を参照ください。
<FLVPlaybackカスタマイズによる動画プレイヤー(VIDEO PLAYER)> 2009_9_14
自前の再生、リプレイ、フォワード、バックワードボタン類でFLVプレイヤーを制御するお勉強です。 複数の動画をボタン操作で順送りにし、再生動画を選ぶことができます。 コンポーネントの部品(ボタン類、バー類)を併せて使用します。
活用編「FLVPlaybackカスタマイズによる動画プレイヤー(VIDEO PLAYER)(as3.0&2.0) 」を参照ください。
<TransitionMangerを使ったスライドショー2> 2009_8_18
TransitionManagerクラスを使って表示中のスライドを消し去ると同時に、その下層に読み込んだ次のスライドがTweenクラスによりフェイドインして登場するタイプのスライドショーです。
活用編「TransitionManagerクラスを使ったスライドショー2 」を参照ください。
<FLASHによる宝くじ番号の当り判定> 2009_8_11
2009年サマージャンボ宝くじを例に、番号をインプットして判定ボタンをクリックすると、当否が判定され、当たっていれば、その番号部分が赤で表示され(下4けたの賞が当たれば下4桁が赤い数字なる)、何等賞と金額が表示される。
応用編「宝くじの当たり判定 」を参照ください。
<Tweenクラスを使った文字列(テキスト)のエフェクト> 2009_7_16
このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。
Tweenクラスを使って、文字列の一文字一文字をスライドさせて表示したり、タイプライター形式で表示させたりするお勉強です。
応用編「Tweenクラスを使った文字列(テキスト)のエフェクト 」を参照ください。
<TransitionMangerを使ったスライドショー> 2009_7_1
このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。
画像(写真)の切り替え時にエフェクトを付与する機能を持つTransitionManagerクラスを用いたスライドショーで、画像切り替え時ごとに、トランジション効果とイージング効果のタイプをランダムに組み合わせてエフェクトを表現させるものである。
ちなみに、左の例では、TransitionManagerクラスで選択できる10個のtransition効果のうち8個(Blinds, Iris, Photo, PixelDissolve, Zoom, Fly, Squeeze, Wipe)をランダムに発生させている。 イージングは全てのタイプ(Back, Bounce, Elastic, Regular, Strong)を発生させている。
活用編「TransitionManagerクラスを使ったスライドショー 」を参照ください。
スクリプトは、as3.0とas2.0の両方を載せています。
<フォトビューアー11> 2009_6_2
送りボタンで表示を切り替えるタイプのフォトビューアー10と機能的には似ていますが、クリッカブルなサムネイル表示を表示して、このクリックでも切り換えがきくようにしています。 また、縦横の写真が混在した時の表示処理や、ロールオーバー時の色変換などの効果に趣向を凝らしました。
活用編「フォトビューアー11 」を参照ください。
<フォトビューアー10> 2009_5_19
複数シリーズの写真群をボタンで選択し、それぞれのシリーズ写真を、送りボタンで次の写真、戻りボタンで前の写真を表示させるタイプのシンプルなビューアー(ギャラリー)の作成です。 スクリプトは、as3.0とas2.0の両方を示しています。
活用編「フォトビューアー10 」を参照ください。
<フォトビューアー9> 2009_5_5
サムネイル群を、マウスの位置に反応する楕円軌道に乗せて動かし、そのクリックで拡大写真を表示させるタイプのビューアー
活用編「フォトビューアー9 」を参照ください。
<モーショントゥイーンでフォトギャラリー> 2009_4_4
サムネイルを配置し、そのクリックで拡大写真が表示されるタイプのフォトギャラリー(ビューアー)を、モーショントゥイーンとごく簡単なスクリプトを交えて作成するお勉強です。
モーショントゥイーン 特2 の以下のページを参照ください。
「モーショントゥイーンでフォトギャラリー 」:サムネイルクリックでフェードイン
「モーショントゥイーンでフォトギャラリー2 」:フェードイン + 拡大
「モーショントゥイーンでフォトギャラリー3 」:サムネイル移動、拡大、回転
<フォトビューアー8> 2009_3_23
複数シリーズの写真群をシリーズ毎に切り替えて楽しむタイプのフォトビューアーです。
活用編「フォトビューアー8 」を参照ください。
<フォトビューアー7> 2009_3_12
ロールオーバー効果で、グローフィルターを使ったフォトビューアーです。
活用編「フォトビューアー7 」を参照ください。
<プレゼンテーション_FLASH円グラフ> 2009_3_10
棒グラフ、折れ線グラフの続きとして、円グラフ作成のお勉強です。 中心と円周を結ぶ直線を移動して引きながら、動いたエリアを塗りつぶしていく手法を使いました。
実務編「プレゼンテーション_円グラフ 」を参照ください。
<プレゼンテーション_FLASH折れ線グラフ> 2009_2_25
4年近く前に棒グラフの作成についてお勉強しましたが、それ以来折れ線グラフもと思いつつ、これまで取り組まないままになっていました。 最近、新聞やTVで内閣支持率のグラフを眺めているうちに、ふと取り組みたくなりましたので、今回のお勉強とします。
実務編「プレゼンテーション_折れ線グラフ 」を参照ください。
<DisplacementMapFilterを使ってみる> 2009_2_14
なんとも馴染みにくいというか分かりにくいDisplacementMapFilterクラスを使うとどんなことが起きるのでしょうか、その一端を実感するのがこのお勉強です。
画像がひずんだり、揺れたりする効果や、虫めがね状に画像の一部が拡大する効果や、立体的な球が回ったりする効果などが、よくネットで紹介されています。 それぞれ大変面白いと思いますが、どうしてそんな変形が起きるのかと言うことになると、どうもピンときません。
そこで、非常に単純な赤と黒の2色グラデーションをMapFilterとして使って、どんな変形がおきるのかを実感することにします。
右のスライドショーは、やはりネットで紹介されていた、矩形画像を台形に変形させる効果を応用したものです。
応用編「DisplacementMapFilterを使ってみる 」を参照ください。
<画像のアップロードとサムネイル・拡大表示(phpとの連携)> 2009_1_30
FLASHの画面からブラウズしてHDD内の画像ファイルを選択し、phpを介してアップロード、サーバー保管する方法のお勉強です。
phpでアップロード画像をリサイズしてサムネイル画像を作成し、元画像とは異なるフォルダに保存ます。 今回のSAMPLEでは、FLASHの画面にサムネイル表示し、拡大ボタンのクリックで、元画像を表示します。
画像付きの掲示板(BBS)への応用や、サイトの画像の更新などに応用できると期待しています。
応用編 「画像のアップロードとサムネイル・拡大表示(PHPとの連携) 」を参照ください。
<画像入りテキスト(html)のスクロール> 2008_1_1
画像が挿入されたテキスト(html)を、UIScrollbarを使ってスクロールする方法のお勉強です。 既に学んでいるテキスト文のみのスクロール と違いがありませんが、htmlを読み込む手続と、スクロールバーのカスタマイズについて勉強します。
基本編「画像入りテキスト(html)のスクロール 」を参照ください。
2008_1_6 画像入り文章をFLASHで作成し、そのswfファイルをScrollPaneで表示させる方法を追加しました。
<マップビューアー> 2008_12_12
地図のような大きなシートで、そのままwebのページに載せられないようなものを、限られたスペース内で、ドラッグ移動したり、拡大・縮小しながら閲覧できるようにしたビューアーの作成です。 もちろん、google earth で代表されるような大掛かりな地図閲覧ソフトには及ぶべくもありませんが、ページの一部に配置するビューアーとして使えるのではと思い、今回のお勉強材料としました。
活用編「マップビューアー(簡易地図ビューアー) 」を参照ください。
<瞬く星と流れ星> 2008_12_8
星空に瞬く星。 そこに時々流れ星が落ちる。 よくありそうな題材のお勉強です。
応用編 「瞬く星と流れ星 」を参照ください。
<pixelDissolveを使ってみる> 2008_11_18
イメージとイメージを切り替えるときのトランジションに主に使われる BitmapData.pixelDissolve
メソッド(as2.0)の使い方のお勉強です
。
TransitionManagerクラスにも
pixelDissolveクラス があり、かなり使いやすいものになっていますが、メソッドの方も使い方によってはより楽しいものができるのではないかと思います。
右の例では、イメージを100分割し、それぞれが pixelDissove で次のイメージに変わっていくようにしたものです。 変化する位置をランダムにし、それぞれの変化に時間差をつけていますが、メソッドでは自前のスクリプトでやっています(クラスでは自動でできます)。
応用編 「pixelDissolveを使っててみる 」を参照ください。
<copyPixelsを使ってみる> 2008_11_13
BitmapData.copyPixels メソッドでどんなことができるのでしょうか。 今回のお勉強はその基本と応用例を提供するものです。 イメージの全体、もしくは、その部分の矩形を第2のイメージの設定部位に転写することができ、そのとき、第3のイメージの持つアルファチャンネルを付加することができるようです。
応用例の一つとして、イメージを分割し、その一つ一つに移動、回転、拡大・縮小などの動きをさせることができます。 左の例では、短冊状に切り分けた矩形それぞれを水平方向に回転させてみました。
応用編「copyPixelsを使ってみる 」を参照ください。
<ぼかし(blur)効果を使ったナビゲーション> 2008_10_29
サイトメニューや画像ビューアー・ギャラリー等用のナビゲーションとしてぼかしの効果を付与したものを作成するお勉強です。
活用編 「ぼかし(blur)効果を使ったナビゲーション 」 を参照ください。
<フォトビューアー3のサムネイルロールオーバー効果にもう一つの変化を加える> 2008_9_24
サムネイルのロールオーバーでは横方向の伸縮効果を付与していましたが、縦方向にも同時に伸縮するようにしたものを付け加えました。
ナビゲーション・メニューにも使えそうです。 活用編 「フォトビューアー3 」を参照ください。
<神経衰弱> 2008_9_22
カードゲームの定番「神経衰弱」を作成するお勉強です。 最近のお勉強の成果 「Matrixを使った変形2」と「重複しない乱整数の発生」の応用です。
応用編 「フラッシュ(FLASH)で神経衰弱 」を参照ください。
<フォトビューアー6> 2008_9_16
平面に並べられた(ここでは7列7行)サムネイルが、マウスに反応して上下左右に移動するタイプのビューアーで、サムネイルのクリックで画面全体に拡大写真が表示されます。
活用編 「フォトビューアー6 」を参照ください。
<切り分けられた部分画像がランダムに消えていくスライドショー> 2008_9_1
画像を小さなスライスに切り分け、それが位置ランダムで順番に消えていき、消えた部分の下から次の画像が見えてくるタイプのスライドショーの作成です。 BitmapData
を使った画像の切り分け、重複しない乱整数の発生などを応用した作品です。
活用編 「切り分けられた小部分画像がランダムに消失するスライドショー 」を参照ください。
<重複しない乱(整)数の発生とムービークリップの整列> 2008_8_17
ある範囲の連続した整数を、順不同(ランダム)に重複なしに発生させ、これをもとに正方形のムービークリップを縦横に整列させることのお勉強です。 サムネイルなどをランダムな順番で表示させるなどの使い道がありそうです。 ここでは、顔当てクイズ的なものを作ってみました。
応用編「重複しない乱(整)数の発生とムービークリップの整列 」を参照ください。
<BlurFilterを使って画像切り替え> 2008_8_4
FLASH8以降に追加された機能の一つとして画像等にぼけ味を付与するBlurFilterクラスがあります。 この機能はモーショントゥイーンとしても付与でき、これについては、「フィルター効果を使ったモーション 」のぼかしの応用で既に勉強しました。
今回は、サイン関数を使ってぼかし量に振幅(-50〜+50)を持たせ、+側が最大になったとき(ボケが最大になったとき)画像を入れ替えるタイプのスライドショーを作成してみました。
左の例は、下のMatrixを使った例と同様、マウスオーバーに反応するように作ったものです。
この例のほかに、外部写真ファイルを切り替えごとに読み込むタイプのスライドショーを、先日槍ヶ岳に登った時に撮った写真を素材に作成した例を載せています。
応用編「BlurFilterを使って画像切り替え 」を参照ください。
<ムービークリップの変形にMatrixを使ってみる(2)> 2008_7_15
「(49)ムービークリップの変形にMatrixを使ってみる 」でMatrixの使い方の入門編を勉強しましたが、今回は第2弾としてその応用例を勉強したいと思います。
ここで示す例は、写真を水平方向に連続反転させ、しかも同時に傾斜効果を付与することで、y軸を中心に回転している写真を斜め上からみているような効果を出しています。 この効果は、モーショントゥイーンの「(6)反転 」で示しましたように、タイムラインにモーショントゥイーンを作成することで達成できますが、数多いムービークリップにこの効果を付与することは大変な作業となります。 今回のようにMatrixを使ったスクリプトでこれを行うとずっと楽になることは言うまでもありません。
入れ替わりながら回転するイメージのロールオーバーで、こちら向きに止めるとともに、イベントを起こすことも可能(ここでは作曲家の名前を表示)であり、また、クリック時のイベント処理も付けることができます。 クリック時に、たとえばこの例の場合は、作曲家の詳細を記述したページを開くようにするなどのことができます(ここではその機能はありません)。
応用編「(49)ムービークリップの変形にMatrixを使ってみる(2) 」を参照ください。
<FLASHフォトビューアー5> 2008_7_12
複数シリーズの写真を表示させるメニューアイコンをドラッグ&ドロップ可能にし、リリースと同時にドロップされた位置からサムネイルが下方に回転・連続反転しながら移動し指定位置に止まるが、上下の連続反転は引き続き、続けておく。 そのサムネイルがクリックされると、拡大写真が表示され、クリックされたサムネイルだけが反転をやめる。 というフォトビューアー(ギャラリー)を北海道の大雪山、十勝岳で最近撮った写真を素材に作成しました。
活用編 「FLASHフォトビューアー5 」を参照ください。
<FLASH/php連携による簡易掲示板(BBS)> 2008_6_4
Flashで作る掲示板です。 好みによってもっとデザインをこったり、ダイナミックにもすることができるのもFlashで作るメリットだと思います。 ここで掲げる例は、非常にシンプルなものですが、基本となるスクリプトを追いかけるには丁度いいかなと思います。 これをベースに発展させていただければと思っています。
実務編 「FLASH/php連携による簡易掲示板(BBS) 」を参照ください。
<FLASH/php連携によるショートダイアリー(日記)> 2008_5_17
FlashのDateChooserで先にカレンダーを作成しましたが、今回はこのカレンダーと日記記述用のテキストフィールドを組み合わせて、簡単な日記がつけられるようなものを作成してみました。 機能的には非常にシンプルなものですが、Flashとphpの連携のさせ方の基本的なスクリプトを勉強するにはよい題材かなと思います。
実務編 「FLASH/phpの連携によるショートダイアリー 」を参照ください。
<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ファイルの更新なしに、フォルダ内画像を入れ替えたり、増減させたりすることが可能になります。 トランジションで画像が八方向のいずれかへスライドする趣向も施しました。
活用編「画像枚数読み取り型スライドショー 」を参照ください。