To create an HTML banner suit edge animate program.
We go into the program and click to create a new project. First of all, let's decide on the banner size. Let's make a standard banner of 240 x 400 px size. Set the size on the left side of the screen at the stage layer. Let's prepare images for the banner.
Preparing images in photoshop
We download pictures from the Internet that will participate in the banner animation.
Let's make a banner for the 2018 FIFA World Cup.
This requires four images of the official zabivaka wolf mascot and a cup logo.
Let's process the images in Photoshop so that they take up less disk space.
Making animation in edge animate:
Transfer all images to edge animate.
- 1 Let's design a logo. It consists of a logo image and a rectangle tool of the same size. Add the logo inside the rectangle.
- 2 Make four pictures from top to bottom in the animation sequence. Set the first image to 100 per cent opacity, the others to zero. Let's go to the tools in the timeline. Let's analyze each one.
- auto-keyframe button for creating animation.
- auto-transition is the second button for creating animation. When adding animation, two buttons must be active, pressed.
- toggle pin clicks on the button and moves the pin on the timeline, secondly, change the position of the element. We press the pin button and check. If you get a reverse animation, then select the frame and press the right button, select invert transition.
- Select the type of animation along the motion curve. Select the frame and inside choose which animation will be linear or movement along a curve.
We continue to animate the first wolf picture.
Move the cursor to half a second and put labels on the whole image add a keyframe for opacity.
Move the cursor a second and insert zero opacity at the first picture, put a mark.
For the second picture, at this moment set the transparency to 100 per cent.
It turned out that the first gradually faded out, and the second simultaneously appeared.
We do the same frames for other images.
To see the result in the Internet browser, press the key combination Ctrl + enter.
We make logo animation.
- Select the rectangle and logo.
- Clamp the pin tool.
- Move the interval sideways by a second.
- Take the rectangle and drag it down to cover the picture.
- Clamp the logo and drag it down to the edge.
- Press pin and check animations.
We do the animation in the same way up.
Add text to the HTML banner.
When the logo returns to the top position, then all the images with the wolf should become invisible.
Add the text element to the HTML banner.
- Text1 is called zabivaka. On the left side, select the font and font size.
- Text two will be the official mascot
- World Cup 2018 text .
- Details button. Make the button with the rounded rectangle tool. Let's round the corners and apply any color.
Animating the text in edge animate on the Html banner:
For text 1, set the pin tool, move the timeline for a second and raise the text element above the banner.
Depress pin and see that the text moves linearly from the top to the baud position of the logo.
To have a bouncing effect, use the ease out tool and select bounce.
Animation of pressing a button more:
After the text animation has passed, the hand should go out and click on the button in more detail, the button will change colour and an external glow will appear.
- Use the pin tool and move your hand off the screen.
- When the hand is over the button, make the button element blue and the shadow a little purple.
How to loop an HTML banner:
- Let's set a label at the beginning of the animation and name it start.
- Let's go to the end of the animation and set the trigger. Inside, write the code sym.play (start);
When we hover over the HTML banner, we change the cursor and link.
Create a new transparent layer above the banner and name it active.
On the left in the setting, select the cursor finger.
To add a link, right click on the layer above the banner and select the open action click function.
In the window, select open in a new window.
Let's register our link.
The html banner is ready.
Now you can save it and add it to the site.
The banner works on java script, so it doesn't take up a lot of space.
The banner is displayed on all devices, without exception, unlike flash, where a player is needed.
In the edge animate program, it turns out to make an HTML banner quickly and beautifully.