Animating a Popup
Learn the basics of C4 Studio, while animating a popup.
This lesson will cover the basics of using C4 Studio. You will set up a project file in Sketch, define two states of your application, import the Sketch file into C4 Studio, and finally animate it.
Our animation will be based on an app screen with a start button, which when interacted with would invoke a pop-up. By using C4 Studio we can define the exact behavior we would like a pop-up component to exhibit. This can be passed on as code to a developer and integrated into the final build of the application.
If you want a quick start for the tutorial you can download our sample file and follow along starting with importing into C4 Studio.
Otherwise, we’ll build the design file from scratch.
First we need to design the two states of the application. The screen before the pop-up and the pop-up itself with the dark background behind it isolating it from the screen.
Let’s jump into Sketch.
Inside create a new artboard using iPhone 6 dimensions. (Note: C4 Studio can support any dimension but for code to be useful to your developer we need to use an iOS dimension)
To make it easier for us when linking the file with C4 Studio:
Rename the artboard to
We can now design our first screen.
To create the start state, we’re going to add 3 elements:
The end result looks like this:
When you’re done positioning and styling the button elements and instruction text…
Group the button elements, and rename the group
C4 Studio will preserve the structure of groups and layers, so this step makes the layer structure more clear.
End state requires a bit of planning. After you’re happy with the start state, the best technique is the following:
Startartboard, create all the required elements for the end state
Let’s get to it…
Let’s design an popup on our
Start artboard with a solid layer to fade in behind the overlay to separate the screen and overlay.
The end result looks like this:
Remember, the start elements are underneath the end elements for now.
We are now ready to create the
We want to keep our objects linked between the
End artboards, so that C4 Studio will know how to create the transitions.
To do this we will use the C4 Studio sketch plugin.
If you haven’t installed the plugin, you can grab a copy from: C4 Studio Sketch Plugin
Let’s rename this artboard to
Now we can set the transparencies of our
End layers so that our
Start artboard looks they way it should.
Popovergroup and set it’s opacity to
FADElayer and set it’s opacity to
Your sketch file should look something like this:
We can now save our file as
The rest of the tutorial will take place in C4 Studio.
Now that we have our design file ready, it’s time to import it into C4 Studio.
Create a new C4 Studio project
In the middle of the stage you’ll see a little link icon.
Tap the link icon and choose the
popup.sketchfile you just created
C4 Studio is now linked to your design file.
We are now ready to link our
End artboards, which will take 2 simple steps.
On the left-hand side of the stage…
Click the artboard link button
Afterwards, on the right-hand side of the stage…
To see the animation…
You can also use the spacebar to trigger the animation
… and the transition will run from our start state to our end state.
If you can't see the Play button, then you can scroll the main stage downwards, or zoom in or out
By default the timeline length is set to
.25 seconds. We can adjust this by clicking the clock icon on the right-hand side of the timeline.
Set the timeline duration to
This will uniformly scale our current transition.
Let’s adjust our animation so that the pop-up appears after the blue layer fades in. If we unroll the layer arrows we can see which values are being animated.
Unroll to find the opacity layer for our
The start and end keyframes are shown with circles at each end of the animation line.
Drag the end of the
You can use the option key to snap the end of a timeline
Now let’s adjust the start of the
popup animation. Unroll the overlay and find the opacity keyframes.
Drag the opacity start keyframe to
Now try hitting play again.
The animation is sequenced the way we want it.
This tutorial covered a basics of setting up of a sketch file with two app states. Creating a new C4 Studio project, linking artboards, fine tuning our animation.
Now go experiment some more or if you would like to keep going our next tutorial will get into how we can add layers after we have already created a C4 Studio project.