Forum Discussion

Thinkaway's avatar
Thinkaway
Community Member
6 days ago

Swipe card interaction

Hi All!

I want to create a 3 slide swipe card interaction (with 3 cards in total). I found this swipe file (which looks great!): Storyline 360: Swipeable Cards Navigation | Articulate - Community 

I imported the 3 of the slides from joshstoner​'s DESKTOP CARDS RIGHT-LEFT story into my project. 

I thought I'd just edit his cards to suit my content (as it would be too complicated to rebuild the content and triggers myself). 

I got everything looking pretty close to where I want it. However, I'm having the following issues:

  1. When I added an icon to each of my swipe cards, I've grouped the icon image into the 'Group 4' object grouping as he has it in his file. However when I preview, the icons don't animate along with the rest of the card - they lag behind.

    When I regroup all the objects back together I've renamed the new group Group 4 as I thought the triggers would then pick up on the new Group 4, but I can see it's just embedding the old Group 4 in the new Group 4 (see screenshot). Is there away to drag a new object into an existing group so I don't mess up all the triggers? When I try to change the trigger to the new Group 4, it loses the motion path, which I wanted to try to retain if I can... Is there a simpler way to build this type of interaction without using Groups?

  2. On a simpler note, I added my text straight into the rectangle shape itself, and used the Format Shape / Text Box / Margins function to adjust the left and right margins to 75px each. However, the margin widths don't look even - looks like the left hand side has more space?

Screen grabs and my storyline slides are attached. 

Thanks in advance for any guidance!

- Adrian

advice
e-learning development
storyline 360

2 Replies

  • Nathan_Hilliard's avatar
    Nathan_Hilliard
    Community Member
    6 days ago

    Using your first slide as an example:

    For the text in the rectangle, I suspect an issue with the new-fangled text system that controls how text is displayed. I prefer the old system, but the easiest fix is probably to just get rid of the rectangle text and insert a new textbox above the rectangle.

    1. In the timeline
      1. Open (the outer) Group 4
      2. Open the inner Group 4
      3. Select the Rectangle 1
    2. In the slide
      1.  Click on the text (inside Rectangle 1)
      2. Type Ctrl-a (select all)
      3. Type Crtl-x (cut)
    3. Click outside the slide (in the grey area)
      1. Type Crtl-Shift-d (duplicate in place)
        1. Creates a new text box with the same text, outside the group
      2. Select this textbox
      3. Reposition the textbox over your Rectangle 1 (center with guides)
    4. In the timeline
      1. Select this new textbox 
      2. Type Ctrl-x (cut)
      3. Select Rectangle 1 inside the inner Group 4
      4. Type Ctrl-Shift-d (duplicates the textbox in place inside the group above the selected object) 

    Similar approach for the icon/image

    The easiest way I've found to create and position new items inside an existing group is to create it outside the group, edit and position as needed, cut it out, and then duplicate it inside the group in the location you desire.

    1. In the timeline
      1. Select the Picture - Head
      2. Type Ctrl-x
        1. The outside Group 4 will collapse, leaving only one Group 4 remaining
      3. Select Rectangle 1 (inside Group 4)
      4. Type Ctrl-Shift-d (duplicate in place above Rectangle 1)
    • Thinkaway's avatar
      Thinkaway
      Community Member
      6 days ago

      Thank you so much for explaining this to me so clearly! It worked perfectly - you're a saviour :-D Cheers