WEBVTT 00:00:03.533 --> 00:00:09.233 Hi! This is Lindsay and in this tutorial we're going to take a look at how to use Genial.ly's online app 00:00:09.233 --> 00:00:12.199 to create some interactive infographics. 00:00:12.200 --> 00:00:16.866 In this tutorial we're particularly going to be looking at how to create an interactive timeline. 00:00:16.866 --> 00:00:20.866 In this tutorial, we'll cover adding content to your template 00:00:20.866 --> 00:00:25.866 and adding interactivity to the timeline. Let's get started. 00:00:25.866 --> 00:00:30.899 Adding content to the template 00:00:30.900 --> 00:00:33.600 So let's take a look at how we add content to our timeline. 00:00:33.600 --> 00:00:36.533 You can see that were first brought to the pages tab. 00:00:36.533 --> 00:00:36.899 It shows me that my graphic is comprised of a single page. 00:00:36.900 --> 00:00:36.933 You can see that were first brought to the pages tab. 00:00:36.933 --> 00:00:40.199 It shows me that my graphic is comprised of a single page. 00:00:40.200 --> 00:00:43.500 So, I won't need to work in this pages tab. 00:00:43.500 --> 00:00:52.000 For this timeline today, I'm going to be creating a timeline of the events that happened with the NHL backup goalie Dave Ayres who made 00:00:52.000 --> 00:01:00.500 his historic debut in the NHL. So I already have my text and a bunch of my links and the graphics and things that I want to add here. 00:01:00.500 --> 00:01:06.166 So we'll start working with with those. So, let's begin by giving our project a name. 00:01:06.166 --> 00:01:11.399 So, I've given it a name and you can see that my project automatically saves itself here, so you don't have to worry too 00:01:11.400 --> 00:01:16.666 much about hitting the save button. Next, let's give it a title. 00:01:16.666 --> 00:01:20.399 To do that, I'll just double click in the title field here 00:01:20.400 --> 00:01:22.500 and I'll paste that in. 00:01:22.500 --> 00:01:29.433 And I've also got a subtitle. 00:01:29.433 --> 00:01:37.366 OK, next I want to add a customized background in here. I don't want it to be just white. I've prepared an image that I want to sit in the background. 00:01:37.366 --> 00:01:39.666 I'll come over to the background tab 00:01:39.666 --> 00:01:40.466 I'll come over to the background tab 00:01:40.466 --> 00:01:46.466 and the base tab here, refers to everything in this slightly gray area. If you wanna change 00:01:46.466 --> 00:01:52.466 what appears in the white area here, within the hatch marks, you're going to want to click on the canvas tab. 00:01:52.466 --> 00:01:57.032 Now, you have an option from using something from their library, from Pixabays free images, 00:01:57.033 --> 00:02:01.599 you can also choose just a color or you could upload an image from your computer. 00:02:01.600 --> 00:02:03.966 That's what I'd like to do. 00:02:03.966 --> 00:02:09.432 So, clicking on upload, I can now drag images or browse my computer to find them. 00:02:09.433 --> 00:02:14.433 So, I have a folder of tutorial content and I'm going to select my background image. 00:02:14.433 --> 00:02:21.266 You'll see that it uploads and I can double click to add it in. So, now you can see we've got some issues with our 00:02:21.266 --> 00:02:25.499 fonts here. The colours aren't really great for the background that I selected. 00:02:25.500 --> 00:02:33.833 You can customize any of these settings by clicking on the area that you want to change. I'm going to select all the text and up here in the 00:02:33.833 --> 00:02:39.433 toolbar, I can choose colour, font, font size and some of the other formatting options. 00:02:39.433 --> 00:02:42.566 So, we're going to change our text to white 00:02:42.566 --> 00:02:44.666 and we're going to go with 00:02:44.666 --> 00:02:52.332 Lato as our font. We'll do the same thing here for subtitle and select our font. Next, I'd like to start customizing 00:02:52.333 --> 00:03:00.033 some of the items on my timeline. So, again these are all going to need formatting in terms of colour and fonts that I've used 00:03:00.033 --> 00:03:05.166 You can do that by, again clicking on the item, and selecting options from the timeline above. 00:03:05.166 --> 00:03:09.066 You'll need to click on all the various items that you want change the colour of 00:03:09.066 --> 00:03:11.032 and you can see that some of these 00:03:11.033 --> 00:03:13.566 are in different pieces here. 00:03:13.566 --> 00:03:18.466 So, it might be a little time consuming to change these but it's a pretty simple process. 00:03:18.466 --> 00:03:21.799 Next, I'd like to add some text into the point here. 00:03:21.800 --> 00:03:25.566 So, I'm just copying from my other document 00:03:25.566 --> 00:03:28.266 and I'm going to select everything in this box 00:03:28.266 --> 00:03:34.199 and replace it with the text that I have. You can see that it's a little bit big for the box. 00:03:34.200 --> 00:03:39.466 Let's go with my Lato font. And we're going to change it to white again 00:03:39.466 --> 00:03:47.999 and now I can grab on the handles to make the text box a little bit bigger, if I would like. I also need to change the date here 00:03:48.000 --> 00:03:50.266 and the font for that date. 00:03:50.266 --> 00:03:56.166 You'll see that Genially offers a number of other options for inserting things like YouTube and Vimeo, you can add audio, 00:03:56.166 --> 00:04:04.799 it also has smartblocks which are these pre-created little elements that you can add on to any one of your interactives. It also has 00:04:04.800 --> 00:04:13.433 interactive buttons. There's markers, there're social networks symbols. There's also a resources tab which gives you access to things 00:04:13.433 --> 00:04:15.999 like icons.You 00:04:16.000 --> 00:04:18.500 have shapes,lines 00:04:18.500 --> 00:04:24.766 and arrows, etc. There's a full image panel which will show you things that are built into the Genially 00:04:24.766 --> 00:04:29.632 library which you can use.Pixabay which offers you access to 00:04:29.633 --> 00:04:32.133 copyright free images as well as 00:04:32.133 --> 00:04:40.133 Giphy. Finally, there's also a text tab which gives you some options for preformatted titles and 00:04:40.133 --> 00:04:45.633 different text blocks if you would like. These can always be customized once they're dropped onto your timeline. 00:04:45.633 --> 00:04:50.766 Adding Interactivity to your timeline 00:04:50.766 --> 00:04:55.399 Next, we're going to take a look at how to add interactivity to some of our elements. 00:04:55.400 --> 00:04:56.400 We have a little info 00:04:56.400 --> 00:04:57.400 button down here 00:04:57.400 --> 00:05:06.066 and this info button is where interactivity actually occurs. So the visitor can come to the timeline and click on info to get more information. 00:05:06.066 --> 00:05:12.766 To customize that, you'll click on the little pointer button here. You can see that it brings up a window that gives you some different options 00:05:12.766 --> 00:05:17.232 for interactivity. You can have a tooltip, so when somebody rolls over that item they would get a 00:05:17.233 --> 00:05:21.699 little bit of text or whenever you added in this field, a window will create a popup window. 00:05:21.700 --> 00:05:28.933 You've got options for customizing that as well. The go to page button is used when you have multiple pages in your info graphic. 00:05:28.933 --> 00:05:29.333 when you have multiple pages in your timeline I only have one page so we won't be using not here you can also choose to click on linked to linked to an 00:05:29.333 --> 00:05:31.566 I only have one page so we won't be using that here. You could also choose to click on link 00:05:31.566 --> 00:05:40.566 to link to an external page. In our case, we're going to go with window and we've got some more text to add in here. 00:05:40.566 --> 00:05:43.999 So, I'll copy my text 00:05:44.000 --> 00:05:49.433 and paste it in here. I'd also like to add an image to go with this that'll appear in the popup window. 00:05:49.433 --> 00:05:52.666 To do that, I'll click on the insert image button 00:05:52.666 --> 00:05:59.099 but as you could see you can also choose to insert a video and now we can browse the computer again for this image. I have 00:05:59.100 --> 00:06:05.633 one here of Dave and it'll drop that in. Instead of going with a medium size window and ago with the small window 00:06:05.633 --> 00:06:12.366 and we'll click save. Now, I'm going to customize the info button to say learn more 00:06:12.366 --> 00:06:18.232 and I'll change that again to white and Lato for my font. 00:06:18.233 --> 00:06:22.266 So now, let's preview this to see what that looks like. 00:06:22.266 --> 00:06:26.866 You can see my timeline animates in here and if I click on the learn more button 00:06:26.866 --> 00:06:32.532 I get a little popup window with the information that we just put in. Coming back to our editing panel. 00:06:32.533 --> 00:06:39.966 So you may have noticed when we previewed it, that many of our elements animated in. Clicking on any element and then clicking on 00:06:39.966 --> 00:06:48.366 the icon here bring up the animation panel and you can take a look at how things animate in. So here you'll see on our text we have an 00:06:48.366 --> 00:06:55.166 entrance animation which is indicated by this little purple dot and you can see that it has our text fade in. 00:06:55.166 --> 00:06:59.899 You can also hover over any of these other options to see what it would look like 00:06:59.900 --> 00:07:02.100 if you tried one of the other animations. 00:07:02.100 --> 00:07:08.600 We'll leave ours that the basic fade in. And that's what's involved in creating a timeline and adding some interactivity. 00:07:08.600 --> 00:07:10.300 Thanks for watching.