How to use only one image component for displaying multiple images from a list on only one screen?


I have made an app using 27 layouts and in each layout i used one button to display image and on click play sound 2nd button to move to next layout and 3rd button to go back to previous layout. But after reading Taifun instructions mentioned as 2nd tip in using screen wisely article i have decided to make new app using one screen with only one button having image view component plus audio component which play sound on click. And on clicking next button the image changes and on clicking the image it plays the image related sound (previous button display the previous image).But how to do that i may use list to rotate images along with specific sounds.Can anybody give me a hint of code please.


very wise decision…
use 2 lists, list1 with your image filenames and list2 with your audio filenames and a global variable as index counter

in the button click event increment the index counter variable
use a select list item block to select an item from list1 using that index and assign it to the image component
use a select list item block to select an item from list2 using that index and assign it to the player.source



thankyou @Taifun yea i have successfully done what you told. Now here two media files one is image (jpg) and other is audio (mp3) .I read almost all posts here in thunkable but still confused about sizes. Kindly suggest if
image is 640X480 pixels size is 41.2 kb (JPG) resolution = 200
audio is 333 KB (MP3)
Button in which i m displaying pic = Height 65% , Width= fillparent
screen1 sizing = responsive
what you suggest dimensions should be for only above file so that i could adjust rest of files accordingly.To avoid app crashes or java lang out of memory error.


see tip 2 here