RealPix - Fadein！！

最終更新日:2006年11月29日

フェードインの基本
上下左右分割フェードイン１
上下左右分割フェードイン２
４分割フェードイン
フェードインを使った画像切り替え
フェードイン効果毎にハイパーリンク

１．フェードインの基本

　RealPixファイルを記述します。（赤字は入力必須項目）
フェードインは、前表示のカラーや画像を別の画像に徐々に変化させる効果です。

<imfl>.....</imfl>　=>　RealPixの始まりと終わりを指定。(必須)
<head .../>　=>　ヘッダ情報を記述。(必須)
title="RealPix(tm) サンプル１"　=>　題名を指定。（日本語指定可能：sjisのみか？）
author="まゆぱぱ"　=>　作者名を指定。
copyright="(c)1998 ..."　=>　著作権情報を指定。
timeformat="dd:hh:mm:ss.xyz"　=>　時間フォーマットを指定。
duration="12"　=>　存続（継続）時間を指定。この場合、単位は秒。
bitrate="20000"　=>　最大転送レートを指定。単位はbps。（参照側の接続環境を考慮）
height="240" width="320"　=>　表示する画面サイズを指定。単位はpixel。
url="http://www.eizou.info/"　=>　画面をクリックしたときに（ブラウザに）表示するWebサイトのURLを指定。
aspect="true"　=>　画面サイズに対して、画像サイズのアスペクト比を維持するか否かを指定。維持しない場合は「false」を指定。
　　
<image handle="1" name="img/pht_045.jpg"/>　=>　表示する画像に番号を付与。エフェクト指定で使用する。
　　
<fill/>　=>　エフェクトなしで（背景）色を指定。
start="0"　=>　再生開始から指定色の表示開始までの時間を指定。
color="white"　=>　（背景）色を指定。#rrggbbの16進数でも可。
　　
<fadein/>　=>　フェードインのエフェクト指示。
start="2"　=>　再生開始からフェードイン表示開始までの時間を指定。
duration="3"　=>　フェードインに費やす時間。
target="1"　=>　フェードインする画像番号を指定。<image/>で指定したもの。この場合img/pht_045.jpgになる。

この内容を記述したファイルを拡張子.rpとして保存する。
これで、RealPixファイルは完成です。
RealAudio/RealVideoの場合と同様に、メタファイル(.ram)を作成しページへリンク設定。
このサンプルを再生する　＝＞　Click Here!!

２．上下左右分割フェードイン１

　RealPixファイルを記述します。（赤字は入力必須項目）
320x240サイズの画面なので、画面縦横：160x240と320x120サイズでの分割フェードイン。

<fadein start="2" duration="3" target="1" dstx="0" dsty="0" dstw="160" dsth="240"/>　=>　画面左半分に「pht_045.jpg」全部をフェードイン。
<fadein start="5" duration="3" target="2" dstx="160" dsty="0" dstw="160" dsth="240"/>　=>　画面右半分に「pht_046.jpg」全部をフェードイン。
<fadein start="9" duration="3" target="1" dstx="0" dsty="0" dstw="320" dsth="120"/>　=>　画面上半分に「pht_045.jpg」全部をフェードイン。
<fadein start="12" duration="3" target="2" dstx="0" dsty="120" dstw="320" dsth="120"/>　=>　画面下半分に「pht_046.jpg」全部をフェードイン。

３．上下左右分割フェードイン２

　RealPixファイルを記述します。（赤字は入力必須項目）
320x240サイズの画像/画面なので、画像の縦横：160x240と320x120サイズ毎を分割フェードイン。

<fadein start="2" duration="3" target="1"
     srcx="0" srcy="0" srcw="160" srch="240"
     dstx="0" dsty="0" dstw="160" dsth="240"/>　=>　画面左半分に「pht_045.jpg」左半分をフェードイン。（srcの指定が画像の位置/サイズ指定になる）
<fadein start="5" duration="3" target="1"
     srcx="160" srcy="0" srcw="160" srch="240"
     dstx="160" dsty="0" dstw="160" dsth="240"/>　=>　画面右半分に「pht_045.jpg」右半分をフェードイン。（srcの指定が画像の位置/サイズ指定になる）
<fadein start="9" duration="3" target="2"
     srcx="0" srcy="0" srcw="320" srch="120"
     dstx="0" dsty="0" dstw="320" dsth="120"/>　=>　画面上半分に「pht_046.jpg」上半分をフェードイン。（srcの指定が画像の位置/サイズ指定になる）
<fadein start="12" duration="3" target="2"
     srcx="0" srcy="120" srcw="320" srch="120"
     dstx="0" dsty="120" dstw="320" dsth="120"/>　=>　画面下半分に「pht_046.jpg」下半分をフェードイン。（srcの指定が画像の位置/サイズ指定になる）

４．４分割フェードイン

　RealPixファイルを記述します。（赤字は入力必須項目）
320x240サイズの画像/画面なので、160x120毎に４分割してフェードイン。

<fadein start="2" duration="2" target="1"
     srcx="0" srcy="0" srcw="160" srch="120"
     dstx="0" dsty="0" dstw="160" dsth="120"/>　=>　画面左上に「pht_046.jpg」左上をフェードイン。（srcの指定が画像の位置/サイズ指定になる）
<fadein start="4" duration="2" target="1"
     srcx="160" srcy="120" srcw="160" srch="120"
     dstx="160" dsty="120" dstw="160" dsth="120"/>　=>　画面右下に「pht_046.jpg」右下をフェードイン。（srcの指定が画像の位置/サイズ指定になる）
<fadein start="6" duration="2" target="1"
     srcx="160" srcy="0" srcw="160" srch="120"
     dstx="160" dsty="0" dstw="160" dsth="120"/>　=>　画面右上に「pht_046.jpg」右上をフェードイン。（srcの指定が画像の位置/サイズ指定になる）
<fadein start="8" duration="2" target="1"
     srcx="0" srcy="120" srcw="160" srch="240"
     dstx="0" dsty="120" dstw="160" dsth="240"/>　=>　画面左下に「pht_046.jpg」左下をフェードイン。（srcの指定が画像の位置/サイズ指定になる）

５．フェードインを使った画像切り替え

　RealPixファイルを記述します。（赤字は入力必須項目）
フェードインに費やす時間を「０」として画像表示切替。

<fill start="0" color="white"/>　=>　画面を白色表示。
<fadein start="2" duration="0" target="1"/>　=>　画像「pht_045.jpg」をフェードインせずに表示。
<fill start="4" color="black"/>　=>　スライド切り替えの雰囲気を出すため、0.5秒間だけ画面と黒色表示。
<fadein start="4.5" duration="0" target="2"/>　=>　画像「pht_046.jpg」をフェードインせずに表示。

６．フェードイン効果毎にハイパーリンク

　RealPixファイルを記述します。（赤字は入力必須項目）
フェードイン効果のターゲット画像毎にハイパーリンクを設定

<fadein start="2" .. target="1" url="http://www.jp.real.com/"/>
　=>　１つ目にフェードインする画像には、リアルネットワークス社の日本サイトをハイパーリンク設定。
<fadein start="6" .. target="2" url="http://www.amy.hi-ho.ne.jp/ayabe/"/>
　=>　２つ目にフェードインする画像には、家族紹介のサイトをハイパーリンク設定。
<fadein start="10" .. target="1" url="http://www.real.com/"/>
　=>　３つ目にフェードインする画像には、リアルネットワークス社の米国サイトをハイパーリンク設定。

個々の効果に設定したハイパーリンクは、<head/>内の「url」より優先されます。

この内容を記述したファイルを拡張子.rpとして保存する。
これで、RealPixファイルは完成です。
RealAudio/RealVideoの場合と同様に、メタファイル(.ram)を作成しページへリンク設定。
このサンプルを再生する　＝＞　Click Here!!
※フェードインしている画像の上でマウスを少し動かしながら見てください。

＜トップページへ＞　＜RealPixのトップへ＞