How to create an HTML5 animation with Adobe Edge, complete example
In a previous article, we quickly looked at the installation and interface of Adobe Edge, promising to create a real application, which we are going to do in this article.
We start immediately by opening Adobe Edge and creating a new project for our animation: a ball that bounces on a football field.
The stage
Adobe Edge provides an HTML5 / CSS / Javascript structure and the main container of our animation is represented by a <div>.
We can choose the dimensions to be applied to the main layer acting on its properties: for example, we can decide the dimensions.
Furthermore, we can decide if and how to visualize the elements that go beyond the dimensions of the stage.
Upload images to Adobe Eg
Attached to the article we find the images we need, a soccer field and a ball, we can upload them to our project by clicking on the menu File > Import.
Once the images are loaded, we find them in the Elements panel, nested under the stage as further <div>. We just have to start using them: the football field will use it as a background, so it’s better to lock it with a padlock, while we focus on the animation of the ball.
As the figure shows, we can act on objects thanks to a series of parameters: position, an angle of rotation, dimensions, deformations, scale factors. Each of these parameters can be involved in animations, so we can zoom in on an object and at the same time rotate it and move it.
In our example, we limited ourselves to modifying the scale factor of the ball, initially small, then brought to natural size and shrunk again, with a rebound effect.
