Design and prototype your ideas with the community.

Bring your ideas to life with a growing community of design makers and thinkers.

Paging Carousel with Audio



  • Hi Prototypers,

    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?

    Thanks!

    -Ry



  • 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.



  • @Daniel Welcome, welcome to the community, Daniel! Thanks for the super helpful answer to @rypress' question!



  • This post is deleted!


  • @Daniel Hey Daniel, I've never really gotten into prototyping in Principle but what you've done here is amazing! @rypress check it out - is this what you were looking for?:

    principle

    I didn't even know you could have music controls in Principle either.

    0_1543777466196_Screenshot 2018-12-02 at 20.03.44.png

    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. 😁🔥