How to drag and drop and then copy an image sprite app

[Dante Villavicencio]

Hi 

I'm new programing in app inventor. I want to create an app that when I press a button a list of images appears and then i want to take that image and dragged out of the list, when press the button the list come out again and I can drag and drop an other image or the same image, I be able to this the numer of times that i want

I don't have a glue How to star this proyect. Could you give me an idea of the blocks that i need to use or if you Know where I can find information about this

Sorry about my english 

Thanks very much

[SteveJG]

MITs tutorials    http://appinventor.mit.edu/explore/ai2/tutorials.html

AI2 free online eBook   http://appinventor.mit.edu/explore/ai2/tutorials.html   ... the links are at the bottom of the Web page.

[Dante Villavicencio]

Hi again 

I not that new in App Inventor, I been doing a few aplication so i understand most of the blocks also i been searching examples and information about how to do this in the net but i don't find nothing yet.

I can move a image sprite in a canvas but i don't know how to copy that image while I drag it 

Thanks for the answer  

[SteveJG]

Perhaps this is what you want to do:   http://www.appinventor.org/Chapter17   ?

or perhaps this example will help  http://www.imagnity.com/tutorials/app-inventor/advanced-sprites-of-app-inventor/

If not the above, could you explain what you mean by "how to copy that image while I drag it " please Dante?

Any of this help Dante?

Regards,

Steve

[Dante Villavicencio]

Hi Steve

Thanks for the answer.

I gone try to explain with images 

First when I click on the button (Image 1) an arrangement of images appears ( image 2), then I be able to drag and drop an image to where ever I want of the white screen (Image 3), that means create a copy of the image that I dragged and placed out of the arrangement, When I remove my finger of the screen the image drop, the arangement is no longer visible (Image 4), when I click again in the button the arrangement appears again with the same images and I can drag and drop another one (Image 5). I be able to do this N times 

I hope this be more specific 

Thanks for your time 

Best regards 

[SteveJG]

There are several ways something like this could be accomplished.   To do it, you will have to understand most of what is here:  AI2 free online eBook   http://appinventor.mit.edu/explore/ai2/tutorials.html   ... the links are at the bottom of the Web page.

You have to learn to use the Logic blocks, the If ..then  control etc.

I see two ways of doing this, one using a Canvas control where all the images are sprites   the second way to do it is to use Buttons with the images in the buttons...you can add an image to a button.   Neither method is easy for a beginner.

I suggest you pick one basic method, then start trying things.

For Using a Canvas.... the Touched block will be very important.   You have the ability to hide sprites    by  making them visible or invisible   using    true  or false logic blocks, you will need If..then blocks etc.

For using Buttons,  you will have to preposition some buttons and hide the ones you are not using...with AI2, you can not drag and drop a button anywhere on the screen (however with a Canvas, you can do exactly that).

I hope this gives you a start.  This is your project and you are going to have to figure it out unless some provides you with some specific code.   Can manipulating the images as you demonstrated be done?  Yes, and it is not very difficult, it just will require writing complicated block code and a few hours of coding, perhaps less if you understand all the AI2 coding principles.

Try some blocks.    I suggest you make a small project to experiment with...either using the Canvas or images.

I hope someone else will also give you some hints.

Regards,

Steve

[Dante Villavicencio]

Steve Thankyou so much for all you time  

I'm not that basic in app inventor programation 

I going to ask very specifc questions:

Do you Know some way to move a image sprite from one cavas to another???

It is possible to make a copy of an image sprite when i selected and move to another place ??

I think this are my doubts

Sorry I'm not good explaining my confusions

Thanks

Best regards

[SteveJG]

Do you Know some way to move a image sprite from one cavas to another???

You can not 'move' it by dragging and dropping.   What you might be able to do is 

set ImageSprite3.Picture to     ImageSprite1.Picture       where Sprite3 is on Canvas1 and Sprite1.is on Canvas2.   I haven not tried it.  Why do you not try and experiment to see if it works.  You could probably do that with a Button or using a Canvas or Sprite event handler.  

It is possible to make a copy of an image sprite when i selected and move to another place ??

Not sure what you mean by copy an image sprite.  AI2 can not dynamically create new sprites, however you can asssign the picture of onee sprite to another sprite I believe.

Be aware, you can place lots of sprites on a Canvas, and hide them until they are needed, but you can not create new sprites on the fly.

Did that answer your question?

-- Steve

[Alan R]

Dante,

Maybe you could make a table with the grid for your images with blank, named images and hide it. Then make some logic that determines the correct grid in the table when you drag your image (each image would be a pre-defined sprite) and release. When you release the image-sprite, get the x,y and use it to find the correct table grid. Then assign the correct named image with the image file name based on the table grid coordinates (the x,y falls within a specific table grid box). Then show the table and hide the canvas.

Each time you hit the image button the table hides (maybe it doesn't need to be hidden) and the canvas is brought back to drag the sprite of an image to a location that will populate the table.

Using the hide and show properties of things is very useful for this sort of project.

Good luck and keep experimenting!

Alan

[Dante Villavicencio]

Hi Steve 

Yes you answer my questions thanks.

I set and image sprite of a canvas1 to canvas2 and thats posible but, when the image moves to the canvas2 disappears from canvas1 so i can't repeat the same image on canvas2 again because is no longer exist in canvas1. to resolve the problem I need that the image sprite shows again in canvas1 to be able to move again to the  canvas2 ( Thats why I need a copy of the image sprite) this will be a feature that the apps need.

Do you have some ideas to this???

Thanks

Best regards

[Dante Villavicencio]

Thanks Alan

I will try this i Think is a good idea because i need a sequence of image that can repeat in the grid ( this is my problem) Do you Know a way to repeat N times the same image????

Best regards 

[SteveJG]

The sprite image is in your Media (resources).  You can use it as many times as you want to.   If the image is called elephant.jpg  and you have ten buttons, 

you can set Button1.Image to  elephant.jpg ;  set Button2.Image to  elephant.jpg ;  set Button3.Image to  elephant.jpg   set Button4.Image to  elephant.jpg and so on.

Try some blocks   You can do something similar with the spirte you 'move' from Canvas1 to Canvas2.     If you need the image back on Canvas1, just put it there with a call to the file.

Regards,

Steve