Spry prerelease 1.3のエフェクトの１つに潰し効果があります。潰し効果は指定されたオブジェクトを潰し（縮退）ます。潰す事ができるのは画像だけでなく文字を含むブロックも可能です。特に文字が含まれるブロックに対してエフェクトを施した場合、文字も縮小されます。その際、文字のサイズ変化によって文字の改行位置や表示内容にずれが出てしまう点に注意が必要です。
潰し効果を利用するにはエフェクト対象になるオブジェクトにID名を指定します。指定したID名をSpry.Effect.Squish()の最初のパラメータに指定します。以下のサンプルではボタンをクリックすると文字ブロックが潰されます。（サンプルを
実行する）
<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 Squish() {
Spry.Effect.Squish("myBox");
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<form>
<input type="button" value="縮退" onClick="Squish()">
</form>
<div id="myBox">Spryエフェクト<br>サンプル<br>Squish<br>
内容が潰れてしまいます。</div>
</body>
</html>
Spry.Effect.Squish()のパラメータには潰すまでの時間を指定することができます。時間の指定は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 Squish() {
Spry.Effect.Squish("myBox", {
duration:3000 });
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<form>
<input type="button" value="縮退" onClick="Squish()">
</form>
<div id="myBox">Spryエフェクト<br>サンプル<br>Squish<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 Squish() {
Spry.Effect.Squish("myBox", {
toggle:true });
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<form>
<input type="button" value="縮退／復帰" onClick="Squish()">
</form>
<div id="myBox">Spryエフェクト<br>サンプル<br>Squish<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 Squish() {
Spry.Effect.Squish("myBox", { 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="Squish()">
</form>
<div id="myBox">Spryエフェクト<br>サンプル<br>Squish<br>
内容が潰れてしまいます。</div>
</body>
</html>
[
目次へ]
(2006.9.8)