Scriptaculous-Effects.pdf - Core Servletscourses.coreservlets.com/.../pdf/ajax/Scriptaculous-Effects.pdf · – Visual effects cheat sheet ... JSF 1.x & JSF 2.0, Struts Classic &

© 2009 Marty Hall

The Script aculo us JavaScriptThe Script.aculo.us JavaScript Library Part II: Visual Effects

Originals of Slides and Source Code for Examples:http://courses.coreservlets.com/Course-Materials/ajax.html

Customized Java EE Training: http://courses.coreservlets.com/Servlets, JSP, JSF 1.x & JSF 2.0, Struts Classic & Struts 2, Ajax, GWT, Spring, Hibernate/JPA, Java 5 & 6.

Developed and taught by well-known author and developer. At public venues or onsite at your location.

p j

© 2009 Marty Hall

For live Ajax & GWT training, see training t htt // l t /courses at http://courses.coreservlets.com/.

Taught by the author of Core Servlets and JSP, More Servlets and JSP and this tutorial Available at public Servlets and JSP, and this tutorial. Available at public venues, or customized versions can be held on-site at

your organization.C d l d d t ht b M t H ll



• Courses developed and taught by Marty Hall– Java 6, intermediate/beginning servlets/JSP, advanced servlets/JSP, Struts, JSF 1.x & 2.0, Ajax, GWT, custom mix of topics– Ajax courses can concentrate on one library (jQuery, Prototype/Scriptaculous, Ext-JS, Dojo) or survey several

• Courses developed and taught by coreservlets.com experts (edited by Marty)– Spring, Hibernate/JPA, EJB3, Ruby/Rails

Contact [email protected] for details

Topics in This Section

• Overview• Basic syntax• Highlighting• Showing/hiding elements• Moving, resizing, and styling elements• Effect options

5

© 2009 Marty Hall

Introduction



Overview

• Animation effects– Usually a temporary change to the color, size, opacity, or

position of some element • Possibly a compound element like a divPossibly a compound element like a div

– Sometimes gradually displays hidden element– Sometimes gradually removes item

• Purposes– Draw attention to some Ajax result

D i ( i h li id lid i )– Draw attention to error (e.g., with client-side validation)– To remove some previous result

7

Installation and Documentation

• InstallationY d h P d S i l J S i– You need the Prototype and Scriptaculous JavaScript libraries. Download from http://script.aculo.us/.

• Details in previous lecture on Scriptaculous Ajax support.

• Documentation– General Scriptaculous (effects, Ajax, drag/drop, etc.)

• http://wiki.script.aculo.us/http://wiki.script.aculo.us/– Officially supported visual effects (this lecture)

• http://wiki.script.aculo.us/scriptaculous/show/VisualEffectsUser submitted visual effects– User-submitted visual effects

• http://wiki.script.aculo.us/scriptaculous/show/EffectsTreasureChest

– Visual effects cheat sheet (one page PDF)– Visual effects cheat sheet (one page, PDF)• http://www.slash7.com/cheats/scriptaculous_fx1.pdf

8

Invoking Effects

• new Effect.someName(someID, { options })– new Effect.Highlight("myTextField'")

• Don't forget the "new"

– This is most common usage and version I will use– This is most common usage, and version I will use

• element.visualEffect(effectName, { options })– $("myTextField").visualEffect("Highlight")$( y ) ( g g )

• Remember from Prototype that $("someID") is a souped up version of document.getElementByID("someID")

– Every new Effect Blah() can also be done with– Every new Effect.Blah() can also be done with someElement.visualEffect("Blah")

• element.shortcut({ options }) ({ p })– $("myTextField").highlight()– Only a few of the most common effects have this option

9

© 2009 Marty Hall

Highlighting Effects



Highlighting Effects

• IdeaTh ff d i hi i– These effects draw attention to something important

• E.g., a new Ajax result or a validation error

• Effects– Effect.Highlight (also $("id").highlight() )

• Also known as Yellow Fade Technique, makes background color change gradually (to yellow by default), then revert to normal

• Options: startcolor, endcolor, revertcolor, keepBackgroundImage– Effect.Pulsate

• Fades in and out several times• Options: pulse

– Effect.Shake• Moves left/right several times• Options: duration, distance

11

Highlighting Effects:Header For All ExamplesHeader For All Examples

...<head><title>Scriptaculous Effects</title><head><title>Scriptaculous Effects</title><link rel="stylesheet"

href="./css/styles.css"type="text/css"/>type text/css />

<script src="./scripts/prototype.js"type="text/javascript"></script>

<script psrc="./scripts/scriptaculous/scriptaculous.js?load=effects"type="text/javascript"></script>

</head>...

If you know you will only use certain parts of scriptaculous

12

If you know you will only use certain parts of scriptaculous library, you can save download time by loading only some of it. To load all of it, just omit the "load=" part. I.e., <script src=".../scriptaculous.js"...></script>

Highlighting Effects Example

<fieldset><legend>Highlight, Pulsate, & Shake</legend><legend>Highlight, Pulsate, & Shake</legend><form action="#"><input type="button" value="Highlight (Opt 1)"

onclick="new Effect.Highlight('id-to-highlight')"/>g g ( g g )<input type="button" value="Highlight (Opt 2)"

onclick="$('id-to-highlight').highlight()"/><input type="button" value="Pulsate"

onclick="new Effect.Pulsate('id-to-highlight')"/><input type="button" value="Shake"

onclick="new Effect.Shake('id-to-highlight')"/><h2 id "id t hi hli ht"><h2 id="id-to-highlight"><img src="images/ajax.gif" align="middle"/>Important</h2></form></fieldset></fieldset>

13

Don't forget "new". It is "new Effect.Whatever(...)", not just "Effect.Whatever(...)".

Highlighting Effects Example: ResultsResults

14

© 2009 Marty Hall

Making Elements AppearMaking Elements Appear and Disappear



Fading Effects

• IdeaTh ff d ll i i ibl i ibl– These effects gradually turn invisible text visible, or gradually turn visible text invisible

• Use lower-level Effect.Scale and Effect.Opacity

• Effects– Effect.Appear

• Takes hidden element (style="display:none") and graduallyTakes hidden element (style display:none ) and gradually increases opacity

– Effect.Fade• Decreases opacity and then leaves it hiddenDecreases opacity and then leaves it hidden

– Effect.Grow• Takes hidden element and grows it from tiny to normal• Better with option of { direction: 'top-left' }Better with option of { direction: top left }

– Effect.Shrink• Decreases size, then makes it hidden

16

Fading Effects Example

<fieldset><legend>Appear, Fade, Grow, Shrink</legend>g pp , , , / g<form action="#"><input type="button" value="Fade In"

onclick="new Effect.Appear('id-to-grow')"/><input type="button" value="Fade Out"<input type="button" value="Fade Out"

onclick="new Effect.Fade('id-to-grow')"/><input type="button" value="Grow"

onclick="new Effect.Grow('id-to-grow', { direction: 'top-left'})"/>

<input type="button" value="Shrink"onclick="new Effect.Shrink('id-to-grow',

{ direction: 'top-left'})"/>{ direction: top left }) /><h2 id="id-to-grow" style="display:none">Grow/Fade</h2></form></fieldset>

17

You must start hidden elements with an inline style for display:none. You cannot use a style sheet.

Fading Effects Example: Results

18

Disappearing Effects

• Idea– Kill off elements in creative ways

• EffectsEff P ff– Effect.Puff

• Increases size while fading opacity

– Effect.SwitchOff• Supposedly simulates old-style tv turning off

– Effect.SquishSimilar to Shrink b t more reliabl to ard center• Similar to Shrink, but more reliably toward center

– Effect.Fold• Shrinks vertically, then left. Unclear on many browsers.

– DropOut• Moves lower, then off (like falling through trap door)

19

Disappearing Effects Example

<fieldset><legend>Puff, SwitchOff, Squish, Fold, DropOut</legend><legend>Puff, SwitchOff, Squish, Fold, DropOut</legend><form action="#"><input type="button" value="Puff"

onclick="new Effect.Puff('id-to-kill')"/><input type="button" value="SwitchOff"

onclick="new Effect.SwitchOff('id-to-kill')"/><input type="button" value="Squish"

onclick="new Effect Squish('id-to-kill')"/>onclick= new Effect.Squish( id-to-kill ) /><input type="button" value="Fold"

onclick="new Effect.Fold('id-to-kill')"/><input type="button" value="DropOut"p yp p

onclick="new Effect.DropOut('id-to-kill')"/><input type="button" value="Restore"

onclick="new Effect.Appear('id-to-kill')"/>h2 id "id t kill" C ti l Kill /h2<h2 id="id-to-kill">Creatively Kill</h2></form></fieldset>

20

Disappearing Effects Example: ResultsResults

21

PowerPoint-Like Effects

• IdeaMake elements appear or disappear in slide show manner– Make elements appear or disappear in slide-show manner.

– Important: if you have multiple elements (e.g., image plus text), enclose in an inner div.

• Effects• Effects– Effect.BlindUp

• Keep element fixed, make appear from bottom up.• Think of element in window as blind is raised.Think of element in window as blind is raised.

– Effect.BlindDown• Keep element fixed, make disappear from top down

– Effect.SlideUpp• Move element up into region.• Think of looking at window (with blind already up), and elements

moves up into window.Eff Slid D– Effect.SlideDown

• Slide element down out of site

22

Blind/Slide Example

<fieldset><legend>BlindUp, BlindDown, SlideUp, SlideDown</legend><legend>BlindUp, BlindDown, SlideUp, SlideDown</legend><form action="#"><input type="button" value="BlindUp"

onclick="new Effect.BlindUp('id-to-slide')"/><input type="button" value="BlindDown"

onclick="new Effect.BlindDown('id-to-slide')"/><input type="button" value="SlideUp"

onclick="new Effect SlideUp('id-to-slide')"/>onclick= new Effect.SlideUp( id-to-slide ) /><input type="button" value="SlideDown"

onclick="new Effect.SlideDown('id-to-slide')"/><input type="button" value="Restore"p yp

onclick="new Effect.Appear('id-to-slide')"/><h2 id="id-to-slide"><div><img src="images/ajax.gif" align="middle"/>Blind/Slide/di /h2</div></h2></form></fieldset>

23

Blind/Slide Example: Results

24

© 2009 Marty Hall

CSS Effects



Morph

• Idea– Gradually changes all style elements from current to

those in style specified

• Variations• Variations– Class name

• new Effect.Morph('id', 'css-class-name')p ( )

– Inline style• new Effect.Morph('id',

'color: red; border: 5; ')color: red; border: 5; ... )

– Anonymous object with styles• new Effect.Morph('id',

{ color: 'red' border: 5 }){ color: red , border: 5, ...})

26

Morph Example: HTML

<fieldset><legend>Morph</legend><legend>Morph</legend><form action="#"><input type="button" value="Morph"

onclick="new Effect Morph('id-to-morph'onclick= new Effect.Morph( id to morph , {style: 'weird'})"/>

<h2 id="id-to-morph" class="boring">Morph</h2></form></form></fieldset>

27

Morph Example: CSS

.boring {color: black;color: black;background-color: #fdf5e6;border: 0px solid cyan;font-family: serif;font family: serif;font-size: 18px;

}.weird {.weird {

color: yellow;background-color: red;border: 10px solid cyan;bo de : 0p so d cya ;font-family: Arial, sans-serif;font-size: 100px;

}}

28

Morph Example: Results

29

© 2009 Marty Hall

Lower-Level Effects



Lower-Level Effects

• IdeaEff hi h h b il– Effects upon which most others are built

• Effects– Effect.MoveEffect.Move

• new Effect.Move('id', { x: ..., y: ...})– Effect.Scale

• new Effect Scale('id' percent)• new Effect.Scale( id , percent)• Scales entire container, not just text

– Use embedded span to scale text only

– Effect Opacity– Effect.Opacity• new Effect.Opacity('id', { to: ... })

– Effect.Tween• Gradually adjusts property or function• Gradually adjusts property or function• See upcoming slide

31

Lower-Level Effects Example

<input type="button" value="Move Down/Right"onclick="new Effect.Move('id-to-move',

{x: 50, y: 100})"/><input type="button" value="Move Up/Left"

onclick="new Effect.Move('id-to-move',{x: -50, y: -100})"/>{x: 50, y: 100}) />

<input type="button" value="Bigger"onclick="new Effect.Scale('id-to-move', 150)"/>

<input type="button" value="Smaller"onclick="new Effect Scale('id to move' 66 66)"/>onclick="new Effect.Scale('id-to-move', 66.66)"/>

<input type="button" value="Low Opacity"onclick="new Effect.Opacity('id-to-move',

{to: 0.25})"/>i t t "b tt " l " di O it "<input type="button" value="Medium Opacity"

onclick="new Effect.Opacity('id-to-move', {to: 0.50})"/>

<input type="button" value="Opaque"onclick="new Effect.Opacity('id-to-move',

{to: 1.0})"/><h2 id="id-to-move" style="background:red">Move</h2>

32

Lower-Level Effects Example: ResultsResults

33

Effect.Tween

• Version 1Sets a property to start value several intermediate values end value– Sets a property to start value, several intermediate values, end value

– new Effect.Tween('textField1', 10, 50, 'value')• Sets the 'value' property of $('textField1') to 10, then to several

values between 10 and 50, then to 50,• Options: { ... } can be before last argument

• Version 2– Calls an element's method with start value, several intermediate ,

values, and then end value– new Effect.Tween('heading1', 10, 50, 'setHeight')

• Calls $('heading1').setHeight(10), then calls $('heading1') setHeight on intermediate al es then calls$('heading1').setHeight on intermediate values, then calls $('heading1').setHeight(50)

• Version 3Calls an arbitrary function with start intermediate end values– Calls an arbitrary function with start, intermediate, end values.

– new Effect.Tween($('element'), 10, 50, function(x) {... })

34

© 2009 Marty Hall

Effect Options



Effect Options: Speed

• delay – Time in seconds before effect starts– Default: 0.0

duration• duration – How long (in seconds) from start to finish– Default: 1 0Default: 1.0

• fps – Frames per secondp– Default: depends on cpu, usually between 25 and 100

• Example– new Effect.Highlight('id', { delay: 0.5, duration: 5.0 })

36

Effect Options: transition

• flicker– Randomly picks from last 25% of framesRandomly picks from last 25% of frames

• full, none– Shows last frame (final result) or first frame (nothing)

• linearlinear– Steady transition.

• pulse– Runs through transitions five timesg

• reverse– Does effect backward

• sinoidal (misspelling of sinusoidal)– Starts/ends slowly, fast in between. Default.

• spring– Overshoots final result then bounces back and forth to final value.

E l• Example– new Effect.Highlight('id', {duration: 10, transition: 'pulse'})

37

Effect Options: Callbacks

• beforeStart– Function to call after effect is queued

• beforeSetup, afterSetupF i ll f d l d fi f d– Function to call after delay and first frame renders

• beforeUpdate, afterUpdateFunction to call before/after each frame renders– Function to call before/after each frame renders

• beforeFinish, afterFinish– Function to call before/after finishFunction to call before/after finish– afterFinish can be used to trigger another effect, but effect

queues are more powerful

38

Effect Options: queue

• Idea– Specify order in which serial effects should take place– Parallel by default, and parallel effects can be

synchronized with Effect Parallel (see next slide)synchronized with Effect.Parallel (see next slide)

• Simple usage (global queue)– new Effect.Blah(..., { queue: 'front' })( , { q })– new Effect.Blah(..., { queue: end' })

• Advanced usage (named queues)– new Effect.Blah(..., { queue: { position: 'front',

scope: 'queue1' }})

39

Effect.Parallel

• IdeaL l ff i h f h i d– Lets you run several effects at one, with frames synchronized

– Although you are not required to apply effects to same element, it is usually used that way

– Effects must set { sync: true } in their options– Time options (duration, fps, etc. are applied to Effect.Parallel, not to

individual effects)

• Syntax– new Effect.Parallel(id, arrayOfEffects, { timeOptions })

• ExampleExample– new Effect.Parallel('id',

[new Effect.Blah1(..., { sync: true}),new Effect Blah2( { sync: true})]new Effect.Blah2(..., { sync: true})],

{ duration: 5 });

40

Effect.Parallel Example

<form action="#"><script type="text/javascript"><script type= text/javascript >function doParallelEffects(id) {

new Effect.Parallel([ new Effect Move(id {sync: true x: 50})[ new Effect.Move(id, {sync: true, x: 50}),

new Effect.Opacity(id, {sync: true, to: 0.5}),new Effect.Scale(id, 400, {sync: true})],

{ d ti 10 } ){ duration: 10 } );}</script><input type="button" value="Do Effects"

onclick="doParallelEffects('id-to-munge')"/><h2><span id="id-to-munge">Some Text</span></h2></form>

41

Use embedded span so that you scale text, not the fullbrowser-width heading.

Effect.Parallel Example: Results

42

Advanced Features

• Effect.toggle– Flips state back and forth– Note this (and next two) are methods, not classes

Effect multiple• Effect.multiple– Applies effects over a series of elements

• Effect tagifyText• Effect.tagifyText– Encloses each character in its own span. Helpful for

Effect.multiple to applies effects to one char at a time

• Effect.Base– Base class on which to build your own effects

• More details– http://wiki.script.aculo.us/scriptaculous/tags/effects

43

© 2009 Marty Hall

Wrap-up



Summary

• Highlighting– Effect.Highlight

• Showing/HidingEff A Eff F d Eff G Eff Sh i k– Effect.Appear, Effect.Fade, Effect.Grow, Effect.Shrink

• BasicsEffect Move Effect Scale Effect Opacity– Effect.Move, Effect.Scale, Effect.Opacity

• Remember these apply to entire container

• Combining effectsg– queue option– Effect.Parallel

45

© 2009 Marty Hall

Questions?



Documents

Scriptaculous-Effects.pdf - Core Servletscourses.coreservlets.com/.../pdf/ajax/Scriptaculous-Effects.pdf · – Visual effects cheat sheet ... JSF 1.x & JSF 2.0, Struts Classic &