Paging Carousel with Audio
rypress last edited by
I'm using Principle to build something of a radio station tuner for a mobile app.
What I want to do seems pretty basic. I'm wanting to create a mobile app with an image carousel that behaves like a channel changer. I really want to use the continuous interaction of Paging to create the most realistic prototype for user-testing. I know how to create the image carousel, that's easy. What I want to do, in addition to creating the image carousel, is to layer a different audio track (three audio tracks) for each of the three images in the carousel. Each track would begin to play when the user pages (swipes left/right) the image carousel. One audio track would stop as it it was swiped out of view while another would begin to play as it came into view. I don't see that this is possible in Principle. Perhaps it is and I'm just missing something.
Basically, I want to create an audio player that behaves sorta like a car radio tuner, where the radio "stations" are tuned to when the user swipes right/left on the image carousel. Imagine the image carousel behaving like a channel (radio station) changer. In order to change channels the user will swipe the image carousel. Sounds easy, right?
I can create this effect by creating a component and three artboards and "tap" events to build a carousel, but this isn't as realistic of an experience as I'd like it to be. I'd really like it to have the Paging interaction to change between my radio stations, rather than a tap event.
Thoughts? Ideas? Is something like this possible in Principle?
Hello @rypress I'm Dan from design+code, and it is pretty interesting what you are trying to do. I made a quick example of what you are describing, I hope it can be helpful to your project. Cheers! https://bit.ly/2Q53lAJ Here is a link with all the assets and the Principle and Figma files.
This post is deleted!
Graeme last edited by Graeme
I didn't even know you could have music controls in Principle either.
Do you have material like this in your courses Daniel? I wouldn't know where to start with it!
Hey @kelechi thank you so much for your kind words, it is my pleasure to give some ideas to the community
Hey @Graeme thank you so much for your kind words they really mean a lot to me. We do have a Principle course in Design+Code, where we start with the basics and we go thru some advanced techniques. I recommend it to anyone who will love to start doing some prototyping, and with Principle you can either use Sketch or Figma that is the coolest part.