I want to animate a card that flips when the user clicks, something like a memory card. By just changing the states, the card has no movement and the animation paths in storyline starts with the timeline, not by a click. Is there a simple way to realize that?
Here is one that I use for flipping cards. The sample includes a one-way flipping card and a toggling flip card. They used state and 'swivel' animation giving a flipping effect when clicked. For toggling, I used a T/F variable to conditionally switch the states on click.
Use one-way flip for knowledge checks or quizzes and toggle for matching or review activities.
I've seen and used some of the suggested flip card in the community but this one is my most used. Hope it helps other people.
I've applied the "Swivel" animation in the revealed state. You can see that by selecting the square, go in state, edit 'revealed' state and see the animation tab in the Ribbon on the top.
By default, you cannot apply animation in a new state but there is a well known hack. Just edit the new state, click on the object, cut it and then paste it, you can now apply animations on it.
I downloaded your sample file for the the card flip animation and I'm reading your instructions above and still cannot figure out, one how you created a new state named 'Revealed' and two how you hacked this state so you could apply the swivel transition animation to the card. Is there any way you could provide some more explicit instructions with screen shots perhaps? I'm really needing to creating this type of user interaction and need some assistance.
I opened your sample file back up again and walked thrrough the instructions that you stated above and I was able to get it to work! Thank you again for this tutorial and sample file. It will really help me out.
Why doesn't Storyline already have a Flip Card function built-in like D&D. Why do we have to build it manually with triggers, states, animation, etc. Rise360 has a built-in Flip Card block/template, and so do many LMSs and other HTML editors. Seems like a pretty universally wanted interaction type. Does anyone know if this has this ever been sent in as a Feature requirement?
I think a built-in flip card interaction in Storyline would be a great idea!
You are welcome to share your suggestions through this feature request form, and if it makes it into our feature roadmap, we'll make sure to update you!
I found this helpful video on YouTube. It was a little fast for me at times so I had to pause a lot but it made sense once I got the gist of it. Hope this helps others!
Fantastic Najam - followed your instructions and worked beautifully! Much easier than layers and the only option I've seen that allows you to toggle back :) Easy when you know how lol.
I put in a feature request over a year ago to have this be a built in function like Rise and other programs have. Not sure whatever happened with it. We should not have to create all these steps for a simple action that should be built into the product.
Again.. Where are we with the feature request from over a year and a half ago. Flip card is a pre-Built element in almost every authoring tool, including many LMSs. Articulate already has it in Rise 360. For SL, it should not require watching how-to videos and creating states and triggers.
We still don't have any new updates to share regarding the feature request that you raised, but will definitely let everyone subscribed to this thread know once it makes it to our product roadmap. Here's a quick look at how we manage feature requests for your reference.
I am cutting the Swivel Interaction in two parts and added layers for the interaction going forward and backwards. The result looks quite similar to the rise Flashcards.
Thanks for sharing the feedback and also for sharing the sample file! I'm sure other users designing a similar interaction will find the workaround very useful!
25 Replies
Lots of suggestions in the forum for this topic.
https://community.articulate.com/discussions/articulate-storyline/flip-card
https://community.articulate.com/discussions/articulate-storyline/flash-cards-flipping-action
This post was removed by the author
If I copied the right shortcut this may help. Gerry was very helpful
https://community.articulate.com/discussions/articulate-storyline/flip-card-interaction
Here is one that I use for flipping cards. The sample includes a one-way flipping card and a toggling flip card. They used state and 'swivel' animation giving a flipping effect when clicked. For toggling, I used a T/F variable to conditionally switch the states on click.
Use one-way flip for knowledge checks or quizzes and toggle for matching or review activities.
I've seen and used some of the suggested flip card in the community but this one is my most used. Hope it helps other people.
Thanks a lot Najam!
Hi, Najam--
Thanks so much for this. How did you set the toggling square to swivel when clicked?
I've applied the "Swivel" animation in the revealed state. You can see that by selecting the square, go in state, edit 'revealed' state and see the animation tab in the Ribbon on the top.
By default, you cannot apply animation in a new state but there is a well known hack. Just edit the new state, click on the object, cut it and then paste it, you can now apply animations on it.
Here's a link to a post where someone else has created flipcards in SL: https://community.articulate.com/discussions/building-better-courses/flash-cards-2b71c76a-700d-4944-9a5b-da12e8196391
Najam,
I downloaded your sample file for the the card flip animation and I'm reading your instructions above and still cannot figure out, one how you created a new state named 'Revealed' and two how you hacked this state so you could apply the swivel transition animation to the card. Is there any way you could provide some more explicit instructions with screen shots perhaps? I'm really needing to creating this type of user interaction and need some assistance.
Thanks,
Mike
Najam,
I opened your sample file back up again and walked thrrough the instructions that you stated above and I was able to get it to work! Thank you again for this tutorial and sample file. It will really help me out.
Mike
Thank you, this was great!!
Hi, Jerry.
I think a built-in flip card interaction in Storyline would be a great idea!
You are welcome to share your suggestions through this feature request form, and if it makes it into our feature roadmap, we'll make sure to update you!
I found this helpful video on YouTube. It was a little fast for me at times so I had to pause a lot but it made sense once I got the gist of it. Hope this helps others!
https://www.youtube.com/watch?v=GOaRggN2kaw
Thanks a lot this is very very helpful
This has saved me hours of trying to figure this out! Thank you!!
Fantastic Najam - followed your instructions and worked beautifully! Much easier than layers and the only option I've seen that allows you to toggle back :) Easy when you know how lol.
Thanks! This helped me today!
I put in a feature request over a year ago to have this be a built in function like Rise and other programs have. Not sure whatever happened with it. We should not have to create all these steps for a simple action that should be built into the product.
Thank you for this!
Again.. Where are we with the feature request from over a year and a half ago. Flip card is a pre-Built element in almost every authoring tool, including many LMSs. Articulate already has it in Rise 360. For SL, it should not require watching how-to videos and creating states and triggers.
Hi Jerry,
We still don't have any new updates to share regarding the feature request that you raised, but will definitely let everyone subscribed to this thread know once it makes it to our product roadmap. Here's a quick look at how we manage feature requests for your reference.
Yes, please, make it a feature! This is really essential for an authoring tool, please add it to storyline.
I had the problem with flipcards too and I could solve it. So here is my fix for storyline:
https://360.articulate.com/review/content/9272b9f4-4318-465c-8c4f-d7309e7fddd6/review
I am cutting the Swivel Interaction in two parts and added layers for the interaction going forward and backwards. The result looks quite similar to the rise Flashcards.
Hi Michael!
Thanks for sharing the feedback and also for sharing the sample file! I'm sure other users designing a similar interaction will find the workaround very useful!
Have a great rest of your week!