画像入れ替えスクリプトを作ろう③ ~オブジェクトスタイルは元のフレームに残す~
ご無沙汰しています。
なかなか更新できなくて申し訳ありません。
なるべく定期的に更新できるようにしたいと思います…
それでは早速、フレーム入れ替えスクリプトの説明の続きを…
おさらいすると、フレーム入れ替えスクリプトはフレームの中身が入れ替わったと見せかけて、実はフレームごと位置とサイズが入れ替わっているというスクリプトです。
たとえば図1のように画像フレームが複数あって、
「左の大きい画像にはドロップシャドウを」
というルールが決められていたとします。
[図1]
画像がでかいな…
前回までのスクリプトの仕様では、大きい画像と小さい画像を入れ替え処理したとき、ドロップシャドウごと入れ替わってしまうので、大きい画像からはドロップシャドウが消え、小さい画像にドロップシャドウが付き、という状態になってしまいます(図2)
[図2]
そこで回避策ですが、ドロップシャドウをオブジェクトスタイルで設定しておけば、以下のスクリプトで「画像を入れ替え、ドロップシャドウは元のフレームに残す」という処理を擬似的に実現することができます(図3)。
[図3]
ドロップシャドウだけでなくぼかしだろうと光彩だろうと、オブジェクトスタイルに設定しておけば色々なものが入れ替えできてしまいます。
もちろんオブジェクトスタイルが設定されているフレームと設定されていないフレームの入れ替えもできます。
その処理の部分のスクリプトはこんな感じ…
var objSt_0 = obj[0].appliedObjectStyle; //1個めのオブジェクトスタイルを取得 var objSt_1 = obj[1].appliedObjectStyle; //2個めのオブジェクトスタイルを取得 obj[0].appliedObjectStyle = objSt_1; //オブジェクトスタイルを入れ替え obj[1].appliedObjectStyle = objSt_0; //オブジェクトスタイルを入れ替え
座標を入れ替えつつ、互いのオブジェクトスタイルを交換しているわけですが、前回書いた座標入れ替えの仕組みによく似ていますね。
全く違うことをしていると見せかけて、原理は一緒、ということがままあるのがスクリプトの面白さだったりします。
つまり基本原理をいくつか押さえれば、想像以上に色々な処理を書くことができるようになる、ということでもありますね。
次回は小ネタ的な記事を書こうと思います。
(つづく)