What's It?
<写真の出し入れ講座(1)(2)(3)>
写真を画面に登場させたり退場させたりするのは、ウェブのページ作りには欠かせないFLASHのテクニックです。
そこでモーショントウイーンの復習をかねて特集として講座とすることにしました。 解説は入門者がそのままトレースすればできあがるように心がけたつもりです。
最初はフェイドインや移動など、モーショントウイーンの基本機能を使います。
写真の出し入れ(1) を参照ください。
次に基本機能のいくつかを組み合わせた例を講座にしました。右に示した作例 SAMPLE1です。写真の出し入れ(2) を参照下さい。
最後は、写真の出し入れ(3) 作例 SAMPLE2をご覧下さい。
※それから「FLASH講座リスト」にもありますが、モーショントゥイーンに関しましては、基礎から学びたい方に次のページをご用意しております。ご利用ください・・・ 直線運動 、曲線移動 、イージング 、カラー属性 、回転 、反転 、拡大・縮小
<FLASHによる写真の出し入れ講座(4)>
写真の出し入れシリーズ第4弾です。
ブラインドタッチのシャッター が開閉して写真を切り替えるタイプのスライドショーを見ていただきます。
ここでは、オートマチックに切り替えていますが、もちろんボタン操作で切り替えるタイプに拡張することもできます。 また、サムネイルのロールオーバー、ロールアウトのエフェクトにも使えそうです。
題材は美しいバラ です。モーショントゥイーンの「写真の出し入れ(4) (バラ) 」を参照下さい。
<FLASHによる写真の出し入れ講座(5)>
スクリプトを使わない写真の出し入れ第5弾です。
FLASH上で、画像(写真)を12分割にスライスします。
そしてそれぞれにモーショントウイーンを施すのです。
最後に分割した写真を合体させ登場させ、締めくくりに退場させます。
画像スライスの方法は、描画した12個の矩形シェイプ(レイヤーに分割され、4列3行に並べた赤いバラ )を用います。
それを同じ大きさの写真で分解してできたシェイプ(白いバラ )で塗りつぶします。
詳しくは、モーショントゥイーンの「写真の出し入れ(5) (赤いバラ白いバラ) 」を参照下さい。
<FLASHによる写真の出し入れ講座(6)>
スクリプトを使わない写真の出し入れ第6弾です。
ここでは第5弾の手法を応用し、FLASH上で写真を短冊状に分割します。
そしてこれに回転エフェクトを付与しました。
第5弾とはまた違った趣が生まれました。
モーショントゥイーンの「写真の出し入れ(6) (花) 」を参照下さい。
<FLASHによる写真の出し入れ講座(7)>
第7弾はスクリプトを使わない写真の出し入れです。
「マスク効果」を使った切り替えと、 「塗の変形ツール」で施した画像を
「シェイプトゥイーン」で変化させます。
そしてさらにトランジット効果を加えて出し入れしました。
比較的簡単な操作ですが変化に富んだ内容を見せることができます。
それでは、モーショントゥイーンの写真の出し入れ(7) を参照ください。
<フォト ビューアー講座>
サムネイルの中からお好きな画像を選択しクリックしてください。
すると他の全ての画像が消えて、ステージいっぱいに写真が表示されます。
元の状態に戻すには、ステージの周辺をクリックします。
ここでは、広島の平和コンサート を角度を変えてご覧いただきます。
それでは活用編 「フォトビューアー (平和コンサート) 」を参照ください。
<FLASHフォトビューアー2講座>
サムネイル(SAMPLEは5列5行)をステージ一杯に並べました。
マウスをのせると大きさが変化するようにし、サムネイルがリリースされると、他のサムネイルはすべて消えます。
このサムネイルは、マウスをフォローして動き、リリースされると、画面いっぱいの大きさに拡大します。
ここでは子供たちが大好きなカブト虫 を使いました。活用編「FLASHフォトビューアー2 (カブト虫) 」を参照ください。
<FLASHでマウストレイルとフォトビューアーとの組合せ講座>
世界4大都市の 夜景 を切り替え見せるビューアーです。
切り替え画面に星 と、都市名 (文字列)がマウスを追いかけるようにしました。
写真の代わりに、ページを切り替えるようにすれば、メインメニュー画面にも応用できそうです。
活用編「マウストレイルとフォトビューアーとの組合せ (夜景) 」を参照ください。
<FLASH動画(ビデオ)ビューアー講座>
複数の動画をサムネイルで表示しました。ここでは美しい夜空で弾ける花火 をご覧いただきます。
画像の上にマウスを置くと、ロールオーバーで再生します。クリックするとリリースされ拡大表示し、そのまま動画を見ることができます。花火を見る人たちの歓声 も聞ける活用編「FLASH動画(ビデオ)ビューアー (花火) 」を参照ください。
<FLASHでVista 3Dフリップ風ウインドウビューアー(アルバム)講座>
Windows Vista エアロ一環の売りもの「3Dフリップ 」を真似てみしました。
ウインドウ(ページ)ビューアーを作り、花のアルバム に使ってみました。ページ(ウインドウ)の動きは、ぎこちないですが、多少は気分が出るのではないでしょうか。
活用編 「FLASHで3DFlip風アルバム (花) 」を参照ください。
<Flash で旅行アルバム>
旅行先のマップ(ここでは、GoogleEarth の3DMap)に訪問先(地名)を配置します。
そして訪問先をクリックするとサムネイル群を発生させます。さらにお好きな写真をクリックすることにより拡大写真を表示させることができます。
これは山岳アルバム(フォトギャラリー)ですね。思わず「ヤッホー!」と叫びたくなる美しい山 の写真です。
活用編 「FLASHで旅行アルバム (山) 」を参照ください。
<BitmapData.copyChannel を使って画像に透明グラデーションを施す講座>
写真などの画像そのものに透明グラデーションをかけます。
ここでは花のスライドショー をご覧いただきます。
BitamapData クラスの copyChannel を使うと、アルファチャンネルをBitmapData オブジェクトにコピーできるのです。
活用編 「BitmaData.copyChannel を使って画像に透明グラデーション (花のスライドショー) 」を参照下さい。
<BitmapDataクラスを使って画像をスライスする講座>
画像をいくつかの部分に切り分ける(スライスする)には、一般にはFireWorks などの画像処理ソフトを使うのです。しかし、Flashのスクリプトで切り分け、ムービークリップとして扱えればいろいろ面白いことが出来ます。
ここでは、BitmapData クラスを使いました。
BitmapDataクラスで切り分けたスライスには、いろいろなアクションを付与できます。移動、静的回転、アルファ、拡大・縮小などを付与した例です。
スライスへの切り分けは、いろいろな可能性を感じさせますね。
活用編 「BitmapData クラスを使って画像をスライス 」を参照下さい。
<画像枚数読み取り型スライドショー講座>
自動再生のon/off、自動再生間隔指定、次へボタン、戻るボタンなどの機能がついたベーシックなスライドショーです。
画像フォルダーに連番で画像を格納しておけば、その枚数を読み取るので、swfファイルの更新なしに、フォルダ内画像を入れ替えたり、増減させたりすることが可能になります。
トランジションで画像が八方向のいずれかへスライドする趣向も施しました。
荒木忠義氏の撮影された太陽のある景色 がテーマのスライドショーです。
活用編「画像枚数読み取り型スライドショー (太陽) 」を参照ください。
<Flash Lite 2.0(携帯・ケータイ)でサイトメニュー講座>
携帯サイトのメニューの作成方法と、リンク先ページとして、ファイル内フレームに飛ぶ方法と、別ファイルに飛ぶ方法について、解説しました。
上から下にメニュー が「ダダダ!」とスライドして出てきます。
携帯編「FlashLite2.0でサイトメニューの作成 (メニュー) 」を参照下さい。
<Flash Lite 2.0(携帯・ケータイ)で画像ビューアー講座>
画面一杯に配置されたサムネイル画像を、4方向キーで移動する矩形で選択、決定ボタンが押された画像を拡大表示する。
エフェクトを工夫したり、ナビゲーションに利用したり、いろいろ応用出来そうです。
携帯編「FlashLite2.0で画像ビューアー 」を参照下さい。
<Flash Lite 2.0(携帯・ケータイ)で画像ギャラリー講座>
サムネイル表示の画像を十字左右キーまたは選択ソフトキーで左右に送りながら選択します。
そして決定ボタンで表示するタイプのギャラリーです。
携帯編「FlashLite2.0で画像ギャラリー 」を参照下さい。
<Flash Lite 2.0(携帯・ケータイ)でアナログ時計(時刻アニメ付き)講座>
1時、2時などの時刻になったらアニメーションが出現する、アナログ時計 (Flash Lite 2.0対応版)
携帯編「FlashLite2.0でアナログ時計(時刻アニメ付き) 」を参照下さい。
<Flash Lite (携帯・ケータイ)でスライドショー講座>
FlashLite2.0対応版。 外部画像ファイルを読み込むタイプのスライドショーです。
画像切り替えは、携帯電話の決定ボタンを押すだけです。
携帯編 「flashliteでスライドショー(Lite2.0向け) 」を参照下さい。
Flash Lite 1.1対応版。 外部画像ファイル(swf)読み込み型。 右へボタン、左へボタンで切替ます。
携帯編 「flashliteでスライドショー(Lite1.1向け) 」を参照下さい。
紅葉 を見ながらお散歩気分を楽しめます。
<Flash Lite (携帯・ケータイ)でストップウオッチ・タイマー講座>
FlashLite2.0版で、ストップウオッチ とタイマー 複合型の作成です。
携帯編 「FlashLiteでストップウオッチ・タイマー 」を参照下さい。
<Webサイト作成例(2)の作り方講座>
以前、Webサイト作成例として化粧品販売サイトの例を公開しました。 その作成法の講座はまだでしたのでここに公開いたします。 実務編 「サイト作成例(2) (森と女性) 」を参照下さい。森 の中で森林浴を楽しめるような大きく分割された画像ですが、文字の上にマウスを置くと美しい女性 が現れます。
<Flash Lite (携帯・ケータイ)でデジタル時計講座>
携帯電話用サイト、あるいは携帯画面で楽しむためのFlash講座の第1弾は、定番のデジタル時計 です。
例えば、自作のFlash待ち受け画面を自分だけで楽しんだり、あるいは、友人に提供するのもいいですね。
おいおい、サイト作りを考えたFlash講座を進めます。
左の作例の解説は、携帯編 「FlashLite でデジタル時計 」 を参照下さい。
スクリプトは、Flash Lite1.1、Flash Lite2.0 両方のものを載せています。
<FLASHでデジタル時計、アナログ時計、ストップウオッチ、タイマー講座>
画像挿入予定
好立地!
利便性良し
時間取得の基本機能を使って、定番の時計 を作成する講座です。
基本編 「デジタル時計・アナログ時計 」、「ストップウオッチ、タイマー 」 を参照下さい。
<Flash Lite 1.1(携帯・ケータイ)でアナログ時計講座>
定番のアナログ時計 を作成し、それを、gifアニメーション、モーショントウイーンと組み合わせて表示します。
ここでは可愛らしい女性の胸の上で、ハート型の心臓 がドクドクと動いています。
これは女性に思いを寄せる男性の心臓なのでしょうか?それとも女性が思いを寄せてくれている心臓なのでしょうか?
また、薄っぺらい骸骨くん ですね。でも動きは抜群に面白いです。
最後の原始時代の格好をした二人 はお笑い芸人のように、笑い上戸と怒りんぼで息がピッタリ合っています。
思わず携帯電話にバーコードリーダーで取り込んでしまいます。
携帯編 「FlashLite1.1 でアニメつきアナログ時計の作成 」を参照ください。
<画像クリックで拡大・縮小するFLASH画像ギャラリー(2007年水墨画カレンダー)講座>
サムネイルで12ヶ月分の水墨画(縮小画像)を表示します。
クリックすると、その月のカレンダーが表示されます。
更に、その月のカレンダーをクリックすると、水墨画の部分だけが拡大表示されます。
もう一度クリックすると、元のカレンダー表示に戻ります。
この画像ギャラリーを、雲遊 作成の水墨画カレンダー を素材に作成しました。 スクリプト(script)は、クラスを使った記述にしてます。 活用編「クリックで画像が拡大・縮小する画像ギャラリー 」を参照下さい。
<ボタン操作で画像が拡大・縮小・スライドするFLASHビューアーの作成講座>
表示写真(御嶽山 =おんたけさん)をボタン操作でスライド(移動)させたり、拡大・縮小させたりする機能を付与したビューアーの作成です。 活用編「拡大・縮小、スライド機能付きビューアー(御嶽山) 」を参照下さい。
<FLASHとCGI の sendmail を組み合わせたフォームメール講座>
これまで、cgi が要らないフォームメールを学んできましたが、今回は、メール送信だけcgi のsendmail 機能を使うヴァージョンの講座です。 cgi
が使えるサーバー環境ならば、sendmail を使った快適なメール送信を行うことが出来ます。 また、cgi を使わないヴァージョンと同様、必須項目未記入チェックとe-mail
アドレスの書式チェックはFLASHで行い、最後にサーバーのsendmailを使うという方式をとりました。 実務編 「FLASHによるフォームメール(cgiのsendmail使用) 」、及び、「FLASHとCGIとのやりとり(交信、連携)の仕方 」を参照下さい。
<FLASHによるCGI不要フォームメール(1)、及び、(2)講座>
FLASH画面のダイナミックテキストボックスにWeb上でインプットされたテキスト文を、メーラーを介して、希望するメールアドレスに送信するタイプの簡易型フォームメールです。 実務編「FLASHによるCGI不要フォームメール (1)」を参照下さい。
さらに、FLASHで必須項目未記入チェック機能とe-mail アドレス書式チェック機能を盛り込んだ ver.2 「FLASHによるCGI不要フォームメール(2) 」も参照下さい。
なお、ver.2においては、e-mailチェックにjavascriptを使ってます。「ExternalInterFaceを使ったFLASHとjavascriptの連携 」に、連携の仕方をまとめましたので、そちらも参照ください。
<xml ファイルデータ読み込み型ショッピングカート(買い物かご )講座>
商品データ(商品名、コード、価格、色、サイズ、説明書き、画像ファイルパスなど)をxml に記載しておき、これをFLASHから呼び出して、商品注文画面を構成すると、動く画像を表示でき、商品によっては有効と考え講座にしました。 まだ本格的なものには仕上がっていませんが、ひつの提案として参考になればと思います。 実務編「xml データ呼び出し型ショッピングカート(買い物かご) 」を参照ください。面白い買い物かご だと思いませんか?
<xml ファイルデータ読み込み型スライドショー講座>
写真のファイル名、サイズ(幅、高さ)などのデータを
xml ファイルに記述しておき、そのデータをFLASHで呼び出して表示させるタイプのスライドショー です。
いろんなアプリケーションでxml ファイルのデータを活用するようになってきました。 FLASHにおいても、一つのオブジェクトに対して複数の属性データを格納できる xml
はいろいろ活用できるのではないかと思われます。
活用編「xml データ呼び出し型スライドショー 」には、自動再生の他に、ボタンの手動操作で順送りすることも出来るタイプの例を解説しています。
また、xml の記述例と、xml データのFLASHからの呼び出し方を、「xml データをFLASHで活用 」にまとめました。 詳しいxml に関する解説は他のサイトを参照いただくとして、必要最小限の知識として参考にしていただければと思います。
<テキスト(文字列)にスクリプトでエフェクトを付ける(2)講座>
先に受講されたテキストエフェクトのバージョンアップ版です。 複数の文字 列 を同時に、あるいは、入れ替えて表示できるようにしました。 応用編「テキストのエフェクト(2) (文字) 」を参照下さい。
<複数シリーズ対応フォトギャラリー講座> 2006_7_4
先日訪れた南アルプス鳳凰三山 で撮った写真を材料に複数シリーズ(山の写真、花の写真など)に対応し、サムネイルがスライドして登場するフォトギャラリーを作ってみました。 活用編「複数シリーズ対応フォトギャラリー 」を参照ください。
<テキスト(文字列)でマウストレイル講座> 2006_6_22
FLASHの定番になっているマウスの動きにキャラクター(星 )が追随するマウストレイルを文字列で作ってみました。 全部スクリプトでできていますので、文字列は任意に変えられます。 基本編の「マウストレイル (星) 」に追加しました。