Continue building out our prototype with coding and inserting our first screen where our story offers a choice. Delve deeper into code by adding our layers and assets leveraging the code previously written or knowledge from previous videos.
- [Instructor] In this video, we'll continue adding the remaining visual assets for a project. We'll use the Insert Tool in some cases and in other's we'll use code, basically applying everything we've learned thus far. So let's get to it. If you don't have the project open, just go ahead and open it. As we add more screens it's going to get a little bit confusing as to what screen is what. So we'll start adding more meaning to it. Let's go ahead and on the First Screen add intro on the Second Screen let's go ahead and add Gojin intro.
You can basically add anything you want as long as it makes sense to you and you're able to manage through the files, that's the idea. Let's give it a name Vreeg attacks and the fourth one is going to be Vreeg comes out of the ocean. There you go. It looks a little bit better that way. Let's go ahead and add our fifth screen. What's going to happen on this one we're going to give a choice to see one layer or the other.
First choice. Let's go ahead and add a background layer and we do this by taking the Insert Tool, grab the first image because this is going to be the background for the question and I want to use this background for this particular one. Let's call it background screen 5, and for this one we'll do a width of 646 and a height of 515. Then for the position, we'll do minus 210 for x and minus 105 for y.
There you go. So you have the little moon on the middle and then you have the ocean in there. Next thing we need to do is add the question. So we'll add a new layer, like so, and we'll call it first question just to make sure it goes. We'll have more questions down the road. For this one, we'll actually add some text to it. If you remember how we're doing this, it's through the html property and then just type "Which warrior will you use "to attack the Vreeg", like so.
Then let's type the properties for this one. We'll do a 340 for the height and then for the width we'll do 272, like so. You should have something similar to this at this point. Guess what, we need to add some styles to it, so we'll do the same as we did yesterday. We'll do style and then equals, we'll do a "padding" and for this one, we'll do a 100 pixel for now, it's going to change.
100 pixel by 10 by 10 by 15. If you remember yesterday, the padding goes from top right bottom left and this is what gives the padding around the particular text that we have and last but not least, as you probably guessed it, we'll do an align, like so. Okay, so now that we have a question let's give the choices so we'll add two layers and we'll do one and then I'll let you copy and paste the second one and position it properly.
If you have any problems with doing that, you can refer to the exercise files, you have access to them, so take advantage of em. Let's go ahead and do one and we'll call this one hunora, which is the first character and let's call it select hunora, like this and then let's use the Properties tool to do this one. Basically what we want is a width of 124 by height of 114. Then we want it position at 10 for the x-axis and then at 205 for the y-axis, like so.
Then for the Border radius, because we're going to add one, is going to be 17 on this one. Again these are personal preferences, you can pretty much do whatever you want. Whatever looks good for you. The border width, we'll add it here. Let's have some fun, go back and forth between those and then the border color and that's the beauty of Framer's so you can go in and do a little bit of code and then go back and do properties directly in the Properties panel.
You can pretty much do whatever you want. Later on I'm going to show you even how to manipulate the html and css of the Framer file, which is pretty cool. So border color. Next we'll add some html to it, so we're selecting hunora, like so. Then finally we'll add a background color and you see if you're a quick typer, this could be pretty much the way you do it.
If you like to click stuff, then you can pretty much do the whole thing directly into the Properties channel. We'll add some styles to hunora as well. Pretty much what I want from the styles is very similar to this, so we'll copy this. Paste it here and change some of the values so the first one, select hunora and do 25 pixels by 10 by 10 by 15, so it's the same.
We need it center. Finally we need to have some font size for this one because I want it properly sized at 25 pixels. Basically now just copy and paste this one and position it on the right side of select hunora. Basically all you have to do is copy and paste this particular layer and the styles and basically change the name and then position it properly on the right side. In the next video we'll continue with adding more screens, see you in a bit.
- Importing designs from Sketch and Photoshop
- Inserting and styling screens
- Adding animation with auto-code
- Working with general syntax
- Programming with variables and objects
- Using functions and code snippets
- Creating assets
- Making interactions
- Animating screens
- Adding a scrolling component
Skill Level Intermediate
Q: This course was updated on 08/28/2017. What changed?
A: A new video was added that covers recent changes to the interface.