[Video - 9 min] Using the Snapshot Object to Create Screen Transitions

Easily create animated screen transitions from one Deck card to the next by placing a Snapshot object on top of the Deck. Read the text instructions below the video to find out how easy it is to add the needed objects to your model to enable transitions as shown in the video.

 

NOTE: The attached snapshot_setup.dsn is all you need to add to your dsn to reproduce the effects shown in the video, and the steps shown below. This assumes the GUI has a Deck to change screens called with its _card animation renamed to be "Screen_Main" so you may have to modify the Control code to point to a different Deck animation name.

1) Bring in a snapshot object (click Insert -> Snapshot), set it to 0,0 coordinate, and change its built-in width/height animations to be the size of the entire screen.

2) Define a movement animation called "snapshot_transition" onto the Snapshot object. I made it a simple linear move from 0 to 100 to move if off to the right, and from 0 to -100 to move it off to the left.

3) Write the simple control code on the "transition logic" control code block change screens and kick off the tween (adding/using a tween is optional):

// right-arrow button event

WHEN btn_slider_pt_right_activateFuncCall == 1

SET snapshot_transition_fwd 1

END

//

// left-arrow button event

WHEN btn_slider_pt_left_activateFuncCall == 1

SET snapshot_transition_backwd 1

END

//

WHEN snapshot_transition_fwd == {}

//

// don't redraw screen while resetting the animation on the Snapshot object

SET altiaCacheOutput 1

//

// reset the Snapshot object's position animation before capturing the content beneath the Snapshot object

SET snapshot_transition 0

//

// capture the content beneath the Snapshot object here...

SET snapshot_capture 1

//

// change the Deck sitting behind the snapshot object to the correct card...

SET Screen_Main 3

//

// flush the output and redraw the screen, showing no visual change, but

// actually, we are now looking at the Snapshot object sitting on top of the old screen content.

SET altiaCacheOutput 0

//

// now just tell the Tween obejct to animate from state 0 to 100. The output of the Tween object

// is connected to the input of the transition animation that is defined on the Snapshot object itself.

SET tween_snapshot_EOB_begin 0

SET tween_snapshot_EOB_finish 100

SET tween_snapshot_EOB_Startit 1

END

WHEN snapshot_transition_backwd == {}

//

// dont redraw screen while resetting the animation on the Snapshot object

SET altiaCacheOutput 1

//

// reset the Snapshot object's position animation before capturing the content beneath the Snapshot object

SET snapshot_transition 0

//

// capture the content beneath the Snapshot object here...

SET snapshot_capture 1

//

// change the Deck sitting behind the snapshot object to the correct card...

SET Screen_Main 4

//

// flush the output and redraw the screen, showing no visual change, but

// actually, we are now looking at the Snapshot object sitting on top of the old screen content.

SET altiaCacheOutput 0

//

// now just tell the Tween obejct to animate from state 0 to -100. The output of the Tween object

// is connected to the input of the transition animation that is defined on the Snapshot object itself.

SET tween_snapshot_EOB_begin 0

SET tween_snapshot_EOB_finish -100

SET tween_snapshot_EOB_Startit 1

END

 

OPTIONAL:
4) Add a "tween" logic block (by "logic block", I just mean a rectangle and some text labels grouped together with the only purpose of holding the control code that has the tween code (I did not write that code).

5) Quickly modify the tween block code to assign the output of the tween values to the transition animation "snapshot_transition". You will see my comment line in the DoTween routine:

 

ROUTINE tween_snapshot_EOB_DoTween {} {} 
    CALL tween_snapshot_EOB_easeOutBounce {tween_snapshot_EOB_time tween_snapshot_EOB_begin tween_snapshot_EOB_change tween_snapshot_EOB_duration} tween_snapshot_EOB_aposition 
    // altiaSupport - route the tween output to the snapshot object
    SET snapshot_transition tween_snapshot_EOB_aposition 
    END  

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.