Did you know that you don’t have to load all your images into an App Inventor app? While you shouldn’t use this technique for every image because it relies on an active data connection, you can create some dynamic content if applied just right. For example, a link to a moon phase image that changes, will automatically reflect the current moon phase every time the app opens.
All you need to do is host your images somewhere and use the web address to set the image of a component. Just to make sure your app doesn’t run into security issues, you should use a service that provides an SSL connection to your files. Google Picasa Web Albums is a great choice for this. Another very popular service which does one thing and one thing only, it takes an image and returns an HTTPS url to that image. It’s called SSLpic and can be found at http://www.sslpic.com/. SSLpic has some size requirements so it’s not as friendly as Picasa, but it’s an option and it’s always good to have options. I personally love everything Google, so I stick with Picasa Web Albums, plus I can manage all my photos at the same time, so everything is done centrally with one tool.
To demonstrate this, I am using the following images.
The images have the following URLs.
I created a new project in AI that will just have the components I need to show how this works. There is no actual app. However, if you do use this, make sure that the screen initialize event sets the images when the app starts.
I added the following components.
In the Blocks Editor, I set the image for each component using the following blocks.
Make sure that you use the full URL, including the http or https, or it will not work. My final blocks look like this.
I can quickly test this by right-clicking the block and clicking “Do It”
And finally, I add these to the “Screen1.Initialize” event, to make sure the images are loaded when the app starts.
There you go, another fun way to spice up your apps with Google App Inventor.
Thinking Outside The Box
Here is a little suggestion for a fun way to make your images change automatically every time the app starts.
Lets take what I explained above and remove everything except “Image1”.
- Now go to “Built-In” in the Blocks Editor and drag out variable definition, and give it a name. I called mine “imageList”.
- Add “set Image1.Picture to”, to the Screen1.Initialize event.
- Drag out “call make a list”, and plug it into the definition you created in step 1.
- Plug each URL text block into the “call make a list” block.
- Drag out “call pick random item list” from “Lists”, under “Built-In” and plug it into “set Image1.Picture to”.
- Go to “My Blocks” –> “My Definitions”, drag out “global imageList” and plug it into “call pick random item list”.
The final blocks should look like this.
Once again, you can quickly test this if you right-click “Image1.Picture” and “Do It”. Do I need to link that video again?
Each time you do the above step, it will choose a random URL from the list and load it as the image. Pretty cool right?
So how can you take this further? Here are a few ideas that will be fun to work on.
- Create a slide show. You can keep changing the images and the slide show will be different every time.
- Hint: File names need to be the same and you need to use a timer to change the image at a given interval
- Make the slide show dynamic. Use TWDB, to load the list from the db, which you can update with URLs
- Let users create their own slide shows.
- Hint: You’ll need a tag to identify the user so that each user has his/her own table row and does not overwrite other users.
See if you can come up with some other ways to use this technique. Comment below and tell me what you think about this. Do you think it’s useful? Have you already done something like this? Do you have any other ideas about using this in an app?
Don’t forget to join our community on facebook. Just hit the Like in the left sidebar (towards the top of the page), this button
Or directly on our fb page at http://www.facebook.com/pages/tAIICcom/116243311786911