| What's New |
| <TransitionMangerを使ったスライドショー> 2009_7_1 |
画像(写真)の切り替え時にエフェクトを付与する機能を持つ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ファイルの更新なしに、フォルダ内画像を入れ替えたり、増減させたりすることが可能になります。 トランジションで画像が八方向のいずれかへスライドする趣向も施しました。
活用編「画像枚数読み取り型スライドショー」を参照ください。 |
| <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 両方のものを載せています。 |