It has been said above, JS is going to be needed for this.
I would normally suggest using JS to clone elements and then place them. But that is complex.
using minimal JS and not too complex you can get a basic idea.
This example i have made a fleur into a Symbol. Then duplicated it ten times.
Each symbol has a class Name
When the scene loads a javascript function will run.
window.fleur = document.querySelectorAll('.fleur'); // fleur array
window.clickCounter = window.fleur.length -1 // counter
The function just collects a reference to the symbol elements in an Array and puts the refs in a global variable that we use later.
It also creates a global variable as counter that we use to iterate each Symbol element. (This holds the number of elements)
On the scene I have placed a rectangle element that covers the whole scene.
This rectangle is what we click on. This will make it easier to register a click or touch using the built in Actions of Hype instead of writing JS to detect them.
When the Rectangle is clicked a second Javascript function is run.
if ( window.clickCounter > 0){
var thisFleur = window.fleur[window.clickCounter] // fleur to move
fleurWidth = hypeDocument.getElementProperty(thisFleur, 'width')
fleurHeight = hypeDocument.getElementProperty(thisFleur, 'height')
var xPosition = event.offsetX - (fleurWidth/2) // the events clicked position on the scene. (minus the width & Height of the element divided by 2, to center the element on the click)
var yPosition =event.offsetY - (fleurHeight/2)
window.clickCounter-- ;// deduct 1 from the counter
hypeDocument.setElementProperty(thisFleur, 'left', xPosition)
hypeDocument.setElementProperty(thisFleur, 'top', yPosition)
hypeDocument.setElementProperty(thisFleur, 'opacity', 1, 1.0, 'easeinout')
}
This will get the position of the mouse click.
It will then move one of the fleur elements to that position and show it.
We use the counter to work out which elements we move and show. The counter is then told to count down.
There is still much you need to understand about the JS in this example
look up javascrript and any of the words in bold.
flower_MHv1.hype 2.zip (136.1 KB)
as pageX doesn’t play as well as offsetX.
