Forum Discussion

AmandaStein's avatar
AmandaStein
Community Member
14 days ago

Help with a storyline

Good Afternoon E-learning Heroes,

Could I kindly ask some assitance with this storyline.

I want it to snap together better like lego blocks and after attempting hotspots with the drag and drop , snap to centre , tile , free everything I have no luck.

Any help would be appreciated.

 

2 Replies

  • LEGO blocks are crafted with a fair amount of engineering and precision so trying to reproduce that effect will require similar.

    I think the biggest hangup will be the bounding boxes of the bricks. If I select a brick, for example brick 2, you can see the bounding box includes a lot of empty space on the top and sides. Your drag-and-drop destination considers that space part of the image when figuring out how to place the draggable. Dragging brick 2 to a destination aligns it according to the bounding box, not the visible part of the image because Storyline cannot see the interior of the image nor make assumptions about how you want it to compensate.

    I used the Crop function on the blue brick to better define the actual area of the brick and it now sits very nicely on its destination. I would recommend doing similar to the rest.

    Additionally, you'll notice that bricks 3 and 4 are very differently sized. I checked all four and none of them are identical. That inconsistency helps break the illusion of the LEGO blocks you're going for because LEGO are very deliberate in sizes and dimensions. After each brick has been cropped, can I recommend left-clicking each brick and setting its dimensions manually in the Picture Tools menu at the top of the app.

    Thirdly, the drag-and-drop feature seems to determine the depth/Z-order of draggables according to which object was last dragged. This means the "studs" of the blue brick below will always have a higher Z-order of the red brick higher on the canvas because I last touched the blue brick.

    If I click on the red brick and move it just a little, it assumes a higher Z-order:

    All this is to say that the exact LEGO effect you're looking for may not be easily accomplished. The only solid solution I can think of requires changing the Z-order of the objects using JavaScript, but that sounds like a lot of effort to me personally so it's not one I'd pursue.

  • Agreeing with Andrew, and adding that the real problem is knowing the stacking order of each block. The 'fit' is easy enough to manage with properly sized Legos and target zones. The stacking order of individual blocks can even be adjusted on the fly using the object().depth property. But, to know the order of the blocks relative to each other, you would have to track them manually as the user dropped them. It's doable, but takes a rather large number of triggers to account for all of the permutations. You would need some JavaScript attached to the drop triggers to adjust the depth of each block whenever one is dropped. This script would need the current order of the blocks on the screen to know if it should be above or below others.

    You could potentially do it programmatically, tracking the x and y position of each Lego to determine if they on a target, and which target it is. Honestly, this would be the way to go, requiring far fewer SL triggers.

    If you worked out the logic for position tracking, it would probably distill down into a fairly simple function that would keep all the Legos in the correct stacking order. The question is, is it worth the work it would take?