Extend Tumult Hype with JavaScript: hypeDocument.extensions

↑ extension index


hypeDocument.continueTimelineNamedFromTo

This Extension allows you to play a Timeline from a given time, To a given time on a named timeline

The timeline will start from the From time and stop at the To time.



      /* hypeDocument.continueTimelineNamedFromTo 1.0
     * @description This Extension allows you to play a Timeline **from** a given time,  **To** a given  time  on a **named**  timeline
     
     The  timeline will start from the **From time** and  stop at the  **To time**.
     
      *@param  (Number/String) timelineNamed = The Timeline name to act on
      *@param  (Number/String) timeFromSeconds = The time to start from
      *@param  (Object) playOptions =  play to time in time line , Dirctional play option -  {timeToSeconds: time (Number/String), kDirection: (hypeDocument.kDirection)}
     
     */



    hypeDocument.continueTimelineNamedFromTo = function(timelineNamed,timeFromSeconds,playOptions){
        
        
        //-- set the start time
        timeFromSeconds =	 timeType(timeFromSeconds)
        
        
        //-- set the direction
        var kDirection = hypeDocument.kDirectionForward;
        var restartTimeline = false;
        if (playOptions){
        
        if (playOptions.hasOwnProperty('kDirection'))  {
            
            
            kDirection = playOptions['kDirection'];
            
            
        }
        }
        
        //-- pause, Go to start time , continue timeline
        //hypeDocument.pauseTimelineNamed(timelineNamed)
        hypeDocument.goToTimeInTimelineNamed(timeFromSeconds, timelineNamed)
        hypeDocument.continueTimelineNamed(timelineNamed, kDirection,restartTimeline)
        
        
        //-- set the end time
         if (playOptions){
        if (playOptions.hasOwnProperty('timeToSeconds'))  {
            
            var timeToSeconds =	 timeType(playOptions['timeToSeconds']);
            
            //--- compare left, right = start time end time.
            
            //-- start the end time timer.
            var timeCodeStop = setInterval(function(){
                                           var compareLeft , compareRight;
                                           
                                           
                                           
                                           //-- set up the end time timer. Check which direction we are going in. If reverse swap the start and end time around. This is so we can use a single > symbol below.
                                           
                                           kDirection === hypeDocument.kDirectionReverse ? (
                                                                                            
                                                                                            
                                                                                            
                                                                                            //-- reverse
                                                                                            compareLeft = timeToSeconds ,
                                                                                            compareRight = hypeDocument.currentTimeInTimelineNamed(timelineNamed).toFixed(3)
                                                                                            
                                                                                            
                                                                                            ) : (
                                                                                                 
                                                                                                 compareLeft = hypeDocument.currentTimeInTimelineNamed(timelineNamed).toFixed(3) ,
                                                                                                 compareRight = timeToSeconds 
                                                                                                 
                                                                                                 );
                                           
                                           
                                           if (compareLeft >  compareRight ){
                                           console.log("stop"); //this one
                                           
                                           
                                           hypeDocument.pauseTimelineNamed(timelineNamed)
                                           
                                           clearInterval(timeCodeStop);
                                           
                                           
                                           
                                           };
                                           
                                           
                                           
                                           
                                           }, 20);
            
            
        };
        
    }//--End if playOptions
    };




     		 
    //-- Time split Functions  -->	
    function timeType(timeSeconds){
        
        switch (typeof(timeSeconds)) {
                
            case 'number':
                timeSeconds  = numberSplitTime(timeSeconds)
                break;	
            case 'string':
                timeSeconds  = stringTimeSplit(timeSeconds)
                break;
        }
        
        return timeSeconds
    }



    function numberSplitTime(timeM){
        
        var secs =  timeM.toFixed(0)  ;
        var mils =  (timeM  -  secs).toFixed(2).replace(".","")  
        
        
        return   mils =  Number(secs) + ( Number(mils) * 0.033 )
        
        
    }	





    function stringTimeSplit(tidx){
        
        
        var tempNumbers = [];
        var finalNumbers = []
        
        
        var tidxArrary = tidx.split('')
        tidxArrary.push(':');
        
        for (i = 0; i < tidxArrary.length; i++) { 
            
            if (!tidxArrary[i].match(/\D/)){
                tempNumbers.push(tidxArrary[i]);
                
            }else{
                
                var tempNum = tempNumbers.join('');
                finalNumbers.push(tempNum);
                tempNumbers =[];
            }
            
            
        }
        
        var splitTime = Number(finalNumbers[0]) * 60 + Number(finalNumbers[1]) + ( finalNumbers[2] * 0.033 )
        
        return [splitTime];		
        
    }



    //<---/

You can add an optional Direction to play timeline:

hypeDocument.kDirectionForward
hypeDocument.kDirectionReverse


Time Syntax

The Time syntax is Strict but can be done in a number format seconds.frames or in a String format “min:seconds.frame

The number format is the same as the standard hype API.

Examples of time using numbers.
seconds.frames

1.34
34.10
70.14

Frame index does not exceed 29.


Examples of time using String syntax.

min:seconds.frame

‘00:34.15’
‘00:34,15’

‘01:10,14’
‘01:10.14’

‘1:10,14’
‘1:10.14’

The seconds must not be greater than 59 and the frame must not be more than 29.


Call Syntax.
hypeDocument.continueTimelineNamedFromTo(timelineName (String) , time# (Number/Sting), {timeToSeconds: time# (Number/Sting), kDirection: (hypeDocument.kDirectionForward/ Reverse API) } )


Usage

Using numbers time.

We want the time line to play from the 34 seconds and 10 frames point and stop at the 70 seconds and 14 frames point. And forward

hypeDocument.continueTimelineNamedFromTo(“fooTimeline”, 34.10, {timeToSeconds:70.14 , kDirection: hypeDocument.kDirectionForward})


Using string time.

We want the time line to play from the 70 seconds and 14 frames point and stop at the 34 seconds and 10 frames point. And in Reverse

hypeDocument.continueTimelineNamedFromTo("test", '01:10:14’ , {timeToSeconds: '00:34.10’, kDirection: hypeDocument.kDirectionReverse})


Play Options

kDirection: is Optional. The default is forward.

hypeDocument.continueTimelineNamedFromTo(“fooTimeline”, 34.10, {timeToSeconds:70.14 })

But use hypeDocument.kDirectionReverse when you are starting down the time stream and playing back up time stream to a near time. (reverse)

hypeDocument.continueTimelineNamedFromTo("foo2",'00:08:10' , {timeToSeconds: '00:2.25', kDirection: hypeDocument.kDirectionReverse})


timeToSeconds : is Optional.

You can exclude this option and just use the start from time.
The timeline will then start from the given time and continue as normal.

hypeDocument.continueTimelineNamedFromTo(“fooTimeline”, 34.10)

hypeDocument.continueTimelineNamedFromTo(“fooTimeline”, 34.10, {kDirection: hypeDocument.kDirectionReverse})

You can use either one or the other options, Both or none.


Example project.

ContinueTimelineNamedFromTo.extension v1 Example.hypetemplate.zip (43.5 KB)

v1.00


Also see example in this post


Tip

You can use the current time of a timeline using this syntax.

var currentTime = hypeDocument.currentTimeInTimelineNamed(timeline).toFixed(3)


If you do need to use the current time API make sure you chain .toFixed(3) to the end.

var currentTime = hypeDocument.currentTimeInTimelineNamed(timeline).toFixed(3);

hypeDocument.continueTimelineNamedFromTo(timeline,'00:1.00' ,  {timeToSeconds: currentTime , kDirection: hypeDocument.kDirectionReverse})
6 Likes