Okay so in this tutorial video we're gonna learn how to use
ActionScript and
Input text and dynamic text to have a user type in their name into or type their name into our game
And then return that name back to them in the instructions for the game
So before we actually start using the ActionScript and setting up our screens
I've already created the game here that I'm working with
So whatever your project is whether it's a game like this one or something totally different
You will have to adapt these techniques for what makes sense for your project so in this one
I have a bunch of layers that were already built, and they have some animation the beginning of my game has an animation
and
Some audio when this comet flies in and then we have a start button that's going to jump us to
The place where they're gonna input the name so that's the first hundred frames
And then as I move down on the hundred and seventy fifth frame is where we're gonna have
This drag and drop game where they can put the planets in the order that they appear from the Sun
So notice that that game is only on that one frame because it's not necessarily
Animation in terms of motion tweens here each button is just gonna
Go to a frame and stop
And then let users interact and mess with that frame until they're ready to move on to the next
So in between here we need to have one frame
that has an input area where we ask the user what their name is and then when they click the button to go to the
next frame
it's gonna return that name to them such as
Welcome Jessica or welcome Chad
So we need to create that first screen
So you can put it anywhere you want, you can even put it on the very next keyframe after
Your first kind of intro for this game or wherever you want to put it in your project
I like to give myself some bumper room in case I want to put something in between
So I'm just probably gonna go out here to the one hundred and twentieth frame
And I'm gonna create a blank key frame in my actions layer
So insert blank key frame because that's gonna allow me to have some
ActionScript that effects whatever's on that particular layer so back here this action script was affecting this
This screen right here where it's basically saying okay, stop at frame 100, and then for the start button when somebody clicks it
It's gonna go to a certain frame and stop
So this is that click to go to frame and stop so what I want them to do is when they click start
It's gonna jump them to frame 120
Now I can do either
120 here so I can give a frame a number or I can actually label the frame which is my preference
So I'll go ahead and create a new
screen input name
screen and
I'm gonna put a blank keyframe on the one hundred and twentieth frame again keep them in line
So right click insert blank keyframe and that means that this this screen is gonna appear on this particular frame
So clicking on this particular blank keyframe. I can go up to the label and call this input
name screen
Okay, and I don't need to have this appear on any other
Frame so I can highlight all these right-click and choose remove frames that label is still there
It's just only showing on that one frame, so it didn't have space to show us the entire name
But it is still there so going back to the frame 100 instead of having it
Go to frame 5 or actually I would normally change it to 120
I'm gonna put quote quote, and then put that exact same frame label, so
input name screen and the spaces matter the Capitals matter the spelling matters
Everything matters it has to be exactly the same, so just to double-check again
Yep, that's right
So now when somebody clicks that start button it's gonna jump them over to this input name screen
Now on this particular screen we need to add some information, so I'll go ahead and grab my text tool
And I will make it white and I'll say
What is your name?
Okay, so I probably need to stretch that out
And I need to make this static text because this is not text that they're gonna input anything or it's returning anything
It's just asking them. What is your name, and then I already have a button created in here that says
Instructions, so I'm gonna pop that down
all right, so
this instructions button is gonna need an
Instance name so instructions underscore BTN and now we need to create our input text
Where are they gonna click and actually type in their name in order to do this you click on the text box
Come up to the text tool and choose input text
And then when you click and drag out an area in which they can type
Unless you have this box press the show border around text
It won't actually show a border so just be aware of that and especially for with input text you want that border to be there
So that people know that that's where they can click and type, and that's what we're used to seeing on the web
So that's all there is to creating that input text in terms of actually making it viewable
but we also have to make sure it has a unique instance name and
Also that we set up the font the way it needs to be so right now
This box is white and our font is franklin gothic book, and it's white so when people start typing in here
It's actually gonna type 96 point font and white and they're not gonna be able to see it
So I'm gonna go ahead and change. I'll just leave it franklin gothic book
maybe change that to
75 and I don't know what that's gonna look like because I don't see any of the text here right now, but I can test
it out later and
I'll go ahead and pick that kind of golden yellow hmm. I don't know that that might be
I'll just pick red. Okay, so you can pick whatever you want
I would try to pick an easy to read font
And then just know that it's gonna give you a lot of errors if you don't embed your font
So I have a tutorial video on YouTube on how to embed fonts, but just so you can see it
this is franklin gothic book regular if I use franklin gothic book italic and
Regular i'd have to embed both the regular and the italic versions of the font
So you click embed type the name of the font say
What characters you used, and I usually just click all but if you know you're only using the upper click case or the lower case
Or you're gonna use both of them, but you're for sure not going to use numerals
Then you can kind of make it a smaller file size in that regard
I just click all because you never know when you're gonna put a number or character in there
so you have to click on that and
Then again don't give this a generic name because then you might embed like several different fonts
And then you'll not know which one is which
So this is Franklin Gothic book regular the next time if I had used Franklin Gothic book italic
I would make sure to change this key word to italic so when you embed it
And I've already done it for this particular project
You should see it over here, so this is Franklin Gothic book regular if this is Franklin Gothic book regular
This is Comic Sans don't use Comic Sans
But just as an example and then the Bladerunner font that I have here
I need to embed all of those in order for this to actually work
Okay, so um after you've embedded the font checked on the font style made sure its input text made sure
It looked like a box the last thing you need to do is give this an instance name
So we're gonna call this instance name user name, so this is where we're gonna have the user input their name
Okay, so before we actually start working with the ActionScript
We're gonna create our next screen as well, so I'm gonna go about one hundred and fortieth reign
Right click insert blank keyframe because again, I'm gonna have a new script
that's on that particular frame, and I'm gonna click and add another new layer and
On that particular same frame. I'm gonna insert a blank keyframe so that the artwork only starts happening on the hundred and fortieth frame
Highlight all the way back
Right click and remove frames so that way each of these screens is only appearing on this one particular frame
So on this one. This is going to be the dynamic
text
instructions and
This is where you're gonna add the instructions so in this particular one they input their name
When they click here it goes to the instructions screen
and we want it to be able to say welcome Jessica or welcome Chad or welcome astronaut Monica and
We're gonna have that returned here with all the instructions, and then a button to go play the game
So just get this all straightened out. Here's my play button
Pop that in there it looks very consistent
Alright, so I'll grab the text tool
Come back over here make sure it says dynamic text and again same thing you're gonna want to change the color
This is not something that they're gonna click in and type, so I don't actually want a box for this
I just want to click and drag a big enough area that shows
where that text is gonna be so it's a little bit weird because it looks like it's not there when you click off and
It will show up later. It's just gonna be text
That's brought in through code, so we can't really see what it looks like right now
so if I were to change my stage color though
- maybe this dark or this light gray see how the dynamic text has this dashed line
That's how you can tell the difference between static and dynamic
Because most of the time you're going to use static if it's just information that they need to read
But if it's ever gonna return something like through code, then it needs to be that dynamic text
And you can see it visually with that dash line, so I'll go ahead and change my stage color back to black
alright
so
This one is gonna return back the instructions, and we are not going to type it in here
We're gonna type it in code. We need to also make sure we have the right settings here
We have to embed any font that we use so I'm going to stick with
Franklin gothic book regular because I know I've already embedded that font
I'm going to make sure that this button is unchecked because we don't need to show that border around text and
Then make sure you can uncheck that selectable because people don't need to select that text and copy and paste it for any reason
So the last thing with this is with it selected
We just need to make sure to give this an instance name, so I'm gonna do instructions
User, and I'm using camel lettering so the first word has no capital
But every other subsequent word after that does start with a capital letter
And that's going to matter again when I do code so in the next video
This is just part one work where we're kind of setting up our game and and creating the dynamic and input boxes
We're gonna actually add that code
One thing I did notice. Let's go ahead and add a frame label here, so instead of having this instructions button jump to frame
140 I want it to jump to the instructions green screen
Okay so again the benefit of using a frame label is just that if I were to move this frame down a little bit for
some reason and
Originally if I had the button going to frame
140 if I ever move this to a different frame number then that script is gonna break
And it's gonna be wrong and it's not gonna work
but if I move this frame at any point in time
And it has a frame label that label will move with that frame wherever it goes
So you don't ever have to fix the script if you move things around so it's a lot more efficient in that regard
okay, so in part two you can watch and we will start adding the script to make this function and then test it out and
See how it works