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

Print frames in Canvas html 5.0

New Here ,
Feb 06, 2017 Feb 06, 2017

Copy link to clipboard

Copied

I could not find the code for it, is it possible to define a certain frame or an array of frames in Animate CC Canvas html 5.0? If so, what is the code?

Many thanks.

Views

2.9K

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

correct answers 1 Correct answer

LEGEND , Mar 06, 2017 Mar 06, 2017

Yes, both chunks of code should work from the timeline. I just this as a test:

this.stop();

print_voucher();

function print_voucher() {

  var win = window.open();

  win.document.write("<br><img src='" + canvas.toDataURL() + "'/>");

  win.print();

  //win.location.reload();

}

The reload line was causing the new window to try to print again. The window that it created and set the source of literally had a png in it that I could drag to my desktop.

Votes

Translate

Translate
Enthusiast ,
Feb 07, 2017 Feb 07, 2017

Copy link to clipboard

Copied

Not sure I understand what you mean by "array of frames" The different frames of an animation ?

• It could be internal to Animate : different frames of a Graphics or Movie Clip symbol

• It could be a spritesheet handled by EaselJS (a subset of CreateJS) +JSON metadata :

http://createjs.com/docs/easeljs/classes/SpriteSheet.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
New Here ,
Feb 08, 2017 Feb 08, 2017

Copy link to clipboard

Copied

I mean a number of consecutive frames in a timeline or a single frame singled out to print, just like in actionscript.

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
Enthusiast ,
Feb 09, 2017 Feb 09, 2017

Copy link to clipboard

Copied

Spritesheets are intended first for the different phases of animation, for example in the following animation the walk of the character (Grant Skinner, father of CreateJS) : http://www.createjs.com/demos/easeljs/SpriteSheet.html

If it's what you're looking for (you do'nt explain what your code is intended to do with that array of frames ), you could google "easeljs sprite sheet tutorial" and get a number of examples to start with – though outside Animate CC, but you could adapt.

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
New Here ,
Feb 09, 2017 Feb 09, 2017

Copy link to clipboard

Copied

Define frames for printing and execute printing command in Animate CC Canvas html 5.0.

Thanks.

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
LEGEND ,
Feb 10, 2017 Feb 10, 2017

Copy link to clipboard

Copied

Print... on paper?

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
New Here ,
Feb 14, 2017 Feb 14, 2017

Copy link to clipboard

Copied

yes.

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
LEGEND ,
Feb 15, 2017 Feb 15, 2017

Copy link to clipboard

Copied

There is no print function in JSFL, there is no print function in the IDE, and printing canvas content from JavaScript is... complicated.

Your best option is to export the frames you want to print as bitmaps, then print the bitmaps.

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
New Here ,
Feb 18, 2017 Feb 18, 2017

Copy link to clipboard

Copied

...But on any of these options can the user bring out the print applet on a simple press of a button to print a series of pre defined frames?

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
New Here ,
Feb 18, 2017 Feb 18, 2017

Copy link to clipboard

Copied

No I did not rephrase the question but asked for additional information. If you cannot understand it, then have someone else answer it. Thank You.

1. ...But on any of these options can the user bring out the print applet on a simple press of a button to print a series of pre defined frames?

2.

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
LEGEND ,
Feb 18, 2017 Feb 18, 2017

Copy link to clipboard

Copied

Look at the answer in this page:

html5 - How to print a canvas element? - Stack Overflow

The relevant bit is this:

function print_voucher(){

    var win=window.open();

    win.document.write("<br><img src='"+canvas.toDataURL()+"'/>");

    win.print();

    win.location.reload();

}

You could use that approach to print what the user is looking at right now. If you want them to print a frame from your FLA timeline, you could make that frame be a single PNG or JPEG image, which when you publish will become a named external file, with a known path and name. The code would then be:

var win=window.open();

win.document.write("<br><img src='images/imagename.jpg'/>");

win.print();

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
New Here ,
Feb 20, 2017 Feb 20, 2017

Copy link to clipboard

Copied

Thanks,

Can the user complete printing, using this method, a single or several frames from the FLA timeline in a single press of a button without going through an interruption of the frame/screen he is viewing except for an appearance of a single printing applet?

If answered properly, this is my last question on the subject.

Many Thanks,

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
LEGEND ,
Feb 20, 2017 Feb 20, 2017

Copy link to clipboard

Copied

Doing my best to answer properly!

The HTML that you set up can be whatever you want. It could be a series of images, and hopefully the user's browser will print the full height of the page, not just what is visible.

There's significant logic involved in figuring out what the HTML should be, in order to make it be an arbitrary set of images, but it feels doable.

BTW, don't feel too discouraged about the effort in getting an answer here, it isn't usually like that. Please do come back with more questions.

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
LEGEND ,
Feb 20, 2017 Feb 20, 2017

Copy link to clipboard

Copied

By the way, this approach does bring up the standard print dialog. I don't see a way around that, the user does need to be able to pick a printer, or to set page layout options.

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
New Here ,
Mar 06, 2017 Mar 06, 2017

Copy link to clipboard

Copied

Many thanks. I will use it in my upcoming first Canvas/JS project. By the way, just to be sure, the code you have suggested can be used as a CreateJS action inside an animate CC frame?

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
LEGEND ,
Mar 06, 2017 Mar 06, 2017

Copy link to clipboard

Copied

Yes, both chunks of code should work from the timeline. I just this as a test:

this.stop();

print_voucher();

function print_voucher() {

  var win = window.open();

  win.document.write("<br><img src='" + canvas.toDataURL() + "'/>");

  win.print();

  //win.location.reload();

}

The reload line was causing the new window to try to print again. The window that it created and set the source of literally had a png in it that I could drag to my desktop.

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
New Here ,
Mar 07, 2017 Mar 07, 2017

Copy link to clipboard

Copied

Thanks, As a related question, would you happen to know about an all inclusive resource, preferably on line of all canvas CreateJS  commands for animate CC? I could find only few commands, also a good book that covers well the essentials of animate CC canvas?

Thanks in advance.

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
LEGEND ,
Mar 07, 2017 Mar 07, 2017

Copy link to clipboard

Copied

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
New Here ,
Mar 08, 2017 Mar 08, 2017

Copy link to clipboard

Copied

I have found the downloadable version of this page which is impossible to use. Thank you, this is very good. What I am looking for most is a full summarized list of CreateJS  commands for animate CC which I did not find. If you know of any,many thanks.

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
LEGEND ,
Nov 28, 2020 Nov 28, 2020

Copy link to clipboard

Copied

LATEST

Years later, someone asked me about this, and I find that my code didn't work. The reason it failed is because popup blockers prevent it from working. It can work if you give the popup permission, but another solution is to make it work from a user action.

Here is a version where a Button with a name of 'go' is used to trigger the print dialog:

 

this.stop();
this.go.addEventListener("click", print_voucher);
//print_voucher();
function print_voucher() {
var win = window.open();
win.document.write("<br><img src='" + canvas.toDataURL() + "'/>");
win.print();
//win.location.reload();
}

 

 

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