Spry prerelease 1.3のエフェクトの１つにブラインド効果があります。ブラインド効果は指定されたオブジェクトを上方向に隠したり、上方向から表示させることができます。ブラインド効果は画像だけでなく文字を含むブロックでも可能です。ただし、エフェクト処理の際にブロックのサイズが変わってしまい、若干レイアウトが崩れることがあるので注意が必要です（pr 1.3の不具合かもしれませんが）。
ブラインド効果を利用するにはエフェクト対象になるオブジェクトにID名を指定します。指定したID名をSpry.Effect.Blind()の最初のパラメータに指定します。ブラインドの開始サイズは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 Blind() {
Spry.Effect.Blind("myBox", { from: "100%", to: "0%" });
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<form>
<input type="button" value="エフェクト処理を開始" onClick="Blind()">
</form>
<div id="myBox">Spryエフェクト<br>サンプル<br>Blind<br>
ブラインド効果です。</div>
</body>
</html>
Spry.Effect.Blind()のパラメータにはエフェクトが終了するまでの時間を指定することができます。時間の指定は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 Blind() {
Spry.Effect.Blind("myBox", { from: "100%", to: "0%",
duration:3000 });
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<form>
<input type="button" value="エフェクト処理を開始" onClick="Blind()">
</form>
<div id="myBox">Spryエフェクト<br>サンプル<br>Blind<br>
ブラインド効果です。</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 Blind() {
Spry.Effect.Blind("myBox", { from: "100%", to: "0%",
toggle:true });
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<form>
<input type="button" value="エフェクト処理を開始" onClick="Blind()">
</form>
<div id="myBox">Spryエフェクト<br>サンプル<br>Blind<br>
ブラインド効果です。</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 Blind() {
Spry.Effect.Blind("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="Blind()">
</form>
<div id="myBox">Spryエフェクト<br>サンプル<br>Blind<br>
ブラインド効果です。</div>
</body>
</html>
[
目次へ]
(2006.9.9)