In my earlier post, “
Simulated Drag and Drop with Catalyst,” I showed how a horizontal slider could be used to demonstrate some drag-and-drop interactions. In that case, I showed how a successful (accepted) drop would behave.
There will be cases when you want to demonstrate a failed (rejected) drop. In this update I’ll show you how simulate a draggable element resetting after it’s been rejected from a drop zone. This tutorial assumes you’ve set up your file the same way as in the previous example.
What we want to do:
- Create two states–one in which we can drag the slider thumbnail over to the drop zone, and one in which it’s back in its original position
- Be able to repeat the behavior without having the refresh the SWF.
View the Demo
Create 2 Primary States
We only need 2 states to pull off this interaction. In this case, I’m using “StartDRAG” (the same one from the original tutorial) and “FailDRAG”. “StartDRAG” is the state in which we can drag the horizontal slider’s bikini thumbnail all the way to the drop zone in the right panel. “FailDRAG” is the state in which the bikini thumbnail will appear to reset to its original starting position, so it looks like it was rejected from the drop zone.
Reset the slider in the “FailDRAG” state
When we’re in the “FailDRAG” state, we want the slider to look like’s its been reset to its original position. Now, this is a bit of a trick–we’re not
actually resetting the slider. What we’re doing is changing the
range of the slider in the “FailDRAG” state, so that the thumb can’t move beyond its starting point.
Note: Although Flashcats has a very good tutorial on how to reset some components using the value property, setting the value property hasn’t worked for horizontal sliders. This seems to be because the value is tied to the position of the thumb along the track only before it is dragged. We could disable or remove the slider once it’s in the “FailDRAG” state, but then we wouldn’t be able to interact with it again. Which is why we have to take this protracted route 🙂
Ever slider component has a few changeable parameters that can be found in the Properties panel. The ones we’re interested in are “Minimum” and “Maximum”, because these define the range between which the thumb can travel. This range is automatically designated as between 0 – 10, with 0 marking the starting position of the slider, and 10 marking the end. If you change the numbers, then the distance the thumb can travel is changed as well.
In the StartDRAG state, we want the range to stay with a minimum of 0 and a maximum of 10, since we need to be able to drag the thumb all the way along the track to the drop zone. But once we get to the “FailDRAG” state, we want to get the thumb back to its starting position.
We’ll do this simply by changing the “Maximum” value to 0, which will restricting the range to 0 – 0. Now the thumb position is forced back to the beginning of the track, but is still clickable.
Set up the interactions
We just have to set up the interactions. Select the slider component and go to the Interactions panel.
While in “StartDRAG,” we want to be able to drag the slider thumbnail. But when we release it, we want to go to the “FailDRAG” state. So, create a new “On Mouse Up” interaction. Choose “Play Transition to State” and select “FailDRAG”. Make sure this only happens in the “StartDRAG” state.
We also want to be able to repeat this interaction all over again, instead of being locked in the “FailDRAG” state and needing to reload the SWF. So, add one new interaction. This time, pick the “On Mouse Down”. Select “Play Transition to State”, choose “StartDRAG”, and make sure this only happens when it’s in the “FailDRAG” state. Now when you click on the slider thumbnail when you’re in the “FailDRAG” state, you’ll automatically move back to the “StartDRAG” state, where you are able to drag the component.
Finished!
All right, that’s it! One other note: You’ll notice that I tried to add an “Over” state to the drop zone so that it would give a visual indication of rejection. Unfortunately, Catalyst doesn’t allow overlapping components to trigger interactions at the same time, so this state only shows up when you’re not dragging the thumb over it.
