Get to Know Ceros
In these video lessons, we'll review the general functionality of the Ceros studio including how to import assets, apply animations, interactions, and how to publish your final experience.
Understanding Ceros Analytics
In this lesson, we'll overview the Ceros analytics dashboard and how you can better understand the key performance indicators that can help you improve your content.
Search Engine Optimization (SEO) and Ceros
In this lesson, we'll dive into the various tools in Ceros that can help you optimize your content for search.
Importing Your Design Files
In this lesson, we'll walk through how to import design files from Photoshop, Illustrator, and Sketch files into Ceros.
Theme and Settings Panel
In this lesson, we'll review the different customization options available within the Theme Menu and Settings Panel.
Creating Buttons and Popups
In these video lessons, we'll review the general functionality of the Ceros studio including how to import assets, apply animations, interactions, and how to publish your final experience.
Creating Mobile Variants Using Adaptive Layouts
In this lesson, we'll take a look at how you can easily create different variants of an experience for Desktop, Tablet, and Mobile devices using the Global Layouts panel.
Create a Carousel
In this lesson, we'll review the steps to creating an image carousel using the Cycle Next and Cycle Previous interactions.
Creating Interactive Maps
In this lesson, we'll review one of the many ways you can create an interactive map in Ceros.
Creating Accessible Content in Ceros
In this lesson, we'll walk through how to leverage the accessibility tools and features in the Ceros studio.
Using Object States for Data Viz
In this lesson, we'll review one of the ways you can create an interactive Bar Chart in Ceros using Object States.
Creating Charts in ChartBlocks
In this lesson, we'll review how to create charts and graphs in ChartBlocks.
How to Use MarkUp
In this quick lesson, we'll walk through how to use MarkUp to streamline the process of giving and receiving design feedback.
Embedding 3rd Party Content and Forms
In this lesson, we'll review how you can use the Embed Object tool to embed 3rd party content such as videos, Google Maps, Spotify Playlists, Social Content, and forms.
Creating Interactive Charts
In this lesson, we'll take a look at how to create animated, interactive charts in Ceros.
Creating an Interactive Menu Bar
In this lesson, we'll take a look at how to create an interactive menu bar to set up some basic navigation within your experience.
Advanced Carousel
In this lesson, we'll build off of the previous carousel lesson to create a more advanced experience using the Show Target and Hide Others interactions.
Creating an Interactive Timeline
In this lesson, we'll review one of the many ways you can create an interactive timeline in Ceros.
Create a Looping Video Background
In this lesson, we'll explore how to make any video file function as a background element - as well as how to layer additional assets overtop for more unique visualizations.
Gating Content with Hubspot and Marketo Forms
In this lesson, we'll take a look at how you can gate multipage eBooks and long scrolling infographics using Hubspot and Marketo forms.
Creating a Slideshow
In this lesson, we'll cover how to create an automatic image slideshow within your experience.
Part 1:
In a previous video lesson, we went over how to create a graph using animations and hotspots. Now, we’re going to create an interactive chart using Object States. While it’s perfectly acceptable to apply interactions to Hotspots, applying States to objects or groups of objects is just another way to create engaging content— and it can save you time by eliminating a few steps! If you haven’t played around with Object States yet, it may be helpful to view our Video Lesson on Object States prior to watching this lesson.
As you can see, in this final experience, we have a chart that you can interact with to view data from two different years. For today’s lesson, we’re going to build this chart from scratch.
Let’s begin by creating a small square shape for our first bar. This is going to be the default state of our first bar, so let’s change the fill color to be a purple and black gradient. Now, with the Square shape selected, click the plus sign next to States to set this as our default state. We’ll add a standard transition to ensure the state change is smooth. Now, click the drop down and select Add new state to create a new state for this square. This will be State 1. With State 1 highlighted, we’ll add a standard transition, and change the size of our square to represent the data for the year 2020. Now, let’s repeat that process for State 2. Click the dropdown, select Add New State, and a standard transition. We’ll resize the square shape for state 2 to represent that data for the year 2019. To create 3 more bars, copy and paste the square shape 3 times and align and distribute them equally. Now, you can select each bar individually and edit the height of the bar for State 1 and State 2 to represent varied data. Feel free to get creative here and customize the states for each bar however you’d like.
Once you’re finished customizing your bars, make sure to select each of the 4 bars, group them together, and in the design tab check off “Use Group as Trigger.” This will enable us to change the states of each bar by targeting the group. You can see if we click the drop down and hover over State 1 and State 2, we can preview the different states for our bars.
Now that we’ve customized the various states for each bar in our graph, we need to create our 2019 and 2020 buttons that will trigger the changes in our graph. We can start by adding a small square shape on the canvas with a textbox that says 2020 above it.
We’re going to “Add New States” for both the text box and square shape below it. So we’ll go ahead and add a new state to the text box just like we added new states in the previous step. We’ll want to make sure we add a transition, and for the new state we’re going to change the color of the text box to white. Once we’re done adding our new state to the text box, we can add a new state for the square shape as well. Only this time we’re going to change the fill color from green to purple, and we’ll transform the square shape into a circle by changing the dimensions to 80 by 80, and rounding the corners by 80 pixels.
Now, group the text box and square shape together; and we’ll label this group in the layers panel as “2020 button”. Make sure to check the box that says “use group as trigger”. From here, we can make a copy of this button and change the text to say 2019. There, we now have all of our states setup, and in the next video we’ll walk through how to add the interactions to trigger these object states to change.
Part 2
Building off of the interactive graph from the previous video, we’re going to add customized hover interactions to our buttons to reveal data for a specific year. As you can see in the final experience, when you hover over each year, it reveals a new set of data.
Let’s select the 2020 button group, and navigate to the interaction tab. You’ll notice that since we chose “Use Group as Trigger” in a previous step, a few interactions have already been automatically applied. We are going to edit these interactions to create our own custom effects.
Let’s start by editing the existing “on Hover” interaction by clicking the down arrow next to the interaction. For the action we’ll use “change target state,” and from the list below, make sure the 2020 button group is selected. From the dropdown, select State 1 as the target state. Also, we’ll want to deselect “lock state” and click update interaction to save our changes.
The next thing we’ll want to do is update our interactions for the bars in our chart. Click the down arrow next to the on-click interaction to change the trigger to ‘Hover’. For this on hover interaction, we’ll change the target state to the bars group. Select State 1 as the target state, and toggle off lock state before clicking update.
Now, try running through the same process for the 2019 button. This time around, make sure to select State 2 when changing the target state of the bars folder. Once you’ve finished, go ahead and look at the preview to see if your interactions work as intended.
Part 1:
In a previous video lesson, we went over how to create a graph using animations and hotspots. Now, we’re going to create an interactive chart using Object States. While it’s perfectly acceptable to apply interactions to Hotspots, applying States to objects or groups of objects is just another way to create engaging content— and it can save you time by eliminating a few steps! If you haven’t played around with Object States yet, it may be helpful to view our Video Lesson on Object States prior to watching this lesson.
As you can see, in this final experience, we have a chart that you can interact with to view data from two different years. For today’s lesson, we’re going to build this chart from scratch.
Let’s begin by creating a small square shape for our first bar. This is going to be the default state of our first bar, so let’s change the fill color to be a purple and black gradient. Now, with the Square shape selected, click the plus sign next to States to set this as our default state. We’ll add a standard transition to ensure the state change is smooth. Now, click the drop down and select Add new state to create a new state for this square. This will be State 1. With State 1 highlighted, we’ll add a standard transition, and change the size of our square to represent the data for the year 2020. Now, let’s repeat that process for State 2. Click the dropdown, select Add New State, and a standard transition. We’ll resize the square shape for state 2 to represent that data for the year 2019. To create 3 more bars, copy and paste the square shape 3 times and align and distribute them equally. Now, you can select each bar individually and edit the height of the bar for State 1 and State 2 to represent varied data. Feel free to get creative here and customize the states for each bar however you’d like.
Once you’re finished customizing your bars, make sure to select each of the 4 bars, group them together, and in the design tab check off “Use Group as Trigger.” This will enable us to change the states of each bar by targeting the group. You can see if we click the drop down and hover over State 1 and State 2, we can preview the different states for our bars.
Now that we’ve customized the various states for each bar in our graph, we need to create our 2019 and 2020 buttons that will trigger the changes in our graph. We can start by adding a small square shape on the canvas with a textbox that says 2020 above it.
We’re going to “Add New States” for both the text box and square shape below it. So we’ll go ahead and add a new state to the text box just like we added new states in the previous step. We’ll want to make sure we add a transition, and for the new state we’re going to change the color of the text box to white. Once we’re done adding our new state to the text box, we can add a new state for the square shape as well. Only this time we’re going to change the fill color from green to purple, and we’ll transform the square shape into a circle by changing the dimensions to 80 by 80, and rounding the corners by 80 pixels.
Now, group the text box and square shape together; and we’ll label this group in the layers panel as “2020 button”. Make sure to check the box that says “use group as trigger”. From here, we can make a copy of this button and change the text to say 2019. There, we now have all of our states setup, and in the next video we’ll walk through how to add the interactions to trigger these object states to change.
Part 2
Building off of the interactive graph from the previous video, we’re going to add customized hover interactions to our buttons to reveal data for a specific year. As you can see in the final experience, when you hover over each year, it reveals a new set of data.
Let’s select the 2020 button group, and navigate to the interaction tab. You’ll notice that since we chose “Use Group as Trigger” in a previous step, a few interactions have already been automatically applied. We are going to edit these interactions to create our own custom effects.
Let’s start by editing the existing “on Hover” interaction by clicking the down arrow next to the interaction. For the action we’ll use “change target state,” and from the list below, make sure the 2020 button group is selected. From the dropdown, select State 1 as the target state. Also, we’ll want to deselect “lock state” and click update interaction to save our changes.
The next thing we’ll want to do is update our interactions for the bars in our chart. Click the down arrow next to the on-click interaction to change the trigger to ‘Hover’. For this on hover interaction, we’ll change the target state to the bars group. Select State 1 as the target state, and toggle off lock state before clicking update.
Now, try running through the same process for the 2019 button. This time around, make sure to select State 2 when changing the target state of the bars folder. Once you’ve finished, go ahead and look at the preview to see if your interactions work as intended.