As an alternative way to support this same example, we will use two different elements for the filled and empty bookmark states. To keep things simple, we'll create the alternative version as another scene in the same prototype, but feel free to create a new prototype if you prefer.

We will add the activities view mock-up version that does not contain the bookmark icons, and then add the icons as separate layers.

In order to make sure that we have a big enough touch area, we turn the bookmark layer into a group by right-clicking on the bookmark layer and selecting the Group option. This allows us to adjust the size of the group--without affecting the bookmark image size--and work with the group instead of the smaller bookmark layer.

We also need the filled version of the bookmark icon. We can follow the same approach to create a group containing the filled version of the bookmark icon--which we rename as Bookmark-full-1. In this case, the new group will be not only invisible, but it will also be disabled.

Making a layer invisible--by adjusting opacity to 0%--keeps it clickable. Since we want the full version of the bookmark to not interfere with the clicks on the empty version of the bookmark below it, we need to disable the layer by setting its display property to Hidden.

A new timeline will be in charge of switching the visibility of the layers. We can create a new timeline and make the Bookmark-full-1 layer become active first and make the opacity 100% later. In this way, the layer becomes active and gradually becomes visible. Optionally, we could also disable the empty version of the bookmark if it becomes problematic in terms of visibility (parts may remain visible despite having a layer on top), or interaction (parts of the active area are larger than the layer on top and could still be clicked).

Finally, we'll add actions to the two groups of layers we created. The empty bookmark group will play the animation we just created for a tap. For the filled version of the bookmark, we'll lay the same timeline, but do it in a reverse order. Using the Play in reverse option allows us to support the opposite action without having to create a new specific timeline.

We've seen two different methods to change the status of elements using a different number of active areas and different approaches to building timelines. You can extend the example to make it possible to bookmark other items in the list and practice both approaches.