Plant Growing Effect

I've seen a number of commercials where the graphics look like plants growing, and sometimes are literally graphics of vines, with leaves popping up on them as if they're growing in timelapse.
I know this effect could be done in After Effects, but it seems like it would take a whole lot of keyframes.
Does anyone know of a better program to do these effects in? It seems something like 3d Studio Max, except 2d would be the best because then the objects aren't just still images, or video clips, but something you can change the properties that make it up. Is there a program that works well in conjunction with After Effects to pull off these type of effects?
Thanks.

That's easy with with Max and Guruwares Ivy-generator plugin (Free!!)<br />http://www.guruware.at/main/ivy/index.html<br /><br /><br /><br /><[email protected]> wrote in message<br />news:[email protected]..<br />> I've seen a number of commercials where the graphics look like plants<br />growing, and sometimes are literally graphics of vines, with leaves popping<br />up on them as if they're growing in timelapse.<br />><br />> I know this effect could be done in After Effects, but it seems like it<br />would take a whole lot of keyframes.<br />><br />> Does anyone know of a better program to do these effects in? It seems<br />something like 3d Studio Max, except 2d would be the best because then the<br />objects aren't just still images, or video clips, but something you can<br />change the properties that make it up. Is there a program that works well in<br />conjunction with After Effects to pull off these type of effects?<br />><br />> Thanks.

Similar Messages

Spry grow effect glitch.

I'm trying to do a gallery something similar to:
http://labs.adobe.com/technologies/spry/demos/gallery/
but the grow effect on my Spry page is glitchy in the sense that it
jumps/shakes on rollover and sometimes it gets stuck and doesn't
mouseout. You can see what I'm talking about here:
http://www.tinsley.com/www/test/
. Not sure what the problem is other than I'm using tables and not
div's but not sure if that would cause this. The code DW is
generating for the effect is the following:
<a href="images/work/large/AdMNIJul.jpg" class="thickbox"
title="Your fly is down and you couldn't be happier."
rel="gallery">
<img src="images/work/medium/AdMNIJul.jpg" alt="thumb"
width="20" height="20" onmouseover="MM_effectGrowShrink(this, 500,
'20px', '70px', false, false, false)"
onmouseout="MM_effectGrowShrink(this, 300, '70px', '20px', false,
false, false)" onclick="MM_effectGrowShrink(this, 500, '70px',
'20px', false, false, false)" />
</a>
Any help would be appreciated. Thanks in advance.

firefox gives error;
quote:
Spry.Effect.DoGrow is not a function
GrowShrink(img#cooperfineart.jpg cooperfineart.jpg, 1000,
"150px", "520px", true, false, false)port.asp (line 23)
onclick(click clientX=0, clientY=0)port.asp (line 1)
[Break on this error] Spry.Effect.DoGrow(targetElement,
{duration: duration, from: from, to: to, togg...
port.asp (line 23)
Spry.Effect.DoGrow is not a function
becouse Spry.Effect.DoGrow is SPRY 1,5 code (i think)
maby update your SPRY, your using 1,4. current release is
1,6

Gallery using spry grow effect that targets the clicked thumbnail

Hello. I'm trying to build a gallery with thumbnails that,
when clicked, grow to display the full-size image. I created an xml
spry data set and I'm using a spry:repeat to go through each row of
the data set and create the thumbnail. Then I attach the grow
effect, but since the target is each of the thumbnails, I need an
unique id for each. I tried using id="thumb_{ds_RowID}" (and
ds_RowCount and ds_RowNumber) but it doesn't work.
I guess ds_RowID is not valid outside the spry:region, but
perhaps there's a way around this?
Can anyone give me any sort of advice on how I could make
this work? Thank you.

Hello Dexter,
By looking in the code I think the problem appears because of
borders that are not defined in the CSS and on IE they are reported
as NaN. Try to change the border definition for the element to 0px
explicitly.
Could you show me a link where you have the page with the
problem or give me the CSS definition of the element that is
initially invisible so I can test this bug and do the corrections.
Cristian MARIN

Is it possible to change direction of growth for the grow effect?

I would like to use the grow effect on a page with a few images.
The images are going to be floated rigth of the text that goes with them and the problem I have is that the images grows in part to the right of the visible window and are partially out of view creating an horizontal scrolling bar.
I used the default value for var growFromCenter; which is true. I changed it also to false but the results are even worst because it seems to grow from the top left corner of the image to the right and bottom.
I could not figure out, I am a begginer at javascript, if there is some parameter that I could modify to make it grow toward the right of the thumbnail position.
Thank you

I achieved the effect I was looking for by changing the following in the SpryEffects.js
I am using growFromCenter set as true.
changed
toPos.x = startOffsetPosition.x + (originalWidth - toRect.width) / 2.0;
to
toPos.x = startOffsetPosition.x + (originalWidth - toRect.width);
to achieve the growth to the right of the thumbnail image.
Still I would like to hear comments about my solution and any other suggestions or alternatives to achieve the same result.
Although many of the variables are easy to understand by their names others are not so obvious to me. Is there a resource where I can find a description of the variables used in SrpyEffects.js
Thank you.

No 3D chart anti-aliasing with 3D Grow effect on Mac Mini

Today I have just purchased a Mac mini for the main purpose of rendering Keynote animated 3D charts for a doco I'm editing. I am using Keynote '08 (4.0.3).
As it turns out, anti-aliasing works on the 3D charts as long as there is no '3D Grow' effect on them. However, if I apply a '3D Grow' effect and view the slideshow, I get the jaggies and no anti-aliasing, even when the animation has finished. I also get no anti-aliasing when exporting as Quicktime in any format.
I get anit-aliasing on my Mac Pro at work, but not on this Mac Mini so I wonder if there is some incompatibility with Keynote and the Mac mini graphics capabilities.

Hi, thanks for your response.
Actually, I have no transitions grayed out, although for the build effects on Charts, 'Flame' is indicated as unable to be used on this computer.... so you're right, it doesn't look good. Strange that I can use a build effect like Sparkle or Shimmer which are anti-aliased but for 3D grow, some growing blocks of a chart can't be anti-aliased
I guess it's back to the store to try and exchange this mac mini for an Imac.

Grow Effect with "useCSSBox: true" Problem

Good day,
I am using the spry grow effect with the “useCSSBox:
true”. This works fine in the example( example 5) that comes
with spry(Samples directory->effects)
The problem occurs when the window is initially hidden like
“Grow example 3.1” and it goes form 0% to 100%.
Spry.Effect.Grow('example5', {duration: 1000, from: '0%',
to: '100%', toggle:true, useCSSBox: true});
Then I get an Error on line 1218 char 3 in the IE and nothing
happen.
Can somebody help me or is it a bug
Thanks in advance for any reaction

Hello Dexter,
By looking in the code I think the problem appears because of
borders that are not defined in the CSS and on IE they are reported
as NaN. Try to change the border definition for the element to 0px
explicitly.
Could you show me a link where you have the page with the
problem or give me the CSS definition of the element that is
initially invisible so I can test this bug and do the corrections.
Cristian MARIN

Spry Gallery Demo Grow effect problems

Im learning and trying to recreate the spry gallery demo with
the growing thumbnails.
I have replicated pretty much all the code and used the same
onmouseover gallery.js and spryeffects.js but I just get an error
on page and no grow.
If I use the attribute panel and use the grow effect it does
work but the thumbnails around the one growing are pushed around
instead of the growing thumbnail appearing on top.
I'm stuck!
My code for the thumnail region is here:
<div id="thumbcontainer" spry:region="dsGallery">
<div spry:repeat="dsGallery"
onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0],
'75', '75');"
onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
<img src="thumbnails/{@thumbpath}" alt="" width="32"
height="32" id="tn{ds_RowID}" style="left: 0px; right: 0px;"
spry:setrow="dsGallery" class="thumbImage"/>
</div>
</div>
Any suggestions

I'm confused. The example for Spry gallery DOESN'T use an
anchor tag around the thumbnails... In your article and in some
posts, you say that the structure is:
<div id="thumbnails">
<div class="thumbnail">
<a href="image.jpg"><img src="image.jpg"
/></a>
</div>
</div>
However, I downloaded Spry_1_6_1_022408 and copied the
example thumbnails element & content verbatim:
<div id="thumbnails" spry:region="dsPhotos dsGalleries
dsGallery">
<div spry:repeat="dsPhotos"
onclick="HandleThumbnailClick('{ds_RowID}');"
onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0],
'{@thumbwidth}', '{@thumbheight}');"
onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
<img id="tn{ds_RowID}" alt="thumbnail for {@thumbpath}"
src="galleries/{dsGalleries::@base}{dsGallery::thumbnail/@base}{@thumbpath}"
width="24" height="24" style="left: 0px; right: 0px;" />
</div>
<p class="ClearAll"></p>
</div>
NO ANCHOR TAG. Even if you look in the generated source,
there's no link surrounding the thumbnail image.
So I guess I am unclear as to how to apply your fix? Using
the 1.6.1 version, the sample function code you show doesn't match,
nor does it seem to reflect your modifications...
Any ideas? I managed to track down your post about the bug in
IE 7 (it exists in IE6, too) [the demo link (
http://mad.sweepingdesign.com/index.html)
goes to a page that says "It works!"]
The actual article can be found here, though the demo link
shows nothing:
http://www.sweepingdesign.com/wordpress/2007/11/18/spry-gallery-demo-and-ie7-z-index-bug/

Keynote – 2D chart grow effect?

Hi, i've made a graph that i want to animate with the grow effect that is available for 3D graphs. Only i want the graph to be 2D. Any way to work around this?
Heres a video of basically what i want to achieve: http://www.youtube.com/watch?feature=player_embedded&v=hAlBvw-UR5Y (just the graph movement, don't worry about the faded edge and text movement etc.)
Urgent, thanks in advance for all help!

Hi there,
I had the same problem, and I don't think Keynote offers a grow build for 2D pie charts. What I did was to convert the chart into 3D, move it to centre position using the rotate knob and the set the depth of the chart (inspector -> charts -> bottom) to zero. This almost looks like a 2D pie chart and was sufficient to me, hope this helps.
Niklas

Spry Grow Effect

I've added the grow effect to my site to grow and shrink
images on my portfolio page.
It works fine on my localhost server but when I upload it to
my webserver (Fasthosts: Windows IIS 6) it just stops working. All
the code is present, the function being called correctly, but it
just doesn't do anything.
Help me?
My page is at:
http://www.designermonkey.co.uk/port.asp?mod=port&port=top10
Designermonkey">Designermonkey

firefox gives error;
quote:
Spry.Effect.DoGrow is not a function
GrowShrink(img#cooperfineart.jpg cooperfineart.jpg, 1000,
"150px", "520px", true, false, false)port.asp (line 23)
onclick(click clientX=0, clientY=0)port.asp (line 1)
[Break on this error] Spry.Effect.DoGrow(targetElement,
{duration: duration, from: from, to: to, togg...
port.asp (line 23)
Spry.Effect.DoGrow is not a function
becouse Spry.Effect.DoGrow is SPRY 1,5 code (i think)
maby update your SPRY, your using 1,4. current release is
1,6

Grow effect and growCenter

Hi -
I'm trying out the grow effect using the code from
http://labs.adobe.com/technologies/spry/preview/samples/effects/growThumbnails.html
to set the z-index, however when I insert the
growCenter:false switch
into the code, the image grows underneath the bordering
elements, which
have no z-index specified. Without the growCenter switch, the
grow and
toggle work perfectly. My images are to the left side of the
window,
however, so I need the image to grow from the upper left
corner.
I've copied the JavaScript verbatim from the example page,
and the only
modification I've made is this:
effects[targetElement.id] = new
Spry.Effect.Grow(targetElement,
{duration: 400, from: '100%', to: '500%', toggle: true,
growCenter:false, setup:setzindex, finish:resetzindex});
...where I've added the growCenter:false.
Has anyone else run into this, and is there a quick fix?
Thanks,
Rod

Hello Rod,
I think you should try into your CSS to put for every image
position: relative.
Regards,
Cristian MARIN

Grow & shrink effect not working

Hello all, my issue is I cannot get the grow effect to work. I am a newbie so I have been watching tutorials. The link to my site shows a bouquet in the center of the page that I was using as a test for the grow effect. The 2 bouquet images on the right of the page is also set to grow bout I dont know if it can grow to the left. Anyway, I just cant get anything to work. All the pictures just appear in full size.
I have the behavior set to grow, from 0% to 100% on click. Here is the link. http://www.stevenleespage.com/bouquets.html
Here is the code. Thanks for the help and I hope I posted in the correct location. I'm not sure if this is where I am supposed to post problems.
Thanks again,
Steve
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Ricos - Bouquets</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="mm_spa.css" type="text/css" />
<style type="text/css">

</style>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_effectGrowShrink(targetElement, duration, from, to, toggle, referHeight, growFromCenter)
    Spry.Effect.DoGrow(targetElement, {duration: duration, from: from, to: to, toggle: toggle, referHeight: referHeight, growCenter: growFromCenter});
</script>
</head>
<body bgcolor="#0000" background=>
<table width="1115" height="752" border="0" cellpadding="0" cellspacing="0" bordercolor="#00FF00">
<tr bgcolor="#220103">
   <td height="150" colspan="6" nowrap="nowrap" bgcolor="#522449"><img src="Images/Ricos/fuchsia-background_800x600.jpg" alt="title" width="1108" height="150" /></td>
</tr>
<tr bgcolor="#FF9900">
     <td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
</tr>
<tr bgcolor="#FF080E">
     <td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="2" border="0" /></td>
</tr>
<tr bgcolor="#FF9900">
     <td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
</tr>
<tr bgcolor="#FF080E">
     <td colspan="6" bgcolor="#9900FF"><img src="mm_spacer.gif" alt="" width="1" height="18" border="0" /></td>
</tr>
<tr bgcolor="#FF9900">
     <td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
</tr>
<tr bgcolor="#FF080E">
     <td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="2" border="0" /></td>
</tr>
<tr bgcolor="#FF9900">
     <td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
</tr>
<tr>
    <td width="221" height="557" valign="top" id="navborder"><br />
    <table border="0" cellspacing="0" cellpadding="0" width="220" id="navigation">
        <tr>
          <td width="220"><a href="ricos.html" class="navText">HOME </a></td>
        </tr>
        <tr>
          <td width="220"><a href="http://www.yellowpages.com/santa-rosa-ca/mip/pricess-botique-3411701/m ap?lid=3411701" target="_blank" class="navText">MAP & DIRECTIONS </a></td>
        </tr>
        <tr>
          <td width="220"><a href="wedding.html" class="navText">WEDDING APPAREL </a></td>
        </tr>
        <tr>
          <td width="220"><a href="prom.html" class="navText">PROM APPAREL </a></td>
        </tr>
        <tr>
          <td width="220"><a href="1stcommunion.html" class="navText">1ST COMMUNION APPAREL </a></td>
        </tr>
        <tr>
          <td width="220"><a href="baptism.html" class="navText">BAPTISM APPAREL </a></td>
        </tr>
        <tr>
          <td><a href="javascript:;" class="navText">BOUQUETS </a></td>
        </tr>
        <tr>
          <td><a href="decorations.html" class="navText style6 style7">DECORATIONS </a></td>
        </tr>
        <tr>
          <td><a href="centerpieces.html" class="navText">CENTER PIECES </a></td>
        </tr>
        <tr>
          <td><a href="jewelry.html" class="navText">JEWELRY</a></td>
        </tr>
        <tr>
          <td><a href="contact.html" class="navText style6 style7">GALLERY</a></td>
        </tr>
        <tr>
          <td><a href="contact.html" class="navText style6 style7">CONTACT</a></td>
        </tr>
    </table>     </td>
    <td width="25"><img src="mm_spacer.gif" alt="" width="25" height="1" border="0" /></td>
    <td width="617" align="left" valign="top"><img src="mm_spacer.gif" alt="" width="305" height="1" border="0" /><br />
     <br />
    <table border="0" cellspacing="0" cellpadding="0" width="459">
      <tr>
        <td width="459" class="pageName style16">Beautiful Bouquets </td>
      </tr>
    </table>
    <p class="style13">All of our bouquets are custom hand crafted for any occasion. </p>
    <p class="style13">Please contact us for color and design. <a href="contact.html">CONTACT</a> or visit our store. </p>
    <table width="614" height="420" border="0" align="left" cellpadding="1">
      <tr>
        <td width="600" height="411" align="left" valign="top"><div align="left"><img src="Images/Ricos/bouquet2.jpg" width="600" height="415" onclick="MM_effectGrowShrink(this, 1000, '0%', '100%', true, false, false)" /></div></td>
      </tr>
    </table>    </td>
    <td width="6"><img src="mm_spacer.gif" alt="" width="5" height="1" border="0" /></td>
    <td width="241" valign="top"><div align="left">
      <table width="230" height="221" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000">
        <tr>
          <td height="18" colspan="3" align="center" class="columnHeader"> </td>
          </tr>
        <tr>
          <td width="5"> </td>
            <td width="200" height="150" class="smallText"><p align="left"> </p>
           <br />          </td>
            <td width="5"><img src="mm_spacer.gif" alt="" width="5" height="1" border="0" /></td>
          </tr>
      </table>
      <table width="230" height="234" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000">
        <tr>
          <td height="50" colspan="3" align="center" class="columnHeader"><span class="smallText"><img src="Images/Ricos/whtbouquet2.jpg" width="400" height="303" onclick="MM_effectGrowShrink(this, 1000, '0%', '100%', false, false, true)" /></span></td>
          </tr>
        <tr>
          <td width="5"> </td>
            <td width="200" height="150" class="smallText"><p align="left"><img src="Images/Ricos/purpbouquet.jpg" width="400" height="300" onclick="MM_effectGrowShrink(this, 1000, '0%', '100%', false, false, true)" /></p>
             <br />            </td>
            <td width="5"><img src="mm_spacer.gif" alt="bouquets" width="5" height="1" border="0" /></td>
          </tr>
      </table>
    </div></td>
    <td width="5" align="left"> </td>
</tr>
<tr>
    <td width="221" height="19"> </td>
    <td width="25"> </td>
    <td width="617"><div align="center"><a href="index.html">web design by Steven Lee </a></div></td>
    <td width="6"> </td>
    <td width="241"> </td>
    <td width="5"> </td>
</tr>
</table>
</body>
</html>

I wasn't so sure that I posted in the correct location. Sorry for that. I new to forums and don't know my way around.
I didnt even know of a Spry assets folder. I thought Dreamweaver took care of that. The video tutorials didn't talk about that and it looked to simple.
I will check out the other thread and if thats ok can I ask you for any additional questions?
Thanks for your time.
Steve

Trying to achieve grow/shrink to nothing effect

I'n trying to create a vertical panel where items can be added which are displayed top to bottom. Each "item" is a box with some interesting information to display and should be shown for a few seconds.
The space where it will be displayed will first grow to make room, then fade in, display for a few seconds, fade out, and shrink back to nothing. When it grow/shrinks, the intention is that the items above and below will make room/close the gap accordingly.
Now, I've gotten quite far to get this to work with two different solutions, but both have a problem.
Solution 1
Put the "item" in a Group. Then use Timelines to animate its ScaleYProperty to simulate the shrinking to nothing effect.
Problem: As soon as I put things in a group, the content of the "Item" is too small (it uses the preferred size instead of expanding to fill available space). If I use a StackPane it looks exactly how I want, but the ScaleYProperty won't work properly then (because StackPane ignores transformations in its size calculations).
I've tried forcing the preferred size to the correct value. Problem: I don't know the correct value, I don't know how to find out how big the "content" area should be. Doing a getWidth() of the vertical panel and substracting the Insets comes close, but there's always a small difference -- in other words, unsatisfactory.
...stuck
Solution 2
Replace the "item" with Rectangles that I resize to make space for the "item" before actually adding it. The shrinking effect works great... but I cannot get the grow effect to work properly because I donot know how big the "item" will be... there's no way to find out how big something will be once added to the scene graph.
Fiddling with adding the item temporarily to the scene graph, then trying to get its size somehow didn't work or had annoying side effects.
So, basically, I'm stuck with both approaches.
First because Groups donot allow their content to fill available space... (and finding out the correct preferred size seems not possible)...
Second because I cannot find out how big something will be BEFORE adding it to a scene graph...
Any ideas what I can still try?

Okay, a fully working example ripped completely out of its context :)
This needs some keyboard control. Press 1/2 to adjust the "Playback rate" and 9/0 to adjust "Volume". In the center of the screen boxes will appear showing what you just did, and will fade out after a while. Adjusting both settings shortly after each other can result in two bars being displayed (this is intended) and shows the effect I want in greater detail.
The part I'm not happy with is where I hard-code the Preferred Width (search for setPrefWidth) because it is not correct (the width is only an estimate and changes when a slider is displayed... so the next slider added gets a different preferred width).
Possible solutions are some other way of "shrinking" a group without using the ScaleYProperty; somehow getting the correct preferred width; somehow getting Group to respect the "available space" for my StackPane... etc...
It works great in my opinion, just this little snag I want to get rid of.
playback-state-overlay.css
.root {
-c-main: rgb(173, 216, 230);
-c-shadow-highlight: derive(-c-main, -50%);
color-content-background: derive(-c-main, -80%);
.label {
-fx-text-fill: white;
.slider {
-fx-show-tick-labels: true;
-fx-show-tick-marks: true;
.slider .axis {
-fx-tick-label-fill: -c-main;
.slider .thumb {
-fx-background-color: rgb(0, 0, 0, 0.5), rgb(64, 64, 64), linear-gradient(to bottom, yellow, white, orange);
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0.3em, 0.25em, 0.2em;
-fx-padding: 0.75em 0.3em 0.75em 0.3em;
.slider .track {
-fx-background-color: -c-shadow-highlight, derive(-c-main, -22%), linear-gradient(to bottom, derive(-c-main,-15.5%), derive(-c-main,34%) 30%, derive(-c-main,68%));
-fx-background-insets: 1 0 -1 0, 0, 1;
-fx-background-radius: 0.2em, 0.2em, 0.1em;
-fx-padding: 0.208333em;
.axis:top {
    -fx-border-color: transparent transparent #aaaaaa transparent;
.axis:right {
    -fx-border-color: transparent transparent transparent #aaaaaa;
.axis:bottom {
    -fx-border-color: #aaaaaa transparent transparent transparent;
.axis:left {
    -fx-border-color: transparent #aaaaaa transparent transparent;
.axis-tick-mark {
-fx-stroke: #aaaaaa;
.item {
-fx-font: 22pt "Arial";
.content-box {
-fx-background-color: color-content-background;
-fx-background-radius: 20;
-fx-padding: 30;
-fx-hgap: 20;
ShrinkTest.java
package hs.javafx;
import javafx.animation.Animation.Status;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.beans.binding.NumberExpression;
import javafx.beans.binding.StringBinding;
import javafx.beans.binding.StringExpression;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.ListChangeListener;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.RowConstraints;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;
public class ShrinkTest extends Application {
private final Player player = new Player();
private final VBox playbackStateOverlay = new VBox() {{
    getStyleClass().add("content-box");
    setVisible(false);
public static void main(String[] args) {
    Application.launch(ShrinkTest.class, args);
@Override
public void start(Stage primaryStage) throws Exception {
    StackPane stackPane = new StackPane();
    playbackStateOverlay.getChildren().addListener(new ListChangeListener<Node>() {
      @Override
      public void onChanged(ListChangeListener.Change<? extends Node> change) {
        playbackStateOverlay.setVisible(!change.getList().isEmpty());
    stackPane.setOnKeyPressed(new EventHandler<KeyEvent>() {
      @Override
      public void handle(KeyEvent event) {
        if(event.getCode() == KeyCode.DIGIT1) {
          player.rateProperty().set(player.rateProperty().get() - 0.1);
        if(event.getCode() == KeyCode.DIGIT2) {
          player.rateProperty().set(player.rateProperty().get() + 0.1);
        if(event.getCode() == KeyCode.DIGIT9) {
          player.volumeProperty().set(player.volumeProperty().get() - 1);
        if(event.getCode() == KeyCode.DIGIT0) {
          player.volumeProperty().set(player.volumeProperty().get() + 1);
        event.consume();
    stackPane.getChildren().add(new GridPane() {{
      getColumnConstraints().add(new ColumnConstraints() {{
        setPercentWidth(25);
      getColumnConstraints().add(new ColumnConstraints() {{
        setPercentWidth(50);
      getColumnConstraints().add(new ColumnConstraints() {{
        setPercentWidth(25);
      getRowConstraints().add(new RowConstraints() {{
        setPercentHeight(10);
      add(new Button("Hi"), 0, 0); // something to get focus
      add(playbackStateOverlay, 1, 1);
    Scene scene = new Scene(stackPane);
    scene.getStylesheets().add("playback-state-overlay.css");
    primaryStage.setScene(scene);
    primaryStage.setFullScreen(true);
    primaryStage.show();
    final StringBinding formattedVolume = new StringBinding() {
        bind(player.volumeProperty());
      @Override
      protected String computeValue() {
        return String.format("%3d%%", player.volumeProperty().get());
    final StringBinding formattedRate = new StringBinding() {
        bind(player.rateProperty());
      @Override
      protected String computeValue() {
        return String.format("%4.1fx", player.rateProperty().get());
    player.volumeProperty().addListener(new ChangeListener<Number>() {
      @Override
      public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
        addOSD(createOSDItem("Volume", 0.0, 100.0, player.volumeProperty(), formattedVolume));
    player.rateProperty().addListener(new ChangeListener<Number>() {
      @Override
      public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
        addOSD(createOSDItem("Playback Speed", 0.0, 4.0, player.rateProperty(), formattedRate));
private static Node createOSDItem(final String title, final double min, final double max, final NumberExpression value, final StringExpression valueText) {
    return new VBox() {{
      setId(title);
      getStyleClass().add("item");
      getChildren().add(new BorderPane() {{
        setLeft(new Label(title) {{
          getStyleClass().add("title");
        setRight(new Label() {{
          getStyleClass().add("value");
          textProperty().bind(valueText);
      getChildren().add(new Slider(min, max * 1.01, 0) {{ // WORKAROUND: 1.01 to work around last label display bug
        valueProperty().bind(value);
        setMinorTickCount(4);
        setMajorTickUnit(max / 4);
public void addOSD(final Node node) { // id of node is used to distinguish same items
    String id = node.getId();
    for(Node child : playbackStateOverlay.getChildren()) {
      if(id.equals(child.getId())) {
        Timeline timeline = (Timeline)child.getUserData();
        if(timeline.getStatus() == Status.RUNNING) {
          timeline.playFromStart();
        return;
    final StackPane stackPane = new StackPane() {{
      getChildren().add(node);
      setPrefWidth(playbackStateOverlay.getWidth() - playbackStateOverlay.getInsets().getLeft() - playbackStateOverlay.getInsets().getRight());
    node.opacityProperty().set(0);
    final Group group = new Group(stackPane);
    group.setId(node.getId());
    stackPane.setScaleY(0.0);
    final EventHandler<ActionEvent> shrinkFinished = new EventHandler<ActionEvent>() {
      @Override
      public void handle(ActionEvent event) {
        playbackStateOverlay.getChildren().remove(group);
    final Timeline shrinkTimeline = new Timeline(
      new KeyFrame(Duration.seconds(0.25), shrinkFinished, new KeyValue(stackPane.scaleYProperty(), 0))
    final EventHandler<ActionEvent> fadeInOutFinished = new EventHandler<ActionEvent>() {
      @Override
      public void handle(ActionEvent event) {
        group.setId(null);
        shrinkTimeline.play();
    final Timeline fadeInOutTimeline = new Timeline(
      new KeyFrame(Duration.seconds(0.5), new KeyValue(node.opacityProperty(), 1.0)),
      new KeyFrame(Duration.seconds(2.5), new KeyValue(node.opacityProperty(), 1.0)),
      new KeyFrame(Duration.seconds(3.0), fadeInOutFinished, new KeyValue(node.opacityProperty(), 0.0))
    EventHandler<ActionEvent> expansionFinished = new EventHandler<ActionEvent>() {
      @Override
      public void handle(ActionEvent event) {
        fadeInOutTimeline.play();
    Timeline expansionTimeline = new Timeline(
      new KeyFrame(Duration.seconds(0.25), expansionFinished, new KeyValue(stackPane.scaleYProperty(), 1.0))
    group.setUserData(fadeInOutTimeline);
    playbackStateOverlay.getChildren().add(group);
    expansionTimeline.play();
public static class Player {
    private final IntegerProperty volume = new SimpleIntegerProperty(50);
    private final DoubleProperty rate = new SimpleDoubleProperty(1.0);
    public IntegerProperty volumeProperty() {
      return volume;
    public DoubleProperty rateProperty() {
      return rate;
}

Need help with oscillating grow function in effects

I am using the grow effect on a mouse over instead of a
click. I used the same code that was used in the example
distributed with the Spry 1.6 release. In the example it used an
onmouseclick. I am using an onmouseover and onmouseout to grow and
shrink the images.
At first I used one function and just called the same
function for onmouseover and onmouseout and specified the toggle
option. The problem with this, is that the image can get "stuck"
into the reverse state, and as you mouseover it shinks and
onmouseout it grows.
So I used two different functions for onmouseover and
onmouseout. One grows and the other shrinks. This works ok if you
use the toggle option set to true on at least one of the two
functions. The problem is that you can still get one of the images
stuck in the wrong size and it toggles the wrong way. If you set
them both to false, the image oscillates between the two states as
you mouseout. I assumed that setting toggle to false for both the
grow and shrink would avoid images stuck in the wrong direction,
but it is causing this strange oscillation. Am I using this option
wrong?
Thank you in advance for any clues you can provide....
Here are my code snippets:
on the Page:
<div class="thumbnails"><div><img height="24"
alt="your friend's icon" onmouseover="toggleThumbU(this)"
onmouseout="toggleThumbD(this)" id="img${status.index}"
style="padding:2px;" src="${contact.imageUrl}"
/></div></div>
In my Javascript code:
var effects = [];
function toggleThumbU(targetElement)
if (typeof effects[targetElement.id] == 'undefined')
effects[targetElement.id] = new
Spry.Effect.Grow(targetElement, {duration: 200, from: '100%', to:
'340%', toggle: false, setup:setzindex, finish:resetzindex});
effects[targetElement.id].start();
function toggleThumbD(targetElement)
if (typeof effects[targetElement.id] == 'undefined')
effects[targetElement.id] = new
Spry.Effect.Grow(targetElement, {duration: 200, from: '340%', to:
'100%', toggle: false, setup:setzindex, finish:resetzindex});
effects[targetElement.id].start();

I have the same issue, anyone know a way around this? I have
a image i wish to grow onmouse over, then using the same behavior
but shrink with mouseout, it gets some wierd issues, like if you
put the mouse in between it oscillates back and forth, its not
smooth.

Grow and Shrink the gallery's "mainImage"

Grow and Shrink the gallery's "mainImage"
I may pursue another option with the
Class on trigger
In this sample, a CSS class is set on the trigger to alert the user that something happens on the element. This is set as an option in the constructor.
<script type="text/javascript">
var highlight_tooltip = new Spry.Widget.Tooltip('highlighttrigger', '#classonme', {hideDelay:500, hoverClass:"enlarge"})
</script>
We have the main image in the photo gallery at full size.
This is the image placeholder called "main image".
Currently it is looks like this:
<img id="mainImage" alt="main image" src=""/>
I assume we add a mark-up similar to the icon grow effects code.
So I will take a stab it now;
<div id="Photograph" spry:region="dsPhotograph" onclick="HandlePhotograhClick('{ds_RowID}');" onmouseover="GrowPhotograph(this.getElementsByTagName('img')[0], '{@thumbwidth}', '{@Photographheight}');" onmouseout="ShrinkPhotograph(this.getElementsByTagName('img')[0]);"> <img src="galleries/{dsGalleries::@base}{dsGallery::Photograph/@base}{@Photographpath}" alt="Photograph for {@Photographpath}" width="Not Sure" height="Not Sure" id="tn{ds_RowID}" style="left: 0px; right: 0px;" onmouseover="this.style.cursor='pointer'" /> </div>
      <p class="ClearAll"></p>
//need to look at ClearAll
    </div>
//Now Add stuff the gallery.js
// Show the image of the current selected row inside the dsPhotos data set.
function ShowCurrentImage()
     var curRow = dsPhotos.getCurrentRow();
     SetMainImage("galleries/" + dsGalleries.getCurrentRow()["@base"] + "images/" + curRow["@path"], curRow["@width"], curRow["@height"], "tn" + curRow["ds_RowID"]);
//I Need a variable like;
["@bigPhoto"]
//Now I need add a function
function HandlePhotographClick(id)
     //StopSlideShow();
     //dsPhotos.setCurrentRow(id);
     //ShowCurrentImage();
        //call Photograph grow ???
// Trigger the animation of the Photograh growing to it's next largest size.
function GrowPhotograph(img, width, height)
     Spry.Utils.addClassName(img, "inFocus");
     img.style.zIndex = 150;
     var id = img.getAttribute("id");
        //ADD This to the function GrowThumbnail in Gallery.js
//after//
     //var twidth = Math.floor(width * .75);
     //var theight = Math.floor(height * .75);
     //var tx = (gThumbWidth - twidth) / 2;
     //var ty = (gThumbHeight - theight) / 2;
     var pwidth = Math.floor(width * 1.75);
     var pheight = Math.floor(height * 1.75);
     var px = (pThumbWidth - pwidth) / 2;//need to check this may not need
     var py = (pThumbHeight - pheight) / 2;//need to check this
     SizeAndPosition(id, tx, ty, twidth, theight, function(b){gBehaviorsArray[id] = null;});
// Trigger the animation of the Photograph shrinking.
function ShrinkPhotograph(img)
     Spry.Utils.addClassName(img, "inFocus");
     img.style.zIndex = 1;
     var id = img.getAttribute("id");
//Need to look at this stuff below, any input from anybody would be good....
     SizeAndPosition(id, 0, 0, gThumbWidth, gThumbHeight, function(b){gBehaviorsArray[id] = null; Spry.Utils.removeClassName(img, "inFocus");});
// Show the image of the current selected row inside the dsPhotos data set.
function ShowCurrentImage()
     var curRow = dsPhotos.getCurrentRow();
     SetMainImage("galleries/" + dsGalleries.getCurrentRow()["@base"] + "images/" + curRow["@path"], curRow["@width"], curRow["@height"], "tn" + curRow["ds_RowID"]);
Message was edited by: W_Bell

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
class GrowRight
public static void main (String args[]) throws InterruptedException
JLabel label = new JLabel ("this is a test...");
final JFrame frame = new JFrame ("GrowRight");
frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
frame.getContentPane().setLayout (new FlowLayout());
frame.getContentPane().add (label);
frame.setSize (label.getPreferredSize());
frame.pack();
final Dimension d = Toolkit.getDefaultToolkit().getScreenSize();
frame.setLocation (d.width - frame.getSize().width, 0);
frame.setVisible (true);
frame.addComponentListener(new ComponentAdapter(){//<---------------------
public void componentResized(ComponentEvent ce){
    frame.setLocation (d.width - frame.getSize().width, 0);
Thread.sleep (5000);
label.setText ("for the next sixty seconds, this station...");
frame.setSize (label.getPreferredSize());
frame.pack();
}

Spry static gallery combined with Spry Effect Observers

I have set up a Spry static gallery using the
demo
here.
I would like to add a cross fade for the main image using the
Spry Effect Observers shown at the bottom of
this
demo page.
I like the thumbnail grow effect used in the first demo and
like to add a cross fade for the main image when the thumbnail is
clicked. Have someone built such an example or can someone show me
how it is done? Typically I have 4 thumbnails/images per product
page.

Mr. Andersson wrote:
> I thnik I know what's going on now...
>
> I tried Fireworks and it has a built in Slideshow
creator. The setting that
> dont use Flash uses Spry and looks like the Spry gallery
demo. The settings
> using Flash have cross fading images.
>
> From this I got the idea that Adobe maybe dont want us
to cross fade with
> Spry. They want to push Flash instead. It could explain
the total silence from
> Adobe in various threads where this question is asked.
This is a user to user forum, Adobe will never reply to you.
Also, Spry is still a pre-release framework, its nowhere near
finished.
Its the kind of framework where you take whats available and
make
something out of it, its very flexible if you know
javascript.
I am learning javascript just to understand the little bits
that I am
experimenting with, I think its the only way forward if you
intend to do
something outside the box.
Dooza
Posting Guidelines
http://www.adobe.com/support/forums/guidelines.html
How To Ask Smart Questions
http://www.catb.org/esr/faqs/smart-questions.html

Plant Growing Effect

Similar Messages

Maybe you are looking for