HTML5 canvas size

Similar Questions

• How can I add meta name = "ad.size" on HTML5 canvas

  Hi all

  How can I add < meta name = "ad.size" content ="width = 300, height = 250" > in HTML5 Canvas code?

  Thank you

  manually add it to the html file.

• Animated Navigation CC HTML5 Canvas issues

  I use Adobe animate CC HTML5 Canvas.

  I use some variables and STOP to navigate through the timeline, as if they were pages.

  Go forward through the timeline gives me no problem, however, when I got back in the timeline (from frame_1 to frame_0) when I ask many interactions on the previous page don't work (visibility and hover button) and then when I try to go forward again it does not stop on the frame more.

  An alert using, I found that he jumps in the course although I stops.

  Can someone help me please? I can send the files together if necessary.

  Here is my code for the navigation of the page:

  This.Stop ();

  SECTION INFO & NAVIGATION DRIVE

  VARIABLES FOR NAVIGATION

  var frameNumber = this.currentFrame;

  nextFrame var = frameNumber + 1;

  prevFrame var frameNumber = - 1;

  DISPLAYS CURRENT PAGE NUMBER

  var text = this.currentFrame.toString ();

  var thisText = "Page" + displayText;

  createText var is new createjs. Text (thisText, "" BOLD "44px Myriad Pro", "White");

  this.addChild (createText);

  TEXT OTHER THAN THE WEIGHT/SIZE/COLOR/FONT STYLE

  createText.x = 98;

  createText.y = 1375;

  CLEARS THE PREVIOUS PAGE NUMBER BEFORE MOVING FRAMES

  this.next.addEventListener ("click", removePageNumberNext.bind (this));

  function removePageNumberNext()

  {

  	this.removeChild (createText);
  	this.gotoAndPlay (nextFrame);

  }

  this.prev.addEventListener ("click", removePageNumberPrev.bind (this));

  function removePageNumberPrev()

  {

  	this.removeChild (createText);
  	this.gotoAndPlay (prevFrame);

  }

  Hold up... you have the above reproduced code in each single frame? This would explain why your buttons are behaving strangely. Handlers on objects do not replace each other - they are cumulative. If you have only one set of buttons in nav for the entire timeline, you only need to assign handlers once at the beginning.

  Similarly, you should not create a textfield to display page in the code. You just create a dynamic textfield in the editor, name ('pageNum' or whatever), then update its content through the .text property.
  

  Assuming that you are using the frame 1 (0) to initialize and start your content on frame 2 (1) and have a next button called 'next', a previous page named 'prev' button and a textfield of page number named 'pageNum', all that exists throughout the entire timeline, you can use this code to control your page :

  _root = this; // global handle to root timeline for event listeners
  this._maxPage = _root.timeline.duration - 1; // total pages
  
  // event handlers
  this.navPrev = function() {
      var cur = _root.timeline.position;
      if (cur > 0) {
          _root.navToPage(cur - 1);
      }
  }
  
  this.navNext = function() {
      var cur = _root.timeline.position;
      if (cur < _root._maxPage) {
          _root.navToPage(cur + 1);
      }
  }
  
  // do navigation
  this.navToPage = function(p) {
      // set visibility of nav buttons
      this.prev.visible = p > 1;
      this.next.visible = p < this._maxPage;
      // update page counter
      this.pageNum.text = "Page " + p;
      // navigate
      this.gotoAndStop(p);
  }
  
  // assign event listeners
  this.prev.addEventListener("click", this.navPrev);
  this.next.addEventListener("click", this.navNext);
  
  // get the party started
  this.navToPage(1);
  

• POST VIDEO ON HTML5 CANVAS

  Okay, so I'm new to HTML5, but I learned quite a bit so far. Here's what I'm trying to do I hope that someone can help me.

  I use Adobe animate HTML5 Canvas and I'm trying to put a video on the Web on the top image in a small window.

  I can get the video to play in the right size, but he plays outside of the canvas. I want him to play on the canvas, as shown here.

  

  Currently, he is doing this...

  

  Someone knows how to fix this problem...

  Help, please!

  Re: How can I add a video

• HTML5 Canvas - Motion or classic tweens?

  First time ever using Flash - except that now it's animate CC!  Recess.

  In my project, I'm targeting out HTML5 Canvas for some online advertising that I do.

  By most data autour, the motion tweens are superior to classic tweens (you also get the whole thing graphic with anchor points, acceleration, etc.).  However, when I add a motion tween, I get this message in my outings when I post:

  "The motion tweens are published in the form of animations frame by frame. Use Classic tweens where possible. »

  ... Does that mean exactly?  I get the concept of a frame by frame animation, but I don't see how that would produce an output of HTML5.  I checked the JS, and it seems pretty normal with respect to the EaselJS code that is created.

  I would like to know why I get this message and if I should worry about this!  Thank you.

  A simple classic Tween will export to be a single line of Javascript. The same way as a motion tween may export as a large number of positionnelles data, for each image. But, if you customized in a classic Tween acceleration, CreateJS has trouble with him, perhaps because he cannot easily be described in Javascript.

  Either use simple interpolation and simple relaxation, with a classic tween, or you knock out and make the movement you really want with a motion tween and don't worry too much about the additional file size.

• HTML5 canvas - export of the problem images.

  When I create Flash CC html5 canvas banner, after the publication (without the "convert pictures to spreadsheets" checked) Flash kind of renders new images for each image used. Is it possible that it moves just as the used original images in his case without making (to much larger sizes in KB)? Im not using 'export all bitmaps to the worksheets' because the result is ultra heavy. I thought that its only because logic software used for the creation of ad After unchecking this option Flash will take the prepared files and use them with their sizes and formats (or jpg, png8 gifs - according to what is best in the particular case).

  That's all just ridiculous prepare the images with the lowest possible sizes to meet the specifications and limits of size of the whole creation, and then after the publication, they are replaced by heavy substitutes... WTF? You really want to send all non-programmers, non-webmasters, non-codeurs of packaging and to change trades? I have no skills of the programmer. IM used to prepare graphics and act as a query designer. With this awkward behavior of FLash CC when it comes to html5 sound simply ridiculous.

  And while I can do a workaround solution by replacing the file oversized (in KBs) with original file when they are two .png files, changing the png in compressed jpg of origin with the optimal size will get delicate - what I need to change the published scripts and html file? Seriously? Html5 cant use jpg? I don't think it's a problem... Then why the hell noone thinks about when any company ads is moving to html5? Portals custom suddenly double their size limits for ads. How do I now just huge ad campaigns? Vous attendez que quelqu'un va attendre des semaines pour que, bien que nous éditons chaque fichier html et script pour remplacer le freaking png en jpg compressé original et traiter avec des tons d’autres problèmes ?

  Edit: did not use the jpg in this case tho so maybe I am mistaken and it won't get replaced with png huge fat, but again, the files small replaced png8 with double its file size is ridiculous

  In the settings of publication under Export Options, you can uncheck that box [] images. Then, once you've optimized your images, you won't have to worry about flash crush them with larger files.

• Converted file from Flash to HTML5 Canvas does not publish

  Hello

  • I use a Mac.

  • I have an existing Flash file, operation which publishes fine.

  • Convert to HTML5 Canvas using the command-> convert to other Document Formats-> HTML5 Canvas

  • Do not make any changes to the settings of the HTML5 Canvas publication

  • Select "publish."

  ... The .html file displays only a blank white block, the size of the Flash file.

  I tried:

  • Create a new HTML5 Canvas file and paste the existing content in this

  • Copy the script action layers of the original in the Web a Flash file

  • Check the settings of publication for something unusual

  Any help is appreciated.

  Looks like the JSON file which poses problem. You can disable the spritesheet option in settings of publication, and then your multiple bitmap files can operate locally as well.

  Regarding Javascript errors, those that are produced inside the code CreateJS, you wouldn't want to be messing around with it! They are only security errors, or the consequence of something that does not not due to security restrictions. You will not get the errors when files are online, or if you can disable the sprite sheets, I suspect.

• [HTML5 Canvas] How to change the scene?

  Hello

  I have an animation created in a HTML5 Canvas document. When seen in the browser, it is displayed in the size of the document, which is not surprising, but what I want to do is display the full window size, scaling to fit. Basically, I'm looking for the equivalent AS3 scaleMode and align with the SWF in height and width to 100%. The publication settings is not all the options related to the scaling, so I don't know where to look. How should I do this?

  Thank you!

  -Aaron

  Hi all

  Sensitive scaling options are now part of the HTML5 canvas publication settings in the latest version of animate CC (2015.2)

  See here: new feature summary (June and August 2016)

  Creating ads with CC HTML5 animate: canvas reactivates the scale. Animate Adobe blog

  Update your copy of Animate through the creative application of cloud and try it now!

• Flash stage size and canvas size

  The size of the Flash stage

  Hello

  My apologies if this has been addressed already. I make a website that will highlight the kinetic typography. I use Flash CC to animate the text (I have separate text and animate the graph) and then publish on the html5 canvas. My question is pretty basic, but I'm hoping to get some advice before you start, so I can avoid problems later. What size should I make the flash stage to resize the animation depending on the device using the Viewer is?  I was going to make the site 1280px x 1024px with the size of the canvas to 1280px x 720px so that the canvas fit under a header and a footer, see the image below. Will it work if it was resized and seen the portrait on a Tablet, for example? I've also seen some information to keep the proportions of the canvas for 4:3 on this website http://blog.toggl.com/2013/05/6-performance-tips-for-html-canvas-and-createjs/ (type 4). My canvas is currently 16:9, x 720px 1280px.

  I tried to test it so that I put my width and height to 100% in the style sheet. It works fine however, when resizing. the typography is contracting too low. Is there a way to ensure that I can resize it so that it can be still readable?

  

  Thank you in advance.
  Kind regards.

  Use any size stage, but in the html file, use the following in your init function.

  function init() {}

  canvas = document.getElementById ("canvas");

  Canvas.style.Width = window.innerWidth + "px";

  Canvas.style.Height = window.innerHeight + "px";

• iMovie canvas size

  Someone knows how to change the canvas size in iMovie to 750 x x 1334 h?

  iMovie 10 works in 16:9 format, but 750 x 1334 is 09:16.   You could change on the side then turn it after sharing, but of course titles would be a problem.  You must create them in another application with s with transparent background .png or .jpgs with green background and then use the installation of the green screen

  Geoff.

• HTML5 canvas, animated during a cursor

  Hello everyone, my name is Etienne Deswattenne, I am a beginner flash of France so I apologize for my poor English, my question is this, how can we change the cursor to a symbol of the scene when the mouse is on another symbol? I have a 'this' problem I think

  Here's the code I sketched in HTML5 canvas:

  ========================================================

  Hello all, I do not understand how to use the keyword "this" pour run code of this fight, because the function is in another function so the 'this' don't be referred not to the same chose? I tried for 4 hours I found nothing, please help me!

  =========================================================

  frequency of var = 3;

  stage.enableMouseOver (frequency);

  this.zoneinterdite.addEventListener ('mouseover', fl_MouseOverHandler_17);

  function fl_MouseOverHandler_17()

  {

  internship. Canvas.style.Cursor = 'none ';

  this.movieClip_6.mouseEnabled = false;

  this.addEventListener ('check', fl_CustomMouseCursor_15.bind (this));

  function fl_CustomMouseCursor_15() {}

  this.movieClip_6.x = stage.mouseX;

  this.movieClip_6.y = stage.mouseY;

  }

  }

  you have lost your reference to 'this' in fl_MouseOverHandler_17.  (and you should not the following named functions.)

  Try:

  frequency of var = 3;

  stage.enableMouseOver (frequency);

  this.zoneinterdite.addEventListener ('mouseover', fl_MouseOverHandler_17(this) .bind);

  function fl_MouseOverHandler_17()

  {

  internship. Canvas.style.Cursor = 'none ';

  this.movieClip_6.mouseEnabled = false;

  this.addEventListener ('check', fl_CustomMouseCursor_15.bind (this));

  }

  function fl_CustomMouseCursor_15() {}

  this.movieClip_6.x = stage.mouseX;  Although these two lines will probably end your mouseover zoneinterdite

  this.movieClip_6.y = stage.mouseY;

  }

• Animate CC (HTML5 Canvas) chronology cannot choose stream in properties &gt; Sync to sound

  Hello

  I have a problem. Animate CC (HTML5 Canvas) timeline is not Stream select Properties > Sync for the sound.

  This section examines passive. Why would it be.

  Thank you.

  

  HTML5 Canvas only supports the synchronization of its event. You can use a document of ActionScript 3.0 for audio streams.

• How to call a function of my html code to js created by animate cc, I had used 'exportRoot.functionName' and said this function in my document of flash pro with html5 canvas, but now on cc animate this way doesn't work.

  My html code created by animate cc was changed to php for me, because I send and received variables via get and catch the cookies and much more. the function that I used to call function on my .fla of the document is passId() and it worked before when animate was Flash pro with html5 canvas.

  

  And function of .fla, I frame_0 only assign to the variable "id_usuario", this is the feature on fla:

  

  First of all, the title of your thread is horrible. Titles are supposed to be securities, not paragraphs.

  As for your problem, you are probably trying to call catchIdUser before it is defined. handleComplete() is raised when the content is ready to run. He did not actually yet. I guess you should have script code call the function of window parent, not the other way around.

• HTML5 Canvas examples/tutorials content scrolling?

  Since ScrollPane component is not supported in HTML5 Canvas of Animate mode, anyone know how to create scrolling content in other ways?  Online pointers to tutorials or examples or books is appreciated.

  you use something like:

  var m;

  var b;

  var tl = this;

  paramF (mask there, buttons parent there, is mask + mask height, height of parent y-buttons buttons parent + height of mask)

  TL.mask_mc.addEventListener ('pressmove', moveF);

  TL.mask_mc.addEventListener ('pressup', stopF);

  function moveF (e) {}

  {if (TL.mask_mc. HitTest (e.localX, e.localY))}

  buttons parent y = m * (e.localY + 40) + b;

  } else {}

  stopF (e);

  }

  }

  function stopF (e) {}

  TL.mask_mc. RemoveEventListener ('pressmove', stopF);

  TL.mask_mc.addEventListener ('pressmove', stopF);

  }

  function paramF(x1,y1,x2,y2) {}

  m =(Y1-Y2) /(x1-x2);

  b = y1 - m * x 1;

  }

• HTML5 canvas settimeout problem

  Hello

  I have a problem with html5 canvas settimeout.

  I created a round drawing object, the instance name is ball. The following code

  Code:

  This.ball.x = 1000;

  setTimeout (calledFun, 500);

  function calledFun()

  {

  Alert ("fun called");

  This.ball.x = 100;

  }

  The function of this code is worked, alert view only. But ball x position not changed.

  So please help me

  Thanks in advance

  you have lost your reference to "this".  Try:

  var tl = this;

  This.ball.x = 1000;

  setTimeout (calledFun, 500);

  function calledFun()

  {

  Alert ("fun called");

  TL.ball.x = 100;

  }