Hi there,
I’m new to Blocs and am not having much luck getting started. I’ve watched the “Introduction to Blocs” video and it’s more like a high-speed demo than a tutorial, IMHO.
The site I’m trying to create is really pretty simple. I’m just trying to place an HTML5 Canvas animation at the top of the body of each page with some explanatory text beneath it. The animations are all done and tested (I converted them from Flash to HTML5 Canvas in Adobe Animate) and I just need to figure out how to add each one.
Can anyone please point me to a tutorial for doing this or explain how it’s done? I’ve searched both Google and YouTube and have briefly scanned the topics in this forum and am coming up with nothing that appears applicable, which is surprising.
I’m not sure what you are looking for, but if you haven’t already, check out the free Getting Started with Blocs video course I have created. It’s available here: https://eldargezalov.com/start
Typically, you would use an HTML bric to position your animation on the page. The HTML will create the canvas pixel container that you can then add your animation to. The HTML container would be something like this:
You would then add the rest of the canvas code before the closing canvas element. In many cases, the code will be in the form of a script (usually javascript) which would be nested inside the canvas element.
I don’t know what Adobe Animate outputs - whether it’s already in a canvas element or whether it’s just the script code. If it’s the latter, you will have to add the script inside the canvas element. If it outputs the canvas element with the script already nested, you can just add the whole thing to an HTML bric wherever you need it on your page.
Hi Hendon,
Thanks for posting this. I thought creating the HMTL5 Canvas animations in Adobe Animate was going to be the hardest part of publishing a modern, responsive website with animation, but Blocs is turning out to be more challenging for me than Adobe Animate!
Okay, here’s where I’m at, and I would truly appreciate any help you (or anyone else) can provide me at this point!:
I created a new page on the site in Blocs.
I added an HTML Widget to the new, blank page.
I added the code that you provided to the HTML Widget and inserted the code from the HTML5 Canvas animation just above the closing statement for Canvas. I ended up with the expected pink frame on the page, but nothing inside of it. So…
I removed all code from the HTML Widget and just pasted in the code from the HTML5 Canvas animation. I got this code, by the way, by “viewing source” in the browser when I load the HTML wrapper page for the animation. I would think that should work, but maybe that’s not the correct way of getting at the code.
After pasting in just the code from HTML5 Canvas animation without the code you provided, I see “Script Snippet” appear three times with a black box over it, which I’m assuming is the stage for the animation (I wanted to attach a screenshot, but can’t seem to find a way to do that).
When I preview this in Chrome (Blocs > View Menu > View in Browser > Chrome), I get a blank browser page.
I tried to paste the HTML5 Canvas wrapper for the animation into this forum posting, but the code doesn’t show up because apparently the code is being processed by the display engine of the forum instead of simply being displayed as code. How do I post the code here?
Would it be possible to zip the canvas file and post it here? You can do this (and add screenshots) with the upload link at the top of the editor window. Alternatively, you can drag files directly into your post. If we can take a look at what it is you are trying to embed, we may be able to provide a quicker solution.
Hi Hendon,
Thank you for pointing out that I can attach files; I didn’t even notice that! I’ve enclosed the html file that’s generated by Adobe Animate as a wrapper for the HTML5 Canvas animation and I’ve also enclosed a screenshot of what I see in Blocs when I embed the HTML into an HTML widget in Blocs.
I will be so happy if we can make this work! Thanks so much for your help!
Cheers,
Scott
The file you included is just the html page - it only shows a blank (black) canvas with nothing in it. I noticed from the source code that it requires two scripts, one named named createjs-2015.11.26.min.js which is accessed directly from the internet and another named Compatible_Canvas.js which appears to be a local script file. For me to see the file, I will need a copy of the Compatible_Canvas.js file.
My guess is that it is the location of that file that is causing you the problem. Ideally, it should be placed in the js folder output by blocs. You would then reference the script by adding the path ./js/ in front of the file name when adding the code to blocs.
If you zip and send the js file, I’ll set it up in a blank blocs project file so you can see how it should be incorporated.
Scott, it seems that there is an error being thrown up when the code is added to Blocs. Specifically, the error is saying “undefined is not a constructor (evaluating new css.Sprite()’)”. Don’t ask me what this means, but clearly the error doesn’t appear when opening the the html page outside of blocs. Therefore, I can only assume its some sort of javascript conflict with something within blocs. As it is, the canvas is being drawn correctly, the js file is being found and loaded but the Compatible_Canvas.js seems to be having problems loading the sprites from the Compatible_Canvas_atlas_.png file. The error is being returned at line 78 of the js file.
I don’t have a solution for you at this point, but I do have a workaround. If you publish the project to a folder, in the same way as you did for the zip file posted here, you can upload that folder to your server. In blocs, you can add a video bric, but instead of linking to a youtube or vimeo file, change the link to the html file on your domain. The image below shows how to do it. It’s not the most elegant of solutions, and the thing doesn’t centre well in a browser, particularly at smaller screen sizes. Hopefully, one of the developers will see this thread and maybe shed some light on what the problem may be with inserting the HTML directly into blocs.
Feel free to use the src link shown in the screenshot below to test it for yourself.
It doesn’t really look good on small screens, but it helped me a lot, congratulations. Thank you very much for your help, I hope that in the future you will have this native feature in blocs. I’m still testing in the header, https://salamineira.com
