Animate CC 2018 - Interactive animated web sites: Difference between revisions
Line 23: | Line 23: | ||
== Creating a menu-based site == | == Creating a menu-based site == | ||
Animate CC will create code for HTML5 Canvas, i.e. will not create code that interacts with the rest of the HTML page. Think of it as "Flash" made with JavaScript code. The "application" we will create will sit inside an HTML page. Depending on its purpose you will have to make it big enough. By default the canvas is set to 550 x 400. We rather suggest using '''at least''' 800x600 pixels for creating interactive animations. You can make the size responsive, e.g. have it adapt to the size of a small HTML page. In the Publish settings -> Basic, see<code> Make responsive</code> | Animate CC will create code for HTML5 Canvas, i.e. will not create code that interacts with the rest of the HTML page. Think of it as "Flash" made with JavaScript code. The "application" we will create will sit inside an HTML page. Depending on its purpose you will have to make it big enough. By default the canvas is set to 550 x 400. We rather suggest using '''at least''' 800x600 pixels for creating interactive animations. You can make the size responsive, e.g. have it adapt to the size of a small HTML page. In the Publish settings -> Basic, see <code>Make responsive</code> | ||
In order to create a menu-based side we will use the main timeline. Instead of using the frames for creating animations (as typical banner designers) do, we use the timeline to represent various contents (pages). Many game developers also use this strategy. | |||
Layers have at least one frame. Frames can be either empty (include nothing) or include something, e.g. drawings, JavaScript code, or so-called keyframes (that we will not use at this level). | |||
=== Create a few layers and give them a useful name === | |||
[[File:Adobe Animate CC 2018-create layers.png|thumb|right|150px|Create layers]] | |||
Each "page" will have the same several layers. These will include: | |||
* A global <code>Global menu</code> with buttons | |||
* A global <code>Actions</code> layer that includes the menu code | |||
* A <code>Backgrounds</code> layer with some (optional) drawing objects | |||
* An <code>Animations</code> layer that includes so-called movie clips (animation objects) | |||
* A <code>Foregrounds</code> layer with some (optional) drawing objects (animations objects will run behind these) | |||
Please create five layers now (you always can add/remove or change these. | |||
* In order to create a layer, click on the <code>new layer</code> button. Do that five times. | |||
* '''Name each created''' layer double clicking on its name | |||
* Sort the layer like in the following picture. You can drag them up and down. By default, the last layer will be drawn in the back and the layer on top in front. | |||
* Save your file now ! | |||
[[File:Adobe Animate CC 2018-created layers.png|thumb|right|250px|Named and sorted layers]] | |||
[[Category: web technologies]] | [[Category: web technologies]] |
Revision as of 17:52, 22 April 2018
This article or section is currently under construction
In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")
(a first version will be completed until April 25 2018).
Introduction
This is a quickly made tutorial about creating a simple menu-based HTML5 Canevas web site with Adobe Animate CC.
The Animate CC environment
As of 2018, Adobe uses the same kind of user environment across most of its products. The Interface of Animate CC did not change much since Flash CS4, i.e. users familiar with Flash Professional versions of the last 10 years will not feel lost.
After launching the software:
- We suggest putting the interface into
Designer
layout. You can change that later though and even create your own favorite configuration. Read theFlash CS6 desktop tutorial for some information about docking panels. - Make sure to select
HTML 5 Canvas
. If you don't you will have to exit Animate CC and start over again.
Most important elements
Animate CC will create code for HTML5 Canvas, i.e. will not create code that interacts with the rest of the HTML page. Think of it as "Flash" made with JavaScript code. The "application" we will create will sit inside an HTML page. Depending on its purpose you will have to make it big enough. By default the canvas is set to 550 x 400. We rather suggest using at least 800x600 pixels for creating interactive animations. You can make the size responsive, e.g. have it adapt to the size of a small HTML page. In the Publish settings -> Basic, see Make responsive
In order to create a menu-based side we will use the main timeline. Instead of using the frames for creating animations (as typical banner designers) do, we use the timeline to represent various contents (pages). Many game developers also use this strategy.
Layers have at least one frame. Frames can be either empty (include nothing) or include something, e.g. drawings, JavaScript code, or so-called keyframes (that we will not use at this level).
Create a few layers and give them a useful name
Each "page" will have the same several layers. These will include:
- A global
Global menu
with buttons - A global
Actions
layer that includes the menu code - A
Backgrounds
layer with some (optional) drawing objects - An
Animations
layer that includes so-called movie clips (animation objects) - A
Foregrounds
layer with some (optional) drawing objects (animations objects will run behind these)
Please create five layers now (you always can add/remove or change these.
- In order to create a layer, click on the
new layer
button. Do that five times. - Name each created layer double clicking on its name
- Sort the layer like in the following picture. You can drag them up and down. By default, the last layer will be drawn in the back and the layer on top in front.
- Save your file now !