Expandable banner go to a specific point after collapsing expanded page

[bar...@ni-na.hr]

Hello!

Im trying to figure out if and how to go to a certain point in time on main page (banner page) after collapsing expanded page.

The idea is to have an animation on the banner page. On mouseover the page expands and starts a different animation and then on collapsing the expanded page (whether it is by mouse movement or click) it goes back to the banner page. But instead of going to the middle of the animation, it goes back to the beginning.

Is it possible to switch back to the mid of animation?
Note that im still learning to use GWD and am not sure if i understand events and labels well or it is just not working that way.

Any suggestions and advice is welcome! Thank you :D

Barbara

[San Khong]

Hi Barbara,

Yes it is possible. You can declare a global variable and set it 0. When the ad expands, set the variable to 1. Then add an event for ready to present the banner page, check the variable, if it's set to 1, set the timeline to gotoAndPlay at a label at mid point.

Steps:

1. In the banner page, add a timeline label at midpoint (right click on the timeline Events layer and select Add label).

2. Add a timeline event at any point to gotoAndPlay at that label (this is to get the code for gotoAndPlay at the label so you will need to delete this event later): right click on the events label at any point on the time and select Add event, select Timeline > gotoAndPlay as Action, select the timeline label you added for the midpoint and click OK at the Configuration.

3. Switch to code view and find the gotoAndPlay event you just added, it will appear as gwd.actions.timeline.gotoAndPlay...

4. Copy that line gwd.actions.timeline.gotoAndPlay('banner-page', 'mid');

5. Now add the global variables after the window.gwd = window.gwd.... 

var expand = 0;

6. Switch back to Designer view, delete the gotoAndPlay event from the Events panel.

7. Deselect everything on stage by clicking on an empty area on stage, click on the + button in the Events panel to add an event.

8. Select the banner page for target, Page > Ready to present the page for Action, Custom > Add custom action for Action.

9. Enter a function name such as "checkExpand", in the code pane, check if the expand variable is 1, then paste the gotoAndPlay code.

if (expand == 1){

 gwd.actions.timeline.gotoAndPlay('banner-page', 'mid');

}

10. Click OK to save.

11. Right click on the button to expand the creative and select Add event...

12. Select Taparea > touch/click as event (if you did not use Taparea for the expand button then it's Mouse > click).

13. Select Custom > Add custom action.

14. Give it a function name and in the code pane, set the variable to 1

expand = 1;

15. Click OK to save.

Now you should be all set. I also attached the sample file.

Hope it helps.

San

Google Web Designer team