Spry prerelease 1.3のエフェクトの１つにスライド効果があります。スライド効果は指定されたオブジェクトを上方向に移動させたり、上方向から出現させることができます。スライド効果は画像だけでなく文字を含むブロックでも可能です。ただし、エフェクト処理の際にブロックのサイズが変わってしまい、若干レイアウトが崩れることがあるので注意が必要です（pr 1.3の不具合かもしれませんが）。
スライド効果を利用するにはエフェクト対象になるオブジェクトにID名を指定します。この時に単純にdivタグで囲んだだけではブラインド効果と同じになってしまいます。IDを指定したdivタグ内にさらに、もう１つdivタグを入れ、そこにスライドさせる内容を指定する必要があります。
Spry.Effect.Slide()の最初のパラメータにはスライド処理を行うID名を指定します。スライドの開始サイズはfrom、終了サイズはtoで指定します。%またはpx単位での指定が可能です。以下のサンプルではボタンをクリックすると文字ブロックが上に移動します。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryエフェクト</title>
<style type="text/css"><!--
#myBox {
width:150px;
height:150px;
background-color:#202000;
border:1px solid black;
color:white;
}
--></style>
<script type="text/javascript" src="SpryEffects.js"></script>
<script type="text/javascript"><!--
function Slide() {
Spry.Effect.Slide("myBox", { from: "100%", to: "0%" });
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<form>
<input type="button" value="エフェクト処理を開始" onClick="Slide()">
</form>
<div id="myBox">
<div>Spryエフェクト<br>サンプル<br>Slide<br>
スライド処理です。</div>
</div>
</body>
</html>
Spry.Effect.Slide()のパラメータにはエフェクトが終了するまでの時間を指定することができます。時間の指定はdurationで行い、指定する値はミリ秒になります。以下のサンプルでは3000ミリ秒（3秒）かけて上方向にブロックを移動させます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryエフェクト</title>
<style type="text/css"><!--
#myBox {
width:150px;
height:150px;
background-color:#202000;
border:1px solid black;
color:white;
}
--></style>
<script type="text/javascript" src="SpryEffects.js"></script>
<script type="text/javascript"><!--
function Slide() {
Spry.Effect.Slide("myBox", { from: "100%", to: "0%",
duration:3000 });
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<form>
<input type="button" value="エフェクト処理を開始" onClick="Slide()">
</form>
<div id="myBox">
<div>Spryエフェクト<br>サンプル<br>Slide<br>
スライド処理です。</div>
</div>
</body>
</html>
スライド効果でformで指定した状態とtoで指定した状態を交互に切り替えることもできます。この場合、toggleパラメータを指定します。指定できる値はtrueまたはfalseになります。trueを指定すると交互に切り替わります。最初の状態（指定しない状態）ではtoggle:falseとなっています。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryエフェクト</title>
<style type="text/css"><!--
#myBox {
width:150px;
height:150px;
background-color:#202000;
border:1px solid black;
color:white;
}
--></style>
<script type="text/javascript" src="SpryEffects.js"></script>
<script type="text/javascript"><!--
function Slide() {
Spry.Effect.Slide("myBox", { from: "100%", to: "0%",
toggle:true });
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<form>
<input type="button" value="エフェクト処理を開始" onClick="Slide()">
</form>
<div id="myBox">
<div>Spryエフェクト<br>サンプル<br>Slide<br>
スライド処理です。</div>
</div>
</body>
</html>
エフェクトの開始時および終了時に特定の処理を行わせる事もできます。開始時の処理を指定するにはsetup、終了時にはfinishを使います。パラメータには呼び出す処理（関数）を指定します。呼び出される関数側には2つのパラメータが渡されます。1つ目はエフェクト対象となるエレメント名（オブジェクト名）、2つ目が適用されるエフェクト（オブジェクト）になります。以下のサンプルでは、エフェクト開始時／終了時にアラートダイアログを表示するものです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryエフェクト</title>
<style type="text/css"><!--
#myBox {
width:150px;
height:150px;
background-color:#202000;
border:1px solid black;
color:white;
}
--></style>
<script type="text/javascript" src="SpryEffects.js"></script>
<script type="text/javascript"><!--
function Slide() {
Spry.Effect.Slide("myBox", { from: "100%", to: "0%", toggle:true,
setup:startFunc, finish:endFunc });
}
function startFunc() {
alert("エフェクト開始");
}
function endFunc() {
alert("エフェクト終了");
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<form>
<input type="button" value="エフェクト処理を開始" onClick="Slide()">
</form>
<div id="myBox">
<div>Spryエフェクト<br>サンプル<br>Slide<br>
スライド処理です。</div>
</div>
</body>
</html>
[
目次へ]
(2006.9.10)