Animating a Popup
Learn the basics of C4 Studio, while animating a popup.
In this lesson we will animate a transition from the cover of a story to reading the content. To do this will need to place some items off of the artboard.
We won’t be building our Sketch file from scratch, so to following along grab this starter file:
If you want to just have a look at the final design files, you can grab them here:
Sketch works like this:
If you put an object outside of an artboard it becomes unlinked from that artboard.
C4 Studio works like this:
C4 Studio will only render objects that belong to an artboard, anything else will be ignored.
So, if you want something to start by existing off an artboard and be recognized by C4 Studio, you need to do the following:
Select any items that exist on a Page, i.e. not an artboard…
In the layer’s panel on the left, drag those layers into the artboard you want them to be a part of.
We’ll now create the end state, but first…
Duplicate the artboard, rename the new one to
The goal for the next few steps will be to slide everything up, shrink the main image and give enough space to the text content so that it can be read.
The dark layer overlays the image. We’re going to shrink this and darken it so that we create a higher contrast between the image and the text.
Change the dark layer’s height to
240, and its opacity to
We’ll move the title and subtitle up so they remain visible.
Select both titles and move them straight up so they are centered on the dark layer.
We’ll scale the image, keeping it anchored to the top-center of the artboard.
Change the height of the image to
400pt, keeping the width proportionate
Center the image and make sure its top aligns to the top of the artboard.
Finally, we’re going to move the content into place.
Select both the white layer and the text body using the layer panel on the left.
Move both objects straight up until the top of the white layer touches the bottom of the dark layer.
Your sketch file should now look like this:
Time to animaaaaaate!
Create a new C4 Studio project, connect the sketch file you just created and link both the
You’ll see that the white layer and text slide in from off the bottom of the artboard.
Add some smoothness to the animation by doing the following:
Select all layers and change their easing to
Ease In + Out
The animation is still too fast. Fix this by doing the following:
Change the timeline duration to
If we look inside the
File menu we can now pass code to a developer by using the
Export Code command, or we can
Export Movie and share a QuickTime file to get approvals.
This lesson introduced the concept of placing assets outside the frame of the artboard. We had to make sure that the assets were still part of an artboard’s layer stack to make sure that C4 Studio did not lose track of the relationships of the assets.