Create Opacity Slider

Hello,

I am new to Composer. I am trying to create a slider that a user can move to see a corresponding change in opacity of a photo, such that a photo below is revealed. In other words as the slider is moved left or right along the x axis, the top image becomes more or less transparent revealing the image below.

To create the slider, I made a long horizontal graphic bar with a center point marked and placed it in a horizontal scroll window 1/3 the length of the bar and the same height. I restricted the movement of the graphic bar to the X axis.

I selected the graphic bar as the target from and photo image as the target to, binding the X value of the graphic bar over the opacity of the image. I then selected linear convertor and entered the Input A as the X value that would correspond to 100% opacity and the Input B as the X value that would show 0% opacity.

This approach has not been successful when I play the program.

Any suggestions about what I may be doing wrong or about another approach to solve this problem?

I have successfully create a program where a touch gesture automatically fades one image above another, but I really hope to create a 1:1 correspondence between movement of a graphic element with opacity change of an image.

Thanks,

Drew Harty

Hi @maghelpdesk,

You can see in this discussion how to create a slider based on a Scroll Collection.

Based on your scenario description, I created the small sample you can download below.

Slider-Image-Opacity.zip (8.0 MB)

Slider-Image-Opacity

Thanks for the info and file. I was able to follow your example and set up a similar scroll collection. It worked well, but then I encounter a problem. Somehow I changed something, and the center square and bar in the scroll window would scroll past the edge of the Scroll window not completing the full 0% to 100% opacity change. (The elasticity button is unchecked in the Scroll properties.) When I highlight the bar graphic in the scroll window, I see the shape of the bar highlighted, but there is also a larger highlighted frame that is longer than the bar and much wider. I double checked the dimensions for the bar and they are correct. I can see no way of removing the larger highlighted frame, which seem to be connected with the bar and center square scrolling past the edge of the scroll window.

Any suggestions?

Thanks, Drew Harty

Hello @maghelpdesk

You may want to double check the sizes of the 3 elements composing your slider.

The simplest version, pulled from the sample above is made of:

  • a scroll collection
  • a background rectangle (white one)
  • a “handle” rectangle (blue one)

You want to have exact heights and positioning for this 3 elements to make it work:

Heights:

  • background rectangle height: 800px for instance
  • handle rectangle height: 30px for instance
  • scroll collection handle height: half of background + half of handle = 415px for our case

Positioning:

  • background rectangle must be aligned top vertically and horizontally centered inside the scroll collection
  • handle rectangle must be aligned bottom vertically and horizontally centered inside the visible part of scroll collection which is the dashed one

Double check also to have only these 3 elements for a start, with no disturbing extra groups.

If you still can’t get it work, feel free to publish it and share it as a reader with xp-for-support (at) intuilab (dot) com we’ll have a look at it :slight_smile:

Regards.

Alex.

1 Like