Spry prerelease 1.3のエフェクトの１つにグロー効果があります。グロー効果は指定されたオブジェクトの大きさを変化させます。大きさを変える事ができるのは画像だけでなく文字を含むブロックも可能です。特に文字が含まれるブロックを拡大縮小した場合、文字も拡大縮小されます。その際、文字のサイズ変化によって文字の改行位置や表示内容にずれが出てしまう点に注意が必要です。
グロー効果を利用するにはエフェクト対象になるオブジェクトにID名を指定します。指定したID名をSpry.Effect.GrowShrink()の最初のパラメータに指定します。以下のサンプルではボタンをクリックすると文字ブロックが100%〜50%、100%〜200%に拡大縮小されます。単位は%以外に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 grow1() {
Spry.Effect.GrowShrink("myBox", { from:"100%", to:"50%"} );
}
function grow2() {
Spry.Effect.GrowShrink("myBox", { from:"100%", to:"200%"} );
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<form>
<input type="button" value="50%に縮小" onClick="grow1()">
<input type="button" value="200%に拡大" onClick="grow2()">
</form>
<div id="myBox">Spryエフェクト<br>サンプル<br>Grow/ Shrink<br>
ここの文章が拡大、縮小されます。
</div>
</body>
</html>
Spry.Effect.GrowShrink()のパラメータにはハイライト表示までの時間を指定することができます。時間の指定は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 grow1() {
Spry.Effect.GrowShrink("myBox", {
duration:3000, from:"100%", to:"50%"} );
}
function grow2() {
Spry.Effect.GrowShrink("myBox", {
duration:3000, from:"100%", to:"200%"} );
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<form>
<input type="button" value="50%に縮小" onClick="grow1()">
<input type="button" value="200%に拡大" onClick="grow2()">
</form>
<div id="myBox">Spryエフェクト<br>サンプル<br>Grow/ Shrink<br>
ここの文章が拡大、縮小されます。
</div>
</body>
</html>
拡大と縮小を交互に切り替えることもできます。この場合、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 grow() {
Spry.Effect.GrowShrink("myBox", { from:"100%", to:"50%",
toggle: true } );
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<form>
<input type="button" value="交互に50%〜100%で拡大縮小" onClick="grow()">
</form>
<div id="myBox">Spryエフェクト<br>サンプル<br>Grow/ Shrink<br>
ここの文章が拡大、縮小されます。
</div>
</body>
</html>
エフェクトの開始時および終了時に特定の処理を行わせる事もできます。開始時の処理を指定するにはsetup、終了時にはfinishを使います。パラメータには呼び出す処理（関数）を指定します。呼び出される関数側には2つのパラメータが渡されます。1つ目はエフェクト対象となるエレメント名（オブジェクト名）、2つ目が適用されるエフェクト（オブジェクト）になります。以下のサンプルでは、エフェクト開始時／終了時にアラートダイアログを表示するものです。（サンプルを
実行する）
＊prerelease 1.3では終了時に指定した処理が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 grow() {
Spry.Effect.GrowShrink("myBox", { from:"100%", to:"50%", toggle:true,
setup:startMessage, finish:endMessage
} );
}
function startMessage() {
alert("エフェクト開始");
}
function endMessage() {
alert("エフェクト終了");
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<form>
<input type="button" value="50%〜100%に拡大縮小" onClick="grow()">
</form>
<div id="myBox">Spryエフェクト<br>サンプル<br>Grow/ Shrink<br>
ここの文章が拡大、縮小されます。
</div>
</body>
</html>
[
目次へ]
(2006.9.7, 2006.9.8)