Adobe Digital Publishing Suite – Creating Pop-Up Effects With Multistate Objects

• by Mark-Anthony
• in Tutorials
• posted January 24, 2014

During my last class, I went through creating a pop-up effect using Multistate Objects (MSO’s) within the Adobe Digital Publishing Suite. This is a great technique to display more information about a given product, content or advertisement within your DPS publication. In this tutorial, I will be reviewing the process of building out a pop-up effect using the Object States panel.

Let’s Begin!

Download the resource files and create a folder called “Nike Volt.” You can create another folder inside and name it “links.” within the resource file folder, there is an image named Nike-Volt.jpg. Save the image inside of the Nike Volt folder you created, as well as, the icon – show.png and icon-hide.png files.

Download Files

Create a new document and change it’s intent to “Digital Publishing Suite”. Enter in the dimensions and information to match the screenshot below.

Step 2:

Place the nike-volt.jpg by going to the FILE > PLACE menu in the menu bar. The image is a bit large, so you will have to scale it down and fit the image to the container proportionately. Size it so that the entire shoe is visible on the page.

Step 3:

Place the “icon-show.png” image in the document (FILE > PLACE) and place it over top of the shoes upper section. Make two more copies of the icons by holding the OPTION key and dragging the icon to the left. You can now place the copy of the icons over the swoosh emblem and the sole of the shoe, as shown below:

Step 4:

Select the rectangle tool from the toolbox on the far left of the workspace and draw a 270px X 100px rectangle. Now, draw a thinner rectangle below it, as a border. Fill both rectangles black.

Next, select the Type tool and draw out a text frame and enter the text below. You will also need to draw another text frame to type the description of each pop-up underneath the border. You can use Futura Condensed or Oswald Bold and Regular, as I have in this tutorial.

As an added extra, I’ve used the Pen Tool to draw a line segment, which points to the pop-up from the icon. To change the line’s appearance, remove the fill colour and add a 2pt, black stroke and change the stroke’s decoration to “Japanese Dots.” You can find these attributes in the control panel below the menu bar.

Step 5:

Now, place the “icon-hide.png” (FILE > PLACE) and place it in the top-right corner of the larger black rectangle. You can now select the dotted line, two rectangles, text frames and the icon-hide.png image by holding the SHIFT key and selecting all the items with your selection tool.

*Do not select the “icon-show” button. With the other items selected, Hold the OPTION key and click+drag the items over to the Nike swoosh emblem and change the text and dotted line to match the image below. You will repeat these steps again for the sole of the shoe.

Now that you have created all the pop-up graphics, we’ll need to group each of the items together. Again, select the dotted line, two rectangles, text frames and the icon-hide.png of each pop-up separately and group them by going to the menu bar and selecting OBJECT > GROUP.

*Do not include the “icon-show.png” in your group selection.

* Repeat this for the other two pop-ups.

Step 6:

The next thing we will need to do is convert each pop-up into an Object State. You can find the Object States panel under the WINDOW > INTERACTIVE menu.

Select the first group of items and select the “Convert selection into multistate object” button at the bottom of the Object States panel. Name the first Object State “Velcro.” You will now see two states, which are identical to each other in the Object States panel. Select the first state in the panel and click once on its name. Rename it “off”. Now, select the second state and name it “on”.

Select the “off” state and go to your control bar under the menu bar and bring the opacity down to 0%. This will hide the first state in the sequence.

Now select the “on” state and make sure that its opacity is still up to 100%.

Next, create the other two pop-up groups into object states by repeating the steps above. *Name the other two states “reflect” and “sole”.

Step 7:

The next step is to convert our “icon-show.png” images into buttons. These buttons will trigger our object states to show “state 2” aka the “on” state in each of the object states. Select the “icon-show.png” image for the velcro object state. Open the “Buttons and Forms” panel uder the WINDOW > INTERACTIVE menu. We will now change the graphic into a button by changing it’s type to “button” and giving the button a set of rules and functions.

The first rule is to make the button listen for a tap and release event. Then we will add an action for the button. We will click on the + sign beside “add action” and select GO TO STATE. From the object field, we will make sure that the button is calling the correct object state. Select the “velcro” state from the menu and change the state to go to the “on” state in the object state.

Take a look at the image below and make sure your settings match the image.

Repeat the above steps for the other “icon-show” images and name them appropriately. I have named mine, velcro_on, reflect_on and sole_on. *Make sure that the reflect_on and sole_on buttons are pointing to the correct object state in the buttons panel. ie: “reflect_on” should be pointing to the reflect object state and going to its “on” state.

Step 8:

We’re almost ready to test the animation but first, we have to create a “close” button for the pop-up to hide once it is revealed. To do this, select the “velcro” object state. Now select the “on” state within the object state panel. Now, double-click on top of the velcro object state on the page to go inside of the grouped items and select the “icon-hide” image. You should now see a bounding box surrounding only the “icon-hide” image. With the image now isolated, go back to the Buttons panel and convert the “icon-hide” image into a button so that it closes the pop-up.

You will repeat the steps above to create the other buttons but this time, instead of selecting the “on” state for the appropriate object states, you will choose the “hide” state.

Repeat the above steps for the other two “icon-hide” images and convert them into buttons which hide their pop-ups.

Step 9:

After you have converted the “icon-hide” images into buttons, you can now preview your animation using the Folio Overlay panel. To open the Folio Overlay panel, go to WINDOW > FOLIO OVERLAYS. At the bottom of the panel, you will see a preview button. This button is a bit finicky, so when you click on the preview button once, wait for half a second and you will see the option to preview the animation on your desktop viewer show up. If you have a tablet device and the Adobe Content Viewer app installed, plug in your iPad or Android tablet into your computer’s USB port and launch the Content Viewer App on your mobile device. Sign in to the app using your Adobe ID and this time, when you select the “preview” button from the Folio Overlay panel, you will see the option to preview your animation on your device, as well as the desktop viewer.

*The content viewer app must be open on your device in order for the Folio Overlay panel to detect it.

If you do not have a tablet device, proceed to preview the animation through your desktop viewer.

Click on each button and watch the pop-ups activate. Try clicking on the hide buttons and you should see the pop-up disappear.