Making a web app that saves pictures and loads from url its settings

  • 19 favourites


Attached Files

The following files have been attached to this tutorial:


Download now 4.45 KB


Download now 397.44 KB


Download now 103.72 KB


7,669 visits, 16,764 views



This tutorial hasn't been translated.


This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Program/App Settings


This stripped down version has 3 main layouts that manage the whole process.

Main layout

- this is a basic welcome screen that will be managing the following information.

- Incoming variable to determine if the layout jumps to the creator or to a pre-made scene

- pick male or female avatar.

Setup layout

- this layout works with the image capturing and also has the menu to pick a scene.

- Choose camera to take the picture and take the picture

- has a pre-defined "shape" to "crop" the picture for use. (it doesn't actually crop it just paints over all the background picture other than the shape area.)

- Canvas captures that image.

- Takes the user to the menu to pick the next scene. (this menu is located on this same layout)

Program layout

- this is where the actual hard stuff is done.

- This changes the main background to the one pertaining the picked scene from the previous menu

- It positions all the object markers and the animated "characters" including the player male/female avatar

- it ties the masked image with the player avatar

- It activates the "dancing" (side to side movement) on the female dancer characters

- Here we also have the share button which is responsible for the actual magic of the program (saving the image, saving the mysql/ajax data, generating a url)

[important notes]

the generated url will not work if the published html is not edited with the inclusion of the php variable script.

  • Order by
Want to leave a comment? Login or Register an account!