(Check out my
follow-up tutorial showing how to simulate a drag-and-drop with a fail/reset state)
Recently, I was asked if I could help someone build a Catalyst prototype to help them demonstrate drag-and-drop functionality. The current version of Catalyst does not yet support this as one of the built-in interaction types. But, since my goal is to help my peers get on board with using prototyping tools including Catalyst, I set out to find a way to simulate the nature of drag-and-drop using the tools available in the application.
Ultimately, the simulation had to:
- Allow a piece of artwork to be dragged from one location to another
- Upon release of the artwork, trigger a state that makes it appear as if the artwork has been successfully dropped inside of a zone.
- Allow the artwork to be dragged at an angle (given the setup of my peer’s UI)
After a little investigation, I found that hacking a horizontal slider element would be the best way to achieve these goals. It gives the visual illusion of drag-and-drop, and triggers the “dropped” state upon mouse up of the artwork.
I created this “Trip Packing List” demo to show off the basic idea. Click and drag the bikini artwork from the “Clothing & Accessories” module and release it (while still holding the mouse cursor over the artwork) when it slides over the empty square in the “Packing List” module.
View the demo here.
In the rest of this post, I’ll walk through the steps I took to create this effect.
In summary:
- Create two states–one representing the scene before dragging takes place, the other representing the scene after a successful drag and drop.
- Define the draggable artwork as the thumb of a horizontal slider, and create a transparent rectangle for the track portion.
- Rotate the horizontal slider to line up with a drop zone.
- Add interactions to the thumb so that it triggers the drop state.
Setup
In my case, I imported a preset file from a Photoshop document. I already have all of my states set up in designated folders. I have two major groups, one called “Packing List” and one called “Drag Container.” Under “Packing List,” I’ve made the “BEFORE” state visible, which shows the empty slot at the bottom of the list. This is where the bikini icon will be dragged to. This first state of the main timeline is called “StartDRAG.”
Within the “Drag Container” folder, I have duplicated the bikini artwork as two distinct elements. The first is a group (“BikiniDRAG”) containing UP, OVER and DOWN states of the bikini artwork, and this entire group will become the draggable thumbnail. The other is just the static icon (“BikiniSTATIC”), which will remain in place. This way I can simulate the effect of dragging an instance of an element, which is more true to typical drag-and-drop interactions.
It’s important to make sure the draggable component folder, or layer, is above the static artwork, so that it won’t be blocked.
Create the Slider
I begin by creating the slider element. I select the entire “BikiniDRAG” folder. In the HUD display, I open the “Convert Artwork to Component” drop down and select “Horizontal Slider.”
Catalyst unfortunately will revert the component layer’s name to the very generic “Horizontalslider.” I make sure to rename it back to “BikiniDRAG.” This is more a nitpicky organizational thing, and not required.
Create the Thumb
Now I need to define the slider’s elements so that I can get it working. In Catalyst, a slider has two parts. There is the
thumb, which is the draggable portion. And there is the
track, which defines the path the thumb can be dragged along.
The bikini artwork will need to be converted to the thumb element, since that’s the part I want to be able to drag around.
I double-click on the “BikiniDRAG” horizontal slider to enter the component’s editing area. We can see that the “BikiniDRAG” folder, including all of its states, is now inside of the component. To define it specifically as the thumb part of the slider, I once again select the entire “BikiniDRAG” folder group and choose “Thumb (required)” from the “Choose Part” drop-down menu in the HUD.
All right. The bikini artwork has now been converted into the thumb of the slider. I still need to set up the different states of the artwork so that it changes on OVER and DOWN, so I double-click thumb to enter its editing state.
We can see that there are already four states by default for the thumb part. Luckily, I have already predefined the UP, OVER and DOWN appearances in my folders, so I toggle the visibility of those on and off for the appropriate states. Since the DISABLED state won’t be utilized in this demo, I leave it alone.
You’ll also note that I have added a bounding box, called “hit square,” underneath the bikini artwork layers, and have set its opacity to 0%. This is so that we’ll be able to grab and release the thumb artwork anywhere within the bounding box, but without needing to make a visible square. If we didn’t have an invisible hit square, the parts of the artwork that appear transparent wouldn’t be interactive.
Create the Track
All right. Now that the thumb artwork has been defined, it’s time to build the track.
I go back to the horizontal slider’s component editing state (up one level). Using the shape tool, I draw a horizontal bar in a layer below the thumb, and extend it out to the right. When doing this, make sure that the
left edge of the bar is aligned with the
left edge of the thumbnail artwork. If you don’t align it yourself, Catalyst will try to do this when you go back to the main timeline. This can lead to some unpredictable sizing issues.
(I could also have created this bar in Photoshop, but it’s easy enough to make a rectangle in Catalyst).
After I draw the bar, I convert it to the “Track” part of the slider by selecting this option from the “Choose Part” drop down in the HUD. I’ll leave the track opaque for now, because I need it to be visible when I try to line it up with the drop area.
Line Up the Slider to the Drop Zone
In order to be able to drag the bikini thumb directly into the empty square of the Packing List, I need to angle the slider.
Because of the way that horizontal sliders behave in Catalyst, we
can’t angle a track by rotating it inside of the slider component itself and expect the thumb to move along that angle. Catalyst will still make the thumb move horizontally, and will just define a horizontal path for the thumb using the left and right bounds created by the track’s diagonal. Confused? Hopefully this diagram will help:
But we
can rotate the entire slider on the main stage.
Returning to the main timeline, I select the “BikiniDRAG” horizontal slider. Then I choose the rotation tool at the top of the LAYERS palette.
Using the rotation tool, I can grab the pivot point from middle of the slider component, and pull it to the left edge. This will ensure that the whole slider will be rotated from the thumbnail’s position. It’s another good reason for having aligned those left edges in the component editing state!
Now I can rotate the component and angle the track until it points down into the empty square. If I had drawn the track too long or short, I can always fix it from within the component editing state. That’s the part that can take a little fussing with and guestimation to get right.
I also take note of the number of degrees the slider rotation ends up being. I’ll need this number in order to counter-rotate the thumbnail so that it will match the static artwork on the stage.
Here, I’ve rotated the slider component by 20 degrees.
Now it’s time to counter-rotate the thumbnail part. I jump back in to the horizontal slider component and select the bikini thumb. Using the rotation type-in area in the PROPERTIES panel, I type in the opposite value of the slider’s rotation as seen on the main timeline. That means I type in -20 degrees.
This will look wrong in the component’s editing mode but, if we jump back to the main timeline, we see that the thumbnail rotation now matches that of the static artwork.
Of course, we still have to fix the positioning of the thumb so that it aligns better. I do this on the main timeline, by eye.
Make it Seem Invisible
It’s time to make the track transparent so that I can create the illusion of dragging the artwork through open space. I enter the horizontal slider editing state again and select the track. Using the opacity type-in under the PROPERTIES panel, I simply bring the opacity down to zero.
Add the Interactions
Finally, I need to create the interactions leading to a state that shows a successful drag of artwork into a drop zone. For my example, I go back to the main timeline and duplicate the “StartDRAG” state. I rename it to “AfterDRAG.”
Within the “Packing List” folder under the LAYERS palette, I toggle on the “AFTER” sub-folder and toggle off the “BEFORE” sub-folder. This state now shows bikini artwork and its description in the bottom row of the packing list, which simulates what a successful drag-and-drop would look like.
Since we don’t need the slider to be active in the “AfterDRAG” state, I also turn off that layer.
Back in the “StartDRAG” state, I need to attach an interaction to the bikini thumb so that it triggers the “AfterDRAG” state on release.
I jump back into the horizontal slider’s component editing mode and I select the bikini thumb. In the INTERACTIONS palette, I click “Add Interaction.” In the panel that appears, I select “On Mouse Up” as my action, and choose to Play Transition to State to the “AfterDRAG” state on the main timeline. What this will do is ensure that, as long as I release the mouse while over the bikini thumb, it will trigger the transition to the “AfterDRAG” state. Of course, I’ll want to make sure to mouse up when I’ve gotten the thumb over the drop zone to best represent this action.
Lastly, to simulate the drag-and-drop cursor as closely as possible, I check “Hand cursor” while I have the thumb selected. This checkbox is under the Appearance section of the PROPERTIES panel.
All right! I’m done. It’s definitely a bit of work, but a decent stopgap solution until the next version of Catalyst [hopefully] comes out with some drag-and-drop interactions. It’s a method best used if you can guide someone or demo it yourself; otherwise, your users may not release the mouse at the right time, or get confused when the drag only happens along strict path.
I also ran into a few caveats, listed below. If anyone solves them, let me know!
Known issues:
- You can’t overlap sliders, so plan your actions carefully if you want to demonstrate multiple drag-and-drop scenarios at the same time.
- You also can’t overlap with other interactions. If, say, you wanted the drop zone to highlight when the thumb drags over it, this wouldn’t be possible.
- You must mouse up while over the thumb artwork. If you mouse up outside of it, you won’t trigger the interaction.
- You can’t reset the slider thumb’s last position without refreshing the SWF. If you have an action that allows you to jump back to a pre-drop state, the thumb will appear wherever you last left it, most likely over the drop zone.
