メニュー

つくばマルチメディアのホームページ作成(WEB制作)におけるCMS機能:スライドアニメーション(スライドショー)システムの案内

文字サイズの変更
標準
背景色の変更
標準
音声読上げ版

スライドアニメーションシステムの案内


スライドアニメーションシステムとは

「スライドアニメーションシステム」と「スライドショーシステム」との相違点は、スライドショーシステムで入力できる「スライド画像」上で「テキスト」及び「画像」を任意にアニメーションさせることが可能な点です。

スライドアニメーションシステムでは、従来のFlashアニメーションのような動作が可能となります。

○デモサイト  http://www.demo.apos.jp/  
上記サイトの「2.スライドアニメーション(プロフェッショナル版)デモ画面(990px × 480px)」がスライドアニメーションシステムです。

スライドアニメーションシステムとは
デモの事例では、スライド画像は4枚で、それぞれの画像上でテキストや画像が複雑にアニメーションされています。
1件のスライド画像上でテキストや画像をアニメーションさせる設定として、アニメーション動作の選択、開始位置や終了位置の座標設定、開始時間、アニメー ション動作時間、終了時間等の設定が可能となっています。設定操作はさほど難しいものではありませんが、動作のストーリーやタイミング等においてプロ フェッショナル性を有しています。

ホームページ作成におけるスライドアニメーション採用事例

以下は、スライドアニメーションを採用してホームページを作成している事例です。
  1. 農業分野:表紙採用事例:さんろく果樹園
  2. 化学分野:表紙採用事例:ノアテック 
  3. IT分野:表紙採用事例:つくばマルチメディア
  4. 市町村関連:表紙採用事例:坂東市雇用創造協議会
  5. 宗教法人:内部採用事例:鹿嶋八幡神社

スライドアニメーションシステムの基本機能

アニメーションの種類

ベースとなる画像のアニメーションは、フェード、ズーム、縦カーテン、横カーテン、シャッフル、ワイプ、カバー、左スクロール、右スクロール、上スクロール、下スクロール、トス、ランダムの13種類があります。選択したアニメーションは、入力したスライド画像すべてに適用されますので、色々なアニメーションを使用したい場合は、ランダムを選択してください。

ページャの種類

ページャとは、スライドアニメーションで表示されるスライド画像の表示の切替を行う機能です。
デモ版では、スライドアニメーションの下の部分にサムネイルで表示されており、いずれかのサムネイルをクリックすると該当するスライド画像を表示することができます。
ページャの種類には、サムネイル画像、丸マーク、四角マーク、表示しないの4種類あり、表示位置を枠内あるいは枠外の左寄せ、中央、右寄せから選択できるようになっています。
また、ページャマークの色も自由に設定することが可能です。
サムネイル画像を選択した場合は、列数を4列、5列、6列から選択でき、スライド画像の大きさに合わせて、自動調整して表示されるようになっています。

ページャ設定例

ナビゲーション

ナビゲーションとは、スライド画像上にマウスカーソルを乗せた際に表示される「戻る」と「次へ」を示す矢印マークです。「戻る」を示す矢印マークが押された場合は、1枚前のスライド画像に切り替わり、「次へ」を示す矢印マークが押された場合は、1枚先のスライド画像に切り替わります。
非表示、表示を選択できます。

時間設定

ベースとなるスライド画像1枚毎の表示時間と、次のスライド画像に切り替わるまでの開始から停止までの時間をミリ秒(1/1000秒)単位で設定することが可能です。


スライドアニメーションシステムのスライド画像上のアニメーション機能

スライドアニメーションシステムでは、スライド画像上で「テキスト」及び「画像」を自由にアニメーションさせることができるようになっています。
スライド画像上コンテンツは最大6件まで設定でき、これに様々な機能を設定することで、Flashのようなかっこいい動作を作り出すことが可能となります。


画像上のアニメーションの種類

フェード、左から登場、右から登場、上から登場、下から登場、ズーム、ズーム回転(時計回り)、ズーム回転(反時計回り)、回転(時計回り)、回転(反時計回り)があります。
なお、テキストでの「ズーム」または「回転」はできません。


画像上アニメーション座標設定機能

スライド画像上でアニメーションさせて画像やテキストの開始位置や終了位置の座標を設定できる機能です。スライド画像上にグリット表示表示、位置指定マーク、座標数値をレイヤー表示し正確なX.Y座標を設定できるようになっています。


画像上アニメーション時間設定機能

スライド画像上でアニメーションさせて画像やテキストの開始時間や動作時間、アニメーション完了時の動作の設定等複雑な時間設定が可能となっています。


デモデータ(プロフェッショナル版)の掲載

プロフェッショナル版では、詳細な設定方法や操作方法、特殊な表現方法の設定等を確認していただくために、デモデータを用意しています。
動作のタイミング等を実際に見ながら、設定を自由に変えて、変化を確認できるようになっています。


スライドマネージャについて

スライドマネージャは、スライドアニメーション専用のファイルマネージャです。
スライドマネージャ管理画面では、簡易版及びプロフェッショナル版で登録されている画像を一覧形式で確認することができ、その画像が現在スライドアニメーションで利用されているかの判断や、画像に対するコメントの入力、表示番号を設定し好きな順番で一覧表示するなどの画像の管理を行える機能です。
スライドマネージャに登録される画像は、スライドアニメーションを作成する際に入力されたものだけでなく、スライドマネージャ管理画面で、あらかじめ画像を入力して登録することもできます。また、不要な画像はこの管理画面から削除できます。

スライドマネージャ管理画面イメージ