The best method to create typewriter effect? - actionscript-3

Hey everyone so I am creating a game that focuses on character to character interactivity. So when you interact with a character a chat box opens and the characters start talking to one another. I have the text setup like an old school typewriter effect one letter at a time. As of now I create it by typing each letter on separate frames and have them play through. When it gets to then end of the sentence in order for the user to go on to the next sentence I have a button that they tap Here is the code:
private function nextConvo(e:MouseEvent):void
{
nNext += 1;
trace(nNext);
if (nNext == 1)
{
conversation.gotoAndPlay(1);
}else
if (nNext == 2)
{
conversation.gotoAndPlay(117);
}
}
As you can see i set it up to play the next frame with the new conversation so on and so on. I have a lot more text to do I realized it will be really time consuming and wonder if there is a easier way.
A method to where it types the string in the text box and I can still use my button so when the user wants to see the next conversation they can press the next button.
I saw a video here of someone showing the code way of doing it but Not sure how I would implement the button without having to add a lot of new mouse listeners and timers. Code Method
Please any help would be appreciated.

Omg, yes, you will go nuts if you show one character per frame :)
The idea is to have a function to handle this for you that you have ONCE somewhere (for example, on your main timeline). Then you can call it from everywhere and just pass the text, textfield to type into and a button.
private var _myText:String;
private var _myTextField:TextField;
private var _myButton:Button;
private var _currentCharacterPosition:int;
public function typeText(text:String, myTextField:TextField myButton:Button):void
{
_myText = text;
_myTextField = myTextField;
_myButton = myButton;
_myButton.visible = false;
_currentCharacterPosition = 1;
typeNextCharacter();
}
private function typeNextCharacter():void
{
_myTextField.text = _myText.substr(0, _currentCharacterPosition);
if (_currentCharacterPosition == _myText.length)
{
// all text is typed out, show your button
myButton.visible = true;
}
else
{
// type next character. 0.2 is the delay between letters (200 ms)
_currentCharacterPosition++;
setTimeout(typeNextCharacter, 0.2);
}
}
Assuming you have the textfield and button in the same place (same frame), you could then do this in that frame:
_root.typeText("This is my text to type out", myTextField, myButton);

Related

How could I animate an instant message conversation in Flash Professional using AS3?

I'm creating a large "movie" using flash professional CC and AS3. In one scene I want my character to be IMing his friend. The scene is already animated and shows the back of his head and the viewer can read his screen.
I want the user to be able to type for my character, so whatever the user types shows up in the bottom of the chat box, and then when the user presses enter the same text appears in a different place on the screen.
Unfortunately I haven't even gotten CLOSE to making that happen. So far I'm stuck on getting the text from the input box to appear in a dynamic textbox elsewhere, so I've been watching tons of tutorials. This code runs without errors but does not output the text like I want.
var outputString = outputBox.text; //get key presses only when textfield is edited
inputBox.addEventListener(KeyboardEvent.KEY_DOWN, handler);
function handler(event:KeyboardEvent) { //13 is enter key
function handler(event:KeyboardEvent) { //13 is enter key
if(event.charCode == 13) {
outputBox.text = "UserName: " + outputString;
}
}
(Please ignore the bad indentation, that's more of an issue with me not understanding how to paste code here haha.)
Anyways does anyone know what's wrong? I have been trying to figure this out for days so if anyone could share some example code for how to get what I described working properly it would be immensely appreciated. All I really need to be able to do is save the user input so I can display it whererever I want. Thanks for reading!
Simple enough. Just set the text value of your output to your input after the keypresses.
import flash.text.TextField;
import flash.events.KeyboardEvent;
var input:TextField = new TextField();
addChild(input);
input.type = "input";
input.text = "Type Here!";
input.addEventListener(KeyboardEvent.KEY_UP, handler);
var output:TextField = new TextField();
addChild(output);
output.text = "other text";
output.alpha = 0.5;
output.y = 25;
function handler(e:KeyboardEvent):void {
output.text = input.text;
}

AS3 - how to best use variables to effect functionality on different frames

I'm currently building a 50 button interactive display, it needs on a specific frame to log 3 button clicks then save a variable or something that 2 slides later will relay whether the user has chosen the correct 3 buttons. This warning is a simple movie clip. Below I listed the 2 frames that need to relate to each other. Please keep in mind I am fairly new to programming Flash and still struggle correct syntax and utilization.
I appreciate any or all input on how I can better accomplish this using Actionscript 3
The below is hiding 3 boxes that will surround the correct answer once clicked. The fl_check36 needs to somehow in the else section send a variable or something i can reference that would let me show the error box movie clip to the user. (I already have a reset button working for that page)
[Frame 36]
MDI_07_box_mc.visible = false;
MDI_08_box_mc.visible = false;
MDI_14_box_mc.visible = false;
// Boxes to be clicked
MDI_07_btn.addEventListener(MouseEvent.CLICK, fl_ClickToShow_14a);
function fl_ClickToShow_14a(event:MouseEvent):void
{
MDI_07_box_mc.visible = true;
}
MDI_08_btn.addEventListener(MouseEvent.CLICK, fl_ClickToShow_14b);
function fl_ClickToShow_14b(event:MouseEvent):void
{
MDI_08_box_mc.visible = true;
}
MDI_14_btn.addEventListener(MouseEvent.CLICK, fl_ClickToShow_14c);
function fl_ClickToShow_14c(event:MouseEvent):void
{
MDI_14_box_mc.visible = true;
}
// Check for boxes correct and go to next frame
MDI_18_btn.addEventListener(MouseEvent.CLICK, fl_check36);
function fl_check36(event:MouseEvent):void
{
if (MDI_14_box_mc.visible && MDI_08_box_mc.visible && MDI_07_box_mc.visible)
gotoAndStop(37);
else
Feedback_07_Wrong_mc.visible = false;
}
This frame just needs to check if the user got the information correct on frame 36 and show or hide the Feedback based on that.
[Frame 38]
stop();
addEventListener(Event.ENTER_FRAME, fl_EnterFrameHandler_2);
function fl_EnterFrameHandler_2(event:Event):void
{
if (globalVar = 1)
Feedback_07_Wrong_mc.visible = true;
Feedback_07_Wrong_mc.gotoAndPlay(2);
}
Reset_Btn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndPlayFromFrame_2);
function fl_ClickToGoToAndPlayFromFrame_2(event:MouseEvent):void
{
gotoAndPlay(1);
}
Thanks in advance!
What #Karma said is true. When you declare any variable on frame 36, it is accessible to any other frames that preceed it. You can also do the same by creating another layer called "Variables" with no keyframes in between which stores all your variables. This way, you would have confidence that the variable is acceccible to all the keyframes of the other layer.

Can i create a function to tell a button to open a movie clip of the same name

I am new to the actionscript side of flash,
I am working on a map that has say 20 popups(movieclips) and the countries are the buttons, i have just been informed i need to add 60 more.
Below is an example of the code i have been using
english_movie.visible=french_movie.visible=turkish_movie.visible=false
english_btn.addEventListener(MouseEvent.CLICK, englishButtonClick);
french_btn.addEventListener(MouseEvent.CLICK, frenchButtonClick);
turkish_btn.addEventListener(MouseEvent.CLICK, turkishButtonClick)
function englishButtonClick(event:MouseEvent):void {
english_movie.visible=true;
english_movie.play();
french_movie.visible=turkish_movie.visible=false
}
function frenchButtonClick(event:MouseEvent):void {
french_movie.visible=true;
french_movie.play();
english_movie.visible=turkish_movie.visible=false
}
function turkishButtonClick(event:MouseEvent):void {
turkish_movie.visible=true;
turkish_movie.play();
english_movie.visible=french_movie.visible=false
}
Im thinking there must be an easier way to do this than replicating the code over and over.
Any help would be much appreciated.
Here's how to simplify the whole thing with code: Each btn object is
related to one movie object. This can be achieved with a Dictionary.
var btnToMovieAssociation:Dictionary = new Dictionary();
btnToMovieAssociation[english_btn] = english_movie; // repeat this line for every btn/movie pair
Now you have to generalise your click handler. The key difference
between each function (apart from making one certain movie visible)
is that they all make certain other movies invisible. But actually,
it's sufficient to only make the previously visible movie invisble.
To do this, create a variable that keeps track of the current visible
movie.
var currentMovie:MovieClip = english_movie;
Initialising the variable with english_movie has no effect on the
program. you can pick any other of the movies. It will make things
easier in the following code if this variable is initialised.
Now your function does effectively this:
make movie of clicked button visible
play this movie
make last movie invisible
Here's the cool part. You only add one listener. Look up if something
is in the dictionary for the clicked thing and consider that the
movie you want to show next.
addEventListener(MouseEvent.CLICK, buttonClick);
function buttonClick(event:MouseEvent):void
{
var movie:MovieClip = btnToMovieAssociation[event.target]
if (movie == null)
return; // nothing in the dictionary, it wasn't a button that was clicked.
movie.visible=true;
movie.play();
currentMovie.visible = false;
currentMovie = movie;
}
There are problems with this solution:
You still have to declare every pair, which is still tedious and prone to erro. (you have to type every name twice)
If your buttons are made up of several objects, event.target might point to them instead of the button as a whole. But with only
the btns in the dictionary and not all their individual parts,
nothing would be found in the dictionary. This can be circumvented by
setting mouseChildren = false; on every btn.
i posted this question else where and got this response
var tl:MovieClip=this;
var mc:MovieClip;
var i:int;
var buttonA:Array=[english_btn,french_btn,turkish_btn];
for(i=0;i<buttonA.length;i++){
buttonA[i].addEventListener(MouseEvent.CLICK,buttonF);
tl[buttonA[i].name.split("_")[0]+"_movie"].visible = false;
}
function buttonF(e:MouseEvent):void{
for(i=0;i<buttonA.length;i++){
tl[buttonA[i].name.split("_")[0]+"_movie"].visible = false;
}
tl[e.currentTarget.name.split("_")[0]+"_movie"].visible=true;
}
Which works great.

Blinking Caret Not Showing up in Input Text Field

I want one of my input text boxes to be the stage focus as well as have the blinking caret without the user needing to click inside the text field. I've been searching around frantically for an answer to this question, and everyone's answer boils down to this code: (the instance name of the text field being "input")
stage.focus = input;
input.setSelection(0, input.text.length);
But for some reason this code isn't working for me. Anyone have any idea why?
Update
For some reason this works:
stage.addEventListener(MouseEvent.CLICK,update);
function update(e:MouseEvent){
stage.focus = input;
}
And this does as well but the caret doesn't blink:
var counter:int=0;
stage.addEventListener(Event.ENTER_FRAME,update);
function update(e:Event){
counter++;
if(counter>30){
stage.focus = input;
}
}
This still doesn't satisfy my question though, why do you need a mouse click of some type in order to make my desired action work properly?
1.. How about if you set focus to happen inside a mouseClick function?
2.. Try this
stage.focus = input;
input.text = " "; //with a space (for blank but not empty);
input.setSelection(0, input.text.length);
3.. Bail out scenario then this utility might help or at least you'll learn something from its code Link here

Simple click event

I don't know why I can't figure out this problem that is really basics !! (sometimes the brain is tired I guess).
I've got a movieclip with a guitar string.
I want the string to move everytime I click on it.
I've created a movie clip with 2 lables. the first = non movement, the second = movement.
I've placed in the second one a stop(); action. (in order to stop the loop)
I've put this code :
stringOne.addEventListener(MouseEvent.CLICK, accord1, false, 0, true);
public function accord1(e:MouseEvent):void{
var stringOne;
trace("DING");
stringOne.gotoAndStop("first");
}
It works but, of course, it only play the string movement at the first click.
Do you know how I could play the string movement EVERYTIME that I click on the string ?
Thank you very much and sorry for this easy question (little ashamed)..,
EDIT
Ah ! It seems to work with goToAndPlay !
if (stringOne.currentLabel=="premier") {
stringOne.gotoAndStop("default");
} else {
stringOne.gotoAndStop("first");
}
Just a thing, I have to click twice..
(one click = the string vibrate (label2))
(one click again = the string does nothing (going to label 1))
(one click again = the string vibrate (label 2))
Is there anyway to automatically skip the 2nd click (the one that tells the string to go back at label 1), and let do the code like : - When animation of label 2 is finished, automatically go back to label 1 ? –
Presumably, the "movement" label of the string is some sort of animation?
It seems to me what you want in your "guitar string" movieClip is, on the last frame of the timeline animation for "movement", a script that says gotoAndStop('non movement'). The click handler should gotoAndPlay('movement').
Then, when the string 'movement' animation is finished, it will reset itself, so that the next time you click it will play again.
So, your original code is fine (before the edit; but remove the "var stringOne;" since that will break the reference to stringOne). The only thing you need to add is a script in the timeline on the last frame of the movement animation ("first" label?) that says gotoAndPlay("default") (assuming default is the 'non movement' label). You may need a stop() in the timeline frame for "default".
Something like that :
stage.addEventListener( MouseEvent.CLICK, onStageClick);
protected function onStageClick(event:MouseEvent):void
{
switch( event.target )
{
case stringOne:
trace("String one stuff");
break;
case stringTwo:
trace("String 2 stuff");
break;
}
}
Or add your movieClip into a Sprite and listen click event on the Sprite and not on the MovieClips.
Thank you for the answer. I've found an other way, instead of mouse click I've used mouse down for going to frame 2 and mouse up for going to frame 1