Auto slide image 1 by 1 instead of the whole sets of images in a row

Hi guys,

I have 2 images in a row. How to make it auto slide to the left 1 image at a time 1 by 1 (wrap from last to first).
I used dynamic panel but it slide to the left 2 images at 1 time.

image autoslide 1 by 1.rp (739.5 KB)

Here is an updated file with a few solutions.
image autoslide 1 by 1.rp (2.1 MB)

I duplicated your Page 1 to Page 2, created dynamic panels for each “image block” (nested within the “slot latest winners” dynamic panel) --named 1.1 and 1.2 for State1 and 2.1, 2.2 for State2. Then I added this code to the “slot latest winners” dynamic panel:
image

  • Working from the bottom up, the LOADED event hides the second image block in the second state, as preparation for the ensuing animation (when “slot latest winners” changes to State 2.)
  • When “slot latest winners” changes to State2, that state change is not registered until the transition animation has completed. Since you have a “slide left 1000ms” animation, it will take 1000 ms to fully change the state. During this time, State2 is revealed by sliding left to right–with only the first image block visible. Then 2.2 is shown, sliding left, with the result appearing as if each image block is sliding 1 at a time. Also, the 1.2 image block is hidden to prepare for the next state change.
  • When “slot latest winners” changes to State1, the same kind of transition occurs.

Now, if you intend to have the two image blocks slide out separately as well as slide in separately, I think your best approach would be to use Move actions for each image block. This should give you more control over timing and animation/transition effects. This is demonstrated in Page 3. The basic approach is to start with both image blocks placed out of view all the way to the right. Then the first image block is moved into place, then the second image block is moved into place. When “slot latest winners” changes state, the two image blocks are similarly moved one at a time all the way out of view to the left …and then moved all the way to the right to set up the next time they need to transition and move into place. To make it easy to track the placement, I added a hotspot behind each image block.

To make the animation code easier and more flexible, I created a “transition function” dynamic panel just to control the transition animations. (So, I removed all the code from PAGE LOADED and replaced it in the code for “transition function”.

  • The LOADED event sets its panel state to Next, wrap repeat every 3000 ms. It also moves both image blocks in State2 all the way to the right and just out of view to set up the first animation.
  • The PANEL STATE CHANGED event for Case 2 looks like this:

  • The first MOVE action slides 1.1 all the way to the left. (The expression [[-Target.width]] effectively lines up the right edge of the target (the dynamic panel “1.1”) with the left edge of its parent dynamic panel, placing it just out of view.)
  • The second MOVE action handles 2.2 similarly. (You can play around with the time durations and animation effects (e.g., ease in cubic) to adjust the look and feel.)
  • The “slot latest winners” changes to Next state (keep in mind both image blocks are placed out of view, so this state change needs no animation.
  • Then 2.1 is moved into place, where the expression, [[hs.left]] points to the left edge of “hs” (a local variable pointing to the hotspot widget named, “slot 2.1”
  • After a Wait action, 2.2 is moved into place.
  • Finally, the image blocks in State1 are moved all the way to the right out of view to set up for the next transition. (…and I realize now that last “Wait 400 ms” action is not needed–but doesn’t hurt either.)

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.