- ベストアンサー
外部jpgを読み込んでのスライドショー
DPEの回答
スライドショーはいろいろな作り方があり、作ろうと思えばいくらでも高機能のもの・手の込んだものが作れますが、紙面の都合上、あまり凝ったスライドショーの作例はご紹介できません。 さしあたって ・読み込むファイルはスクリプトで指定しておく ・全部読み込まれるまで、ロードアニメを表示 ・画像がステージの中央に表示される ・演出はフェードイン→一定時間静止→フェードアウト 最後の写真はフェードアウトせずにそのまま表示 ・最後の写真まで表示したら終了 という、単純な作例をご紹介します。 ------------------------------------------------------------ 見たところ、ご希望のロードアニメ用の画像はアニメ GIF のようですが。 アニメ GIF をライブラリに読み込むと、各コマの絵が1枚ずつビットマップシンボルというシンボルとして読み込まれ、これをムービークリップのフレームに配置したムービークリップシンボルが1つ、自動的に作成されます。 素材を読み込んだ時にできたムービークリップをステージに配置して、インスタンス名を付けてください。 ここでは仮に” load_anime ”と付けたとします。 準備はこれだけです。 次はスライドショーのスクリプトを書きます。 *********************** スクリプトは全て、ロードアニメのムービークリップを配置したタイムラインのフレームに書きます。 スクリプト専用のレイヤーを作っておくと便利です。 (↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください) /////////////////////////////////////////////////////// //初期設定 /////////////////////////////////////////////////////// //読み込む画像ファイルのリスト(拡張子は省略) file_list = new Array(); file_list = [ "image" , "pic" , "photo" ]; //読み込み用のオブジェクトを作成 load_obj = new MovieClipLoader(); //読み込みが完了したファイル数を管理する変数 //このカウントがファイル数に達した時、全て読み込まれたと見なす loaded_cnt = 0; //ロードアニメのムービークリップの参照を保持 anime_clip = this.load_anime; //表示するスライドの番号 current_pic = 0; //フェードイン/アウトの速さ(最大100まで) fade_spd = 10; //静止時間(単位はフレーム数)と、ウェイトカウンタ wait_time = 24; wait_cnt = 0; //行動を決めるステップカウンタ //0:読み込み開始 1:全読み込みの完了待ち //2:表示スライドの初期化 3:フェードイン 4:静止表示 //5:終了判定とフェードアウト act_step = 0; /////////////////////////////////////////////////////// //読み込みに関するイベント処理 /////////////////////////////////////////////////////// //読み込みが済んだ時の処理 load_obj.onLoadInit = function( target_clip ) { //読み込んだ画像を非表示にしておく target_clip._visible = false; //読み込み完了数を更新 loaded_cnt++; }; /////////////////////////////////////////////////////// //メインの処理 /////////////////////////////////////////////////////// this.onEnterFrame = function() { var i , clip; //ステップカウンタの値に従って行動 switch( act_step ) { //画像の読み込み命令を出す case 0: for( i = 0 ; i < file_list.length ; i++ ) { //画像の受け皿になる空のムービークリップを作成 clip = this.createEmptyMovieClip( "clip" + i , i ); //できたムービークリップに画像を読み込む load_obj.loadClip( file_list[ i ] + ".jpg" , clip ); } //次に進む act_step++; break; //全ての画像が読み込まれるまで待つ case 1: if( loaded_cnt >= file_list.length ) { //各画像の配置を決める for( i = 0 ; i < file_list.length ; i++ ) { //各ムービークリップの参照を格納 clip = this[ "clip" + i ]; //位置を決める:どの画像もステージの中央に配置 clip._x = ( Stage.width - clip._width ) / 2; clip._y = ( Stage.height - clip._height ) / 2; } //ロードアニメを停止・非表示にし、次に進む anime_clip.stop(); anime_clip._visible = false; act_step++; } break; //表示するスライドの初期化 case 2: //今、表示するムービークリップの参照を格納 clip = this[ "clip" + current_pic ]; //フェードインの準備 clip._visible = true; clip._alpha = 0; //次に進む act_step++; break; //表示中のスライドをフェードイン case 3: //表示中のムービークリップの参照を格納 clip = this[ "clip" + current_pic ]; //フェードイン:アルファを徐々に上げる //100に達したら終了 clip._alpha += fade_spd; if( clip._alpha >= 100 ) { clip._alpha = 100; //静止表示のための初期化をし、次に進む wait_cnt = 0; act_step++; } break; //一定時間、静止表示 case 4: //静止時間だけ待機、経過したら先に進む wait_cnt++; if( wait_cnt >= wait_time ) { act_step++; } break; //表示中のスライドをフェードアウト //次のスライドがない場合はここで終了 case 5: //次のスライドは存在するか? //なければイベント処理を削除して終了 if( ( current_pic + 1 ) >= file_list.length ) { delete this.onEnterFrame; break; } //次のスライドがある場合はフェードアウト else { //表示中のムービークリップの参照を格納 clip = this[ "clip" + current_pic ]; //フェードアウト:アルファを徐々に下げる //0になったら終了 clip._alpha -= fade_spd; if( clip._alpha <= 0 ) { //このムービークリップを非表示にする clip._visible = false; //スライドの番号を更新し、スライドの初期化処理に戻る current_pic++; act_step = 2; } } break; default: break; } }; *********************** 今回はさしあたって、スクリプト内に読み込む画像ファイルの名前を書き込んでいます。 冒頭の file_list = [ "image" , "pic" , "photo" ]; この配列変数に、読み込む画像のファイル名を記述してください。 拡張子は読み込みの命令を出す load_obj.loadClip( file_list[ i ] + ".jpg" , clip ); ↑この箇所で追加していますので、配列変数内に記述する時は省略してください。 Flash Player 8 以降は、PNG ・ GIF 形式の画像も読み込めるようになりました。 JPEG 以外のファイル・拡張子が違うものになっている・フォルダを分けているなどの問題がありましたら、このあたりで調整してください。 フェードイン / アウトの速さと静止時間は、fade_spd と wait_time という変数に入っています。 fade_spd は、演出の際に _alpha プロパティに加算 / 減算される値です。 _alpha が取りうる値は 0 ~ 100 で、0 の時に完全に透明になります。 0 や 100 以上にするとエフェクトが正常に動作しなくなるので、ご注意ください。 wait_time は、フェードインの後で画像を静止表示させる時間の設定です。 上記のスクリプトでは、onEnterFrame = function で定義された関数が呼び出されるたびに別の変数( wait_cnt )でカウントを取り、これが wait_time で指定した以上の値に達した時にフェードアウトに移るようにしています。 この関数はフレームレート分の1秒ごとに呼び出されるため、wait_time をフレームレートと同じにすると約1秒、フレームレート×2にすると約2秒静止、となります。 一定時間、何もしないで待つにはいろいろな技法がありますが、簡単なところで毎回カウントを取る方法を採用させていただきました。 もっと正確に、ミリ秒単位で待つ方法もあります。機会がありましたら研究してみてください。 *********************** スクリプトが何をしているかにつきましてはスクリプト内のコメントを、MovieClipLoader クラスの使い方やムービークリップの制御などはヘルプ等をご参考になさってください。 主な構造ですが。 まず、onEnterFrame = function で定義した関数は、onEnterFrame の持ち主のムービークリップがステージに存在する限り、フレームレート分の1秒ごとに実行されます。 例えば、このスクリプトをメインのタイムラインに記述した場合、onEnterFrame の持ち主はムービー自身になります。 ムービー自身はムービーが再生されている間はステージから消えることがないので、要するにこの関数は常にフレームレート分の1秒ごとに呼び出され続けます。 この点を利用して、画像の読み込みからスライドの制御まで、全てこの関数1つで行います。 ただ、今回の作例では、アレが終わったら次にコレをして・・・というように、処理が様々な段階に分かれています。 そこで、各段階に番号を割り振り、関数が呼び出されるたびに今しなければならない段階の処理に分岐できるようにしておきます。 上記のスクリプトでは、この段階を act_step という変数で管理しており、この値を見て switch 文で処理を分岐させています。 段階ごとの処理が終わるたびに act_step の値を変更していくことで、ある処理が終わるまではその仕事をして、済んだら次に進む・・・という、Flash のタイムラインや ActionScript の gotoAndPlay に似たような仕組みを実現しています。 *********************** MovieClipLoader は画像と swf ファイルの読み込みを専門に請け負うクラスです。 1つのオブジェクトで何件もの読み込みの進捗状況を管理できるのですすが、”引き受けた読み込み全てが終わったかどうか”の情報は持っていないため、これを知るには少々工夫が必要です。 簡単な方法は、”1つあたりの読み込みが済んだ時”は検出できるのですから、この時にカウントを取り、このカウントが読み込むファイルの総数と一致しているかどうかを判断することです。 今回は読み込むファイル名を配列変数で指定しているので、ファイルの総数とは、配列変数に含まれる要素の数ということになります。 要素の数は、配列変数名.length で分かります。 読み込みが何らかの事情で失敗した時にはカウントが狂ってしまいますが、今回は不測の事態に対する措置は割愛させていただきました。 MovieClipLoader で読み込むと、エラーが起きた時にも対応できます。 MovieClipLoader を使った例はこのサイトでもたびたび紹介されていますので、興味がありましたら調べてみてください。 *********************** 今回の作例は、本当に最低限の機能と演出のスライドショーです。 スクリプトが長い割には、案外つまらない機能だな~、と思うかもしれません。 読み込む画像を変えるにも、いちいちスクリプトを変更しなければならないのは不便ですよね。 不満な点は改良して、いろいろな機能や演出を加えてみてください。 そのものズバリの作り方は紹介されていなくても、読み込む画像ファイルを外部テキストで指定する方法・凝った演出の作り方など、断片的なヒントはこのサイトの中にもたくさんあります。
関連するQ&A
- flash jpgを読み込んでスライドショーを実行したい
フラッシュで制作したアニメーションの一部にスライドショーを埋め込みたいと思っています。直接フラッシュでスライドショーのアニメーションを作るのではなく、別フォルダに格納されたjpgなどの画像を読み込んで、フェードイン、フェードアウトを繰り返しながら画像が切り替わっていくようにしたいのですが、どなたか方法が分かるようでしたら教えて下さい。よろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- スライドショーのソフトを探しています。
このようなスライドショーのソフトを探しています。 1.DVDに制作出来てDVDプレイヤーを使ってTVに再生できるとこ 2.BGMが録音できること 3.フェードイン・フェードアウト・文字入力等、少し凝った制作ができること 4.静止画は100~150枚くらい 最低限このようなことができるソフトはないでしょうか? よろしくお願いします。
- ベストアンサー
- その他(ソフトウェア)
- 背景色と連動するスライドショープラグイン
お世話になります。 スライドの画像が変わるたびに背景色も変わるタイプのスライドショープラグインを探しています。 サンプルとして http://elegantthemes.com/preview/eStore/ こちらのサイトの様な感じにしたいと思っています。 中央部分がスライドショーになっており両サイドが背景となっているようです。 ソースを見てみるとslideというクラスがついた要素全体をスライドするようです。 画像だけでなく文字や背景も変わっています。 ようはインラインコンテンツそのものをスライドするタイプのものであれば良いのかなと思います。 lightboxのようなイメージギャラリーですとインラインコンテンツを表示するタイプのものがありますが、単純にフェードインアウトするスライドショーでインラインコンテンツをスライドさせるものは無いでしょうか? もしくは簡単なjQueryで出来そうならご教授願いたいと思います。
- ベストアンサー
- JavaScript
- スライドショーができません
マイピクチャでスライドショーを表示して、画像は表示はできるのですが、自動再生・前の画像・次の画像ができたりできなかったりします。 どうしたら直りますか? よろしくお願いします。
- 締切済み
- Windows XP
- クリックでスライドショー
http://lab.komadoya.com/javascript/crossFader/#cf2 上記サイトのようなフェードイン・フェードアウトのスライドショーに 以下のような動作を追加したいと思っています。 画像をクリックしたら再生し、最後の画像でストップ。 もう一度クリックで1枚目の画像に戻る。 色々調べたのですが、マウスオーバーや自動再生のものが多く 思ったものが見つかりませんでした。 画像(1)、画像(2)、画像(3)とあり、 画像(1)クリックで、(1)→ (2)→ (3)でストップ。 もう一度クリックで(1)に戻る。 といったイメージです。 お分かりの方がおられましたらご教授頂けたら幸いです。 どうぞ宜しくお願いします。
- 締切済み
- JavaScript
- スライドショーについて
来週、打ち上げパーティーを予定しています。その余興として、今までの想い出の写真の画像をデジタルカメラで再生し、テレビでスライドショーとして流すことを考えています。 そこでパソコンにためておいた今までの画像をピックアップし、時系列にファイル名を付けて、SDカードに書き込んだのですが、デジタルカメラで再生出来ません。(「表示出来る画像はありません」と表示されます) どうすれば良いでしょうか? ちなみにカメラはpanaのDMC-TZ1とミノルタのDIMAGE-Xtです。
- ベストアンサー
- デジタルカメラ・フィルムカメラ
- DVDスライドショー作成のおすすめのソフトを教えて下さい
デジカメで撮影した画像をDVDプレーヤーで再生したいと思っています。 ただ写真が切替わるだけ(ズームイン、アウトも含めて)のスライドショーではなく、以下のような事を行いたいと思っています。 写真が画面外からフェイドイン、フェイドアウトで消える 薄い状態で表示され、徐々に100%の状態で表示される 複数枚を同時に表示ではなく、1枚表示した状態でもう一枚を追加する 以上のような、Flashで作成するようなスライドショーは可能でしょうか もし、無理の場合は、Flashで作成したswfファイルをDVDプレーヤーで自動再生することは可能でしょうか? よろしくお願い致します
- 締切済み
- デジタルカメラ・フィルムカメラ
- ちょっと変わったスライドショーを実現したいです
ちょっと変わったスライドショーを作りたいのですが、 自分の技量では仕組みを考えつくことが出来ず、困っております。 どなたか下記のものが出来る仕組みをお教え頂けないでしょうか。 合計6枚のスライドショーです。 Aパート ・1枚目 固定でA.jpgを表示 ・2枚目、3枚目はB-1、B-2、B-3、B-4.jpgから2枚をランダムに表示 Bパート ・4枚目 固定でC.jpgを表示 ・5枚目、6枚目はD-1、D-2、D-3、D-4.jpgから2枚をランダムに表示 ※Bパートの6枚目のあとはAパートの1枚目に戻りリピート再生です。 ※2巡目以降、ランダム表示で1巡目と同じ画像が出ても構いません。 ※jquery-cycleのように指定した時間で画像を切り替え(切り替わり時にフェードイン、フェードアウト) 言葉にするのが難しいので、図をかいてみました。 なんとも手間がかかる仕様で申し訳ございません。 どなたかご教授をお願い致します!!
- ベストアンサー
- JavaScript
- GIFアニメを使って写真のスライドショーを作成する
WEBのページで写真のスライドショーみたいに 複数枚の画像をフェードイン、フェードアウトして 表示させるようなことをGIFアニメで作りたいのですが写真を透明化させてその度合いを変えた写真をあらかじめ作るのはなかなか手間がかかります。 そのような作業も含め1度に処理してくれる便利な ソフトなどありますでしょうか?
- 締切済み
- フリーウェア・フリーソフト
- スライドショーを自作したい
複数の画像がフェードインして切り替わるスライドショーを作成したいです。 色々なライブラリを拝見したのですが、”再生ボタン”が設置されているものがなく、どれも自動再生のものばかりでした。 CS5を持っているので、そのようなフラッシュを自作したいのですが、flaファイルや作り方が載っているサイトはありませんでしょうか? そのほかJAVAスクリプトでの作成も考えています。 どうぞよろしくお願いいたします。
- ベストアンサー
- Flash
お礼
お礼が遅くなり申し訳ありませんでした。とても丁寧にお教え頂いた おかげで、参考になるとともに本気で勉強してみようと思いました。 少しずつ自分で変更できるようにし、手の込んだスクリプトに仕上げ たいと思います。 本当にありがとうございました。