How to create and publish documents in HTML5 Canvas - Easy and practical

There are many world famous programs that are part of Adobe Inc. This time around you will learn more about what Adobe Animate CC is.

What is Adobe Animate CC?

È one of the most famous of the company. This tool allows you to create and manipulate vector graphics such as Corel Photo Paint. This program is an animation studio ideal for distributing interactive digital content.

Design tools

It has a diverse arsenal of instruments which allows you to go a little further in your creations. Some of the features you can get in its interface are:

• Vector and raster graphics.
• Sound.
• Panorama Code.
• Video stream.
• Two-way audio (only when used in conjunction with Macromedia Flash Communication Server).

Its use in large companies

The names of major TV channels have used this program for the creation and design of films and series. Some of the best known are:

• Cartoon Network: The Amazing World of Gumball, Adventure Time, Foster's Mansion for Imaginary Friends.
• Disney: Kick Buttowski, Gravity Falls, Ralph Spaccatutto.
• Nickelodeon: Danny Phantom, The Loud House, The Fairly Odd Parents.
• Pixar: Animation of the credits of films such as Wall-E, The Incredibles and Ratatouille.

HTML5 application

This program was formerly known as Adobe Flash Professional, Macromedia Flash e FutureSplash Animator. It wasn't until December 2015 that the company announced it would be rebranded as Adobe Animate, as a way to disconnect legacy programs with Adoble Flash Player and HTML5 creation.

Through Canvas it was possible to generate graphics or dynamic renderings for both 2D and bitmap.

Create and publish documents in HTML5 Canvas

If you are starting to take an interest in this world of creation and design, this time you will be able to know the first steps you need to take to design a document and publish it in HTML5 Canvas.

Creation process

To create an HTML5 Canvas document, you can, from the Adobe Animate home page, click the HTML Canvas option in the Create New section.

If for some reason you can't see this box, you can go through the creation process as follows:

1. Go to the File tab.
2. New.
3. Select the type of HTML5 canvas.
4. Click accept.

Design process

Once you have the scene you can design on, it's time to use the different tools that Adobe Animate offers you. If you are just starting to use this program, you should be patient when exploring the options.

Start designing

Ideally, to start learning Adobe Animate, you should start using pencil tools, as they are the easiest to manipulate.

From this function, you can start drawing and animating. To add blank frames, press F7 and keep drawing until you complete the animation you want to render.

Save your design

Once the creation and design process is complete, proceed to rescue. To then publish it. In this sense, you have to click on:

• File tab.
• To maintain.
• Create a new folder for your design.
• Press Ctrl + Enter to show you the animation in your browser.

Publishing process

Return to Adobe Animate to view the configuration options to publish the design you created. Because of this:

1. Click on file.
2. Publish settings.
3. A dialog box will appear, in which you will assign a new name to your drawing (if you have named your drawing, for example, animation, set it to animation2).
4. Make sure all the boxes in the Output Files section are checked.
5. Click accept.
6. Go back to the File tab and select the Publish option.

This way, when you go back to the folder you created for your drawing, you will find 2 new files: HTML and JavaScript with the new name you assigned to your animation.