Carousel of images. Automatic scrolling of images to the left. Canvas. ImageSprite

[Juan_Antonio]

1. Carousel of images.

• ImageSprite1.Picture and ImageSprite6.Picture are foto1.png

• ImageSprite2.Picture and ImageSprite7.Picture are foto2.png

• total_width: total width of images: 250 x 5 = 1250

• (Images can have different widths.)

• Look at the width of the Canvas.

• ImageSprite.Y: 0

p7Z2_carrusel.aia (419.1 KB)

[Juan_Antonio]

2.- Carousel of images with automatic stops.

• All images must have the same width.
• When the image stops, the number of the previous photo is displayed.

p7Z2_carrusel_v3.aia (419.9 KB)

[Juan_Antonio]

3.- Image from internet.

• ImageSprite1.Picture = ImageSprite6.Picture = h ttps://community....... (logo App Inventor)

p7Z2_carrusel_v4.aia (419.3 KB)

[Juan_Antonio]

4.- Take photo with Cam. Resize. Upload to CloudDB. Download from CloudDB. Load in Sprite3. Start carousel.

• Note that at first the ASD/AppInventorBinaries directory is created, that directory should be created automatically without the need of blocks, in the next versions of App Inventor (current nb189a) it will not be necessary to create it by means of blocks. In that directory the CloudDB file will be downloaded. Read.

• Take a photo with the camera in landscape (horizontal).

• Click Button:

• The obtained photo file will be moved to the ASD directory with the name: foto3.jpg

• Its width will be changed to 250 by @Taifun 's extension: Image Extension.
  (App Inventor Extensions: Image | Pura Vida Apps). Thank you Taifun.

• The file obtained will be Stored in CloudDB using the tag: my_foto

• When Click the other Button:

• The file will be obtained from CloudDB.

• That file will be displayed in Image2.Picture.

• The Image2.Picture will be loaded in the Sprite3.Picture

• The carousel movement will start (it will take a few seconds to start).

p7Z2_carrusel_v5.aia (450.0 KB)