Experience Tips And Tricks: Part Two

This article contains random tips and tricks we and our customers have come across in our work with IntuiFace. If you have a tip or trick you'd like to share, tell us!

Table of Contents



    SlideShow playlist with Videos and Images

    Start by binding the "Display duration" property of the SlideShow to a Text Asset. The TextAsset will be used as a variable. With Triggers and Actions, set the desired display duration value to the text so that the next slide will be based on this value.

    The approach is as follows:

    • Add a Text Asset on the scene (it will be used to define the Display duration of the SlideShow). Each slide will modify this text so that the next slide will respect the set duration.
    • Bind the value of the SlideShow's Display duration property to the Text Asset
    • Set Triggers and Actions on each asset in the SlideShow that will modify the text

    For example:

    • WHEN - Slide 1 - Moved into focus - THEN - Set text - 00:00:05

    Since the SlideShow's duration is bound to the text, the next slide will last for 5 seconds.

    Assuming your video is on slide 3, you will have to set the following trigger on slide 2 :

    • WHEN - Slide 2 - Moved into focus - THEN - set text - 00:00:20

    Upon loading, slide 3 will have the duration value of 20 seconds.

    In order to play the video from the beginning, each time it comes into focus, you will have to setup the following triggers and actions on the video:

    • WHEN - Video - Moved into focus - THEN - Video - play (you can set this action on the same moved into focus trigger that changes the text)

    • WHEN - Video - Moved out of focus - THEN - Video - Stop

    TnTSlideShowVideo.png

    To see the theory in action, download this sample experience


    Create a Video Playlist

    To create an automatic video playlist you can use Triggers & Actions combined with the Video asset's Ends trigger to scroll a collection containing your videos and then call the Play action on the next video.

    To make the playlist loop, setup the following trigger on the last video of the collection:

    • WHEN - Video - ends - THEN - Collection - Scroll to index 1 + Video 1 - Play

    videoTa.jpg

    To see the theory in action, download this sample experience.


    Create and infinite looping scroll

    To create an infinite looping scroll effect, you can use the Scroll Collection with the following trigger and action on the collection itself:

    WHEN- Scroll Collection - Reaches right boundary - THEN - Scroll collection - Scroll to left boundary

    This action exposes animation parameters that you can configure according to your needs.

    TnTInfiniteScrollcollectionScroll.gif

    To see this theory in action, download this sample experience.


    Simulate Item in focus for Asset Grid

    The Index in focus Property is only available on certain ordered collections (Asset Flow, Carousel, Helix, Flip Chart), to emulate this property and achieve a similar behavior to "Item in focus" Property on an Asset Grid, you can use the following approach:

    • Using Bindings get the value of Index in focus property of the Asset Grid's Scroll offset Property.
    • Using a Custom Script Converter convert this value to an emulated index property.

    As an example we will use a Carousel and bind it's "Index in focus" Property to the "Scroll offset" Property of an Asset Grid collection. On this binding we will use a Custom Script Converter to change the value returned by the Asset Grid's scroll offset property into an index value

    Below you will find the formula to be used in the Custom Script Converter

    Math.floor(INPUT / (300 + 15)) +1
    

    where:

    • 300 represents the default item width of the Asset Grid
    • 15 represents the item spacing
    • +1 is set because index starts at one
    • Math.floor() returns the lower integer of the division.

    TnTAGindexinfocus.gif

    To see the theory in action, download this sample experience.


    Animate a Simple Text through the screen

    • Use the Simple Text asset to create your text
    • Move it outside of your scene
    • Create a Timer trigger on the scene that will call a move to action on your text asset
    • Set the animation to repeat indefinitely with a jump to start reverse behavior.

    Adjust the duration of the animation to change the scrolling effect speed.

    TnTtextanimationloop.PNG


    Animate a list of elements, like an RSS or Twitter feed.

    • Modify the design & layout of your RSS or Twitter feed to have a horizontal Asset Grid
    • Enlarge the Asset Grid's width so that all elements are visible.
      • Hint: width = item width * number of elements
    • Move the Asset Grid outside the scene
    • Create a Timer trigger on the scene that will call a move to action on your Asset Grid
    • Set the animation to repeat indefinitely with a jump to start reverse behavior.

    TnTtwitterAGhorizontal.png

    AGanimationTickertacker.PNG


    Blur assets that are out of focus in a Scroll-able Collection

    ! NOTE: using blur effect may affect rendering performances.

    Preset the blur property to your desired value for all images, the initial scroll effect of the Asset Flow will automatically make the first image clearly visible when the experience is played.

    Add the following triggers and actions on the images nested within the Asset Flow:

    • WHEN - Image - Asset Flow - Moved into focus - THEN - Image - Visibility & Effects - Apply effects (blur 15)

    • WHEN - Image - Asset Flow - Moved out of focus - THEN - Image - Visibility & Effects - Apply effects (blur 15)

    movedintofocusBlur.gif

    To see the theory in action, download this sample experience.


    tender-previous.png