The strategy is basically to make an invisible text box that holds on to text when you type and passes it to the text box on your canvas.
In terms of making the text box invisible, you can't use display: none, as textboxes can't get the focus if they are not displayed, or hidden.
If you use opacity:0, then you won't be able to see the textbox, but it will still take up space, and someone could click on it by accident, possibly leading to upredictable results.
So I'm opting to use opacity, set its width to 0, and setting it to be off of the screen as well!
1)
Here is the html for the textbox:
<input type='text' id='testInput' oninput="sendInput();" style="position:absolute; z-index:-1; opacity:0; width:0; top:-30px">
If this is the very first element in the body tag, then it should be above the visible window, ie offstage. If you have other elements around your canvas you may need to fiddle with this, but I doubt it as the textbox doesn't need to be in any particular div to work.
2)
In the script tag in the head, you need to create variables for your input textbox, and whatever the receiving textbox might be, something like:
<script> var txtTarget, txtInput;
And in the init function called by the loading body tag:
<body onLoad="init()">
You need to assign the input textbox to the txtInput variable:
function init() {
txtInput = document.getElementById('testInput');
}
3)
As for the sendInput function, that goes in the script section:
function sendInput() {
txtTarget.text = txtInput.value;
}
This sends the content of the input text box to the text box in the canvas element.
4)
In the animate CC flash file, you need to create a dynamic text box (call it textReceiver), and a button behind it (called txtbtn), you could save time by making it look like an input textbox.
The code for this is:
this.tstbtn.on('click', focusText.bind(this));
function focusText(e) {
//txtInput.value = this.testReceive.text = '';
txtInput.focus();
txtTarget = this.testReceive;
}
This function means that when someone clicks on the button, it is as though they have clicked on the input textbox. It also sets the html page to recognise the canvas's text box as the text receiver.
In theory, you could create multiple textboxes (though not on the same frame in animate CC), and put a button behind each one, so that when it is clicked, it registers its textbox as txtTarget. In that case, you need to use the line that is commented out, so that the text from one textbox doesn't get copied over to another.
The downsides to this method, which occurred to me as I was writing the post, are that the user doesn't get a cursor, they can't highlight the text, and they can't easily edit the content, since they can't click part way through the text.
So I may go back to the drawing board on this, to get the full input text box functionality.
Any progress on this one?
ReplyDeleteThe Text input component gives me headaches, as I can't change the font size.
Any suggestions, please?
http://aflashdiary.blogspot.co.uk/2016/12/input-text-box-in-animate-cc-version-2.html
DeleteI made this post a long time ago, so I hope it is still correct, but you basically use javascript to create a real input text box, but you can call the function like you would any actionscript function, so its familiar.
Best wishes,
Input text is supported in Animate, the trick is to use the Text Input Component, not an input text field. Open the 'Components' panel by clicking on 'Window' > 'Components' in Animate and dragging the TextInput onto the stage. At first there seem to be limited options for setting the properties for text size and colour, etc., however they are available. Some people use CSS for this purpose. Here is the important part:
ReplyDeleteIf your text input component is named 'nametext' as the Animate instance name, retrieve the value with this.nametext._element._options.value
To see a list of available properties, use console.log(this.nametext); In a browser such as Internet Explorer 11, open the developer tools by pressing F12 and check the console for the log. Click on the + to see properties.
Thanks!
DeleteThis video got me further:
Deletehttps://www.youtube.com/watch?v=CxTo1RUdJYM