• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to best create input text for Html5 canvas projects

Participant ,
Jul 25, 2023 Jul 25, 2023

Copy link to clipboard

Copied

Hi team,

So I am trying to create some input text so that a user can enter their name and be referred to by their name.

I have created a class to handle this called texter        (texter.js)

So far I have the class working and talking to a dynamic text box on the stage (instance name texto) making it say "Hello World"

Here is the class code 

class Texter {
  constructor(root) {
    this.root = root;
    this.stage = this.root.stage;
    this.init();
  }

  init() {
    this.root.texto.text = "hello world";
  }
}

Now the issue is that as soon as I add a Textinput component to the stage (not even trying to give it an instance name or code or it or anything) it throws an error in the index.html        Uncaught ReferenceError: $ is not definederror.png

Any  ideas or other ways to make this work I would greatly appreciate working through it step by step

Thanks and have a great day

Views

556

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 25, 2023 Jul 25, 2023

Copy link to clipboard

Copied

Hi.

 

If a component is added to the stage in the author time, Animate adds jQuery automatically for the run time.

 

But if you add a component at the run time, you have to add jQuery manually or leave a component instance hidden somewhere on the stage.

 

Anyway, can you give us more details of how you are dealing with the component that you need?

Regards,

JC

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 25, 2023 Jul 25, 2023

Copy link to clipboard

Copied

how are texter.js and Texter related/added to your animate project?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 25, 2023 Jul 25, 2023

Copy link to clipboard

Copied

Hi team,

Again I am trying to implement object orientated coding and use classes to do jobs for my project.  texter.js is a separate class to handle the text input for the project.  Last time I was using the separate classes for a Choose your own adventure game.  So the component is sitting on the stage - but as I said I havent had the chance to add an instance name or anything for it, just having it on the stage causes an error.  I have tried to add the JQuery script to the index.html but I cant get it to work.  (so it isnt included in the example here)

Here is the folder structure so far  https://github.com/subtlefly/text

Download the .zip file, extract the folder and its set up to run if you click the index.html file (but because of the Textinput component on the stage it doesnt work.

If you remove the Textinput component from the stage in the main project it runs fine (from the index.html file) and the external class texter can communicate with the dynamic text box on the stage.  The problem arises when I try to create a user input text field.  

Thanks for having a look and let me know what you think

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 25, 2023 Jul 25, 2023

Copy link to clipboard

Copied

i don't see any relationship between your js file and your fla file.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 25, 2023 Jul 25, 2023

Copy link to clipboard

Copied

Well they are connected because the .js file can effect the dynamic text box - in the index.html the scripts are called to instantiate the class- line 16n to 19 brings in the class files and the createJS also later in this code there is a ticker that creates a new variable Game and Texter...  I guess it all gets a bit beyond my understanding at this point - but it works. 

 

KGlad as to why do it this way we have had this conversation before - here is the answer from the person who provided this workflow

So I said I would ask Old Mate about the logic behind this set up and here is the answer-

"In general I prefer to put the minimum of code in the fla. This avoids the need to publish for every code tweak. In a professional setting the graphic artist is not the coder and so dividing the task between asset creation and coding is preferable."

https://community.adobe.com/t5/animate-discussions/i-would-like-to-thank-the-animate-community/m-p/1...

 

<!DOCTYPE html>
<!--
	NOTES:
	1. All tokens are represented by '$' sign in the template.
	2. You can write your code only wherever mentioned.
	3. All occurrences of existing tokens will be replaced by their appropriate values.
	4. Blank lines will be removed automatically.
	5. Remove unnecessary comments before creating your template.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>ExtclassTest</title>
<!-- write your code here -->
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="game.js"></script>
<script src="texter.js"></script>
<script src="ItextExtclass.js"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation, game, texter;
function init() {
	canvas = document.getElementById("canvas");
	anim_container = document.getElementById("animation_container");
	dom_overlay_container = document.getElementById("dom_overlay_container");
	var comp=AdobeAn.getComposition("57A8D37F7052014BA11DA5BFE6B79416");
	var lib=comp.getLibrary();
	handleComplete({},comp);
	

}
function handleComplete(evt,comp) {
	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
	var lib=comp.getLibrary();
	var ss=comp.getSpriteSheet();
	exportRoot = new lib.ItextExtclass();
	stage = new lib.Stage(canvas);
	stage.enableMouseOver();	
	//Registers the "tick" event listener.
	fnStartAnimation = function() {
		stage.addChild(exportRoot);
		createjs.Ticker.framerate = lib.properties.fps;
		createjs.Ticker.addEventListener("tick", stage);
	}	
 stage.addEventListener("tick", handleTick);
 function handleTick(event){
    if (game === undefined) game = new Game(exportRoot, stage);
    if (texter === undefined) texter = new Texter(exportRoot, stage);
}   
	//Code to support hidpi screens and responsive scaling.
	AdobeAn.makeResponsive(false,'both',false,1,[canvas,anim_container,dom_overlay_container]);	
	AdobeAn.compositionLoaded(lib.properties.id);
	fnStartAnimation();
}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
	<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1024px; height:768px">
		<canvas id="canvas" width="1024" height="768" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
		<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1024px; height:768px; position: absolute; left: 0px; top: 0px; display: block;">
		</div>
	</div>
</body>
</html>

 

 

  

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 25, 2023 Jul 25, 2023

Copy link to clipboard

Copied

Ok so I found a way to do it, but I dont know if its good or not?

If I put this code into the texter.js class I can get a pop up window to allow the user to add text- is this an acceptable way to do it?

 

 

 

class Texter {
  constructor(root) {
    this.root = root;
    this.stage = this.root.stage;
    this.init();
  }

  init() {
    // Prompt the user for input using the window.prompt() method
    const userInput = window.prompt("Enter your text:", "hello world");

    // Check if the user clicked "OK" and provided some input
    if (userInput !== null && userInput.trim() !== "") {
      // Set the dynamic text to the user's input
      this.root.texto.text = userInput;
    } else {
      // If the user clicked "Cancel" or provided no input, set the default text
      this.root.texto.text = "hello world";
    }
  }
}

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 25, 2023 Jul 25, 2023

Copy link to clipboard

Copied

you should be using the include tab in the script panel.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 25, 2023 Jul 25, 2023

Copy link to clipboard

Copied

Well like I said we have had this conversation before - old mate says this is a better way to do it- so you can make alterations and amend code or even add new classes without ever having to access the adobe animate file

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

then you should probably ask your friend.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

Sorry Kglad,  I do not have access to this person to ask off topic questions.  The knowledge point here is an industry player who I have purchased training from, but now I am trying to apply this workflow to off topic situations...  so I cant ask for help in this situation.  

The point I am trying to make is that the two classes I have attached to the document work (proved by the game.js being able to make things start and stop on the stage and the texter.js being able to access and modify a dynamic text box on the stage)  The problem arises because animate Html5 canvas does not have the option to create an input text box, which is why a task that I thought was going to be simple- turns out to be more complex)

Please dont give up on my question, I am still looking for the best way to allow input text on an animate Html5 canvas that is being controlled from a separate class file.

Thank you

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

To better understand your issue: do you need to create an input component instance at run time using an external class and without including the required script files in the Animate IDE?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

Yes as much as possible the idea to is to keep the code out of animate so that the coding can be edited with a code editor separate to the animate workspace.  I am working in an environment where previously only Html coding was taught- it is pretty dry and for someone like me who is more visual, I like the way animate can be used to visually place elements on the stage and choose colours etc, without them all having to be picked through code.  So I am trying to bridge between the two by using external classes to hold the code, but building the visual assets and ui using animate.  I am so sorry and not trying to be difficult - just trying to understand and make it work!

(plus I think I am definitely getting somewhere, I am feeling positive about having two separate classes that are being utilised by this document- it is starting to make sense to me e.g. If I get this texter.js class to work handling input text and passing the variable, then I can reuse this class for every document after this that requires input text)

Thanks for your time and patience

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

do you and/or your friend understand what the include tab allows you to do?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

Yeh I get it, you can include the class file scripts from inside animate- but this is a different way to include the class files- I can add class files to work on a document without ever having access to the animate software and make changes to behaviour just from a code editor.  That is the point here- I do not want to tie eveything that is being done to access to animate (after all it is a paid program and students may not have access to it > in fact they dont have access to it when not at school) With this workflow technically as long as they have a break down of what assets are in the project and what the instance names are, they can code changes without having to open animate up.  Like I said it works, but I am just having some trouble with the implementation because I am a hack and no kind of expert:)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

So I found another way to do it

you can add this to the index.html

<!-- Add this div to contain the input element -->
<div id="inputContainer" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none;">
  <input type="text" id="userInput" style="width: 200px;">
  <button id="submitButton">Submit</button>
</div>

and then modify the texter.js  to do this

// texter.js
class Texter {
  constructor(root) {
    this.root = root;
    this.stage = this.root.stage;
    this.init();
  }

  init() {
    const userInputContainer = document.getElementById("inputContainer");
    const userInputField = document.getElementById("userInput");
    const submitButton = document.getElementById("submitButton");

    // Show the input container to allow user input
    userInputContainer.style.display = "block";
    userInputField.focus();

    // Listen for the "Submit" button click
    submitButton.addEventListener("click", () => {
      const userInput = userInputField.value;

      // Check if the user provided some input
      if (userInput.trim() !== "") {
        // Set the dynamic text to the personalized greeting
        this.root.texto.text = `Hi ${userInput}, how are you?`;
      } else {
        // If the user provided no input, set the default text
        this.root.texto.text = "Hello, how are you?";
      }

      // Hide the input container after processing user input
      userInputContainer.style.display = "none";
    });
  }
}

So now you get a window on the stage with a submit button and not a pop up.. is this getting closer to something you approve of?

Let me know if its looking better

Thanks for your time and patience and have a great day

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

LATEST

Kglad says - Bro do you even operate?   🙂   sorry I thought it was funny

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines