Adobe animate examples. Preparation of creatives in HTML editors. Motion Animation Components

To prepare HTML creatives for placement in ADFOX, it is important to comply with the requirements for inserting code that processes a click on a banner and counts events in the banner.
When developing HTML code, you can use the editors for which these instructions were written:
- Adobe Animate CC;
- Google Web Designer;
- Adobe Edge Animate CC.

Requirements for HTML code (for code developers)

Prepare your project by meeting the following requirements:

1. The maximum allowed number of characters in the HTML code is 65,000;
2. It is preferable to place JavaScript and CSS inside the HTML code of the banner;
If the resulting HTML code exceeds the maximum allowed number of characters, then you need to reduce the code by moving JavaScript and CSS into separate files:
- save the js and css code into separate files with the extension .js or .css;
3. A project can only contain one file with the .html extension;
4. The maximum allowed number of files in a project is 50;
5. Allowed file types in the project: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf, otf, ttf, abf, acfm, gdr, etx, eot, fnt, fon, mf, ttc, woff;
6. Maximum size of each file (also applies to files inside the archive):
- 300Kb;
- 1MB for video files.
7. File names must contain only numbers or letters of the English alphabet, and the underscore character. It is not allowed to use Russian letters, spaces, quotes and special characters in the file name;
8. You cannot use Russian letters in the names of variables and objects.
The only exception is the text on the banner.
9. Format of the finished project - zip archive.

Adobe Animate CC

1. Editor preparation.

To create a new project in AdobeAnimate CC, select the "HTML5 Canvas" project.

The code of this template can be used as a basis when creating creatives in the editor.

To apply a template to a project, in the publishing settings, select "Advanced Publish Settings -> Import New...".

Template contains script adfox_HTML5.js

3. Click processing

If your creative includes cyclical animation, then use codes for buttons only from the section.

3.1 To make the entire banner area clickable and have one link to go to, add the following code in the first frame of the animation:

Canvas.style.cursor = "pointer"; canvas.addEventListener("click", function() ( window.callClick(); ));

3.2 To add several buttons for moving with different links, add a main button for clicking on the banner in the top animation layer, assign the button an Instance Name and write the code on the button:

This.btnMain.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(); ); )) ;

Add other buttons that, when clicked, will transfer the user to different pages of the advertised site.
Place some buttons on the top layer above certain parts of the animation, give the buttons an Instance Name, and write code for each button:

This.btnLeft.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(n); ); ) );

Where n

3.3

This.btnText.addEventListener("mouseover", function() ( window.callEvent(n); ));

Where mouseover- javascript event, n- event number from 1 to 30 that should be triggered.

Features of creating looping animation

To implement looping animation in a creative in the Animate CC editor:
- set the "Loop Timeline" option in the publication settings;
- use the codes for buttons from this section, and the codes for regular buttons from paragraphs 3.1 and 3.2 must be removed.

Code for a creative with one button and looping animation:

If there are several buttons, then in the code for calling ADFOX events, add the following code:

If (typeof(this.stopCycle) == "undefined") ( this.btnMain.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(); ; )); this.btnLeft.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.which == 1 || t. button == 0) ( window.callClick(n); )); this.stopCycle = true; )

Where n- event number from 1 to 30 that should be triggered.

Using transparent buttons

Transparent buttons can be used, for example, if you need to make the entire banner area clickable or only a part. For them, as well as for regular buttons, a code for calling a transition or event must be added.

Buttons in Animate are symbols that contain four frames. You can leave the first three empty and fill only the last "Hit" by adding content (a graphic element) to it via Insert > Timeline > Keyframe.

The contents of the Hit frame are invisible and define the area of the button that responds to a click. You can add content (a graphic element) to this frame via Insert > Timeline > Keyframe. If the rest of the frames are left empty or invisible, the button in the stage appears transparent blue and is shaped like the content contained in the next Hit frame. When you publish your project, the transparent blue area will not be visible.

Feature of the implementation of a stretching (rubber) banner

To make the banner stretch across the width of the container in which it will be located on the site, make the settings: Select File > Publish Settings.
In the tab Basic, select Make Responsive > Width, Height or Both.
Select Scale to fill visible area to view the output in full screen mode.
Selecting "Fit in view" will scale content to fill all available screen space while maintaining the same aspect ratio. So if the Maximum width has already been reached, then the area along the height of the screen may remain unfilled and vice versa.

If you cannot achieve the desired result using the program settings, use scripts.
Here are examples of codes:
Download code for aspect ratio scaling.
Download the code for scaling without aspect ratio.
Download the code for positioning elements, where an0..an4 is the Instance Name of the elements.

Features of creating a banner with auto-flashing

If you want to display a banner from an expanded state, then when adding a banner in the interface, you must specify the value “yes” in the “Auto-expand always” or “Expand on initialization” parameter and add the code in the HTML creative:

Window.global_exp_banner = this.exp_banner; window.global_main_banner = this.main_banner; window.global_exp_banner.visible = false; if (window.isBannerExpanded) ( window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false; ) else( window.global_exp_banner. visible = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = true; window.global_main_banner.btnExpand.visible = true; ) window.global_main_banner.btnExpand.addEventListener("click", expandBanner.bind(this )); window.global_exp_banner.btnCollapse.addEventListener("click", collapseBanner.bind(this)); window.onBannerExpand = function() ( window.callEvent(2); window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false ; ) window.onBannerCollapse = function() ( window.callEvent(3); window.global_exp_banner.visible = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = true; window.global_main_banner.btnExpand.visible = true; )

5. Publication of the project.

Important! When previewing a project in the browser via (Ctrl-Enter | Cmd-Enter) random values of the form are appended to links in file names in HTML ?1468231208369 . Such values must be excluded from the project when loading it into ADFOX.
To do this, the final project in the editor must be published via File > Publish Settings > Publish (Shift-Ctrl-F12 | Shift-Cmd-F12).

When publishing a project, select a template AdobeAnimate_Adfox_.html.

.zip

Google Web Designer

The code of this banner can be used as a basis when creating creatives in the editor.

Template contains script adfox_HTML5.js and a set of parameters for the correct operation of transitions and event counting:
%reference%, %user1%, %eventN%, where N is the event number from 1 to 30.

2. Click processing.

All events are assigned to specific animation elements through the Events tab.

The Interactive Area component is used to invoke actions.
Add it and select an event "Interactive Area" - "Touch/Click"(or "Tap Area > Touch/Click" in English version).

In the "Custom Code" tab, specify a call to the click function.

2.1

CallClick();

2.2

CallClick(n);

Where n

2.3 If you need to trigger an event from an animation without a transition, use the following code:

CallEvent(n);

Where n- number of the event that should be called.

So that the banner stretches across the width of the container in which it will be located on the site, on the panel Properties For position and dimensions, specify percentages instead of pixels.

Also use the options "Align to Container" And "Rubber layout" on the top toolbar.
If you enable Fluid Layout before using any alignment tools, then when you resize the parent container, all elements will be aligned to each other and to the dimensions of the container.
In this case, you can simultaneously use both relative sizes of elements in percentages and absolute sizes in pixels.

4. Publication of the project.

When adding a banner to ADFOX, the manager will need to know the correspondence of buttons and event numbers. For each event, the manager will write its own link to navigate to, which will then be passed into the banner code using a variable.

After publishing the project, archive it in the format .zip. Your creative is ready to be uploaded to the ADFOX banner.

Adobe Edge Animate CC

To get started, run the file with the extension .an from the archive.

2. Click processing.

All events are assigned to specific animation elements through the "Code" tab.

To navigate through the selected element, you must select an event click and write a call to the click function.

Buttons must be assigned an Instance Name, for example: btnMain, btnRight.

2.1 If using one jump button:

CallClick();

2.2 If there are several transition buttons:

CallClick(n);

Where n- number of the event that should be called.

2.3 If you need to trigger an event from an animation without a transition, use the following code:

CallEvent(n);

Where n- number of the event that should be called.

Feature of the implementation of a stretching (rubber) banner.

In order for the banner to stretch across the width of the container in which it will be located on the site, when preparing the banner in the editor in the Properties panel, you must specify percentages instead of pixels for position and size.

There are also Scale Size and Scale Position buttons for elements in the Position and Size panel

4. Publication of the project.

The project should be published with the following settings:

After publishing the project, archive it in the format .zip. Your creative is ready to be uploaded to the ADFOX banner.

UPD December 6, 2015:
The product manager for Flash Runtime and Adobe AIR said that they don't have plans to stop working on Flash Runtime and AIR and renaming a content creation product no way not related to the fate of Flash Player and related ecosystem.

Everything would be fine, except for one nuance that greatly changes the meaning - technical illiteracy and general copy-paste. Publications reprint each other, adding more and more “facts” that are not in the original. In a word - a damaged phone.

The original article http://blogs.adobe.com/conversations/2015/11/flash-html5-and-open-web-standards.html reports that Adobe is renaming Flash Professional to Animate CC. Additionally, they report that customers want more supported platforms, etc.

And I was not surprised that many people do not see the difference between Flash and Flash Professional. Various gags began to appear on news sites, citing other sources that link further down the chain. And not always the original.

Today, the word Flash is perceived as a plugin for browsers. Technically it's Flash Player. But there is a content creation tool - Flash Professional. If Microsoft renamed Word to TextMachine, would people shout that “Microsoft stopped developing Word?” Even though it is written in black and white that content creation will be supported and data can be edited?

From my own examples I can demonstrate a vivid picture. Local clients ask me what we will use to create animation for a presentation for iOS. I'm proud to say that in Flash Professional. And the client is in a stupor. After a moment he says:

“But on the hub they write that the flash is dead and it doesn’t work on the tablet”

And then I fall into a stupor. The technical illiteracy of clients and authors of articles about flash makes people move away from the desired result. Fortunately, the client was persuaded and was satisfied with the result.

Let's return to the original article. They report that html5 has matured and already supports most of the features of Flash. Moving down, we see that Adobe themselves view Flash as a key means of delivering premium content - web games and premium video. But there is no word that they are stopping support for Flash.

Moreover... They clearly state that they are working in partnership with Microsoft and Google to improve the compatibility and security of Flash Player. And they didn’t forget to add that they are working closely with Facebook to improve the reliability and safety of games in Flash Player. So where is there any word that they are abandoning Flash?

If we talk about the development of Flash in general, yes, it stopped a long time ago. Only minor (but significant) improvements are made and security bugs are fixed. But is it really that bad? From my point of view, Flash has everything it needs. Of course, I would like more. But why?

For more, you should go for the Standalone format of games. And there is Adobe AIR (if we consider Flash). Adobe AIR support has not been deprecated. I have information about plans for 2016. But will browser flash die? Certainly. But definitely not tomorrow.

And for those who like to say in cliches that Flash drains the battery, show me how Canvas charges it.

It is also worth noting that the Adobe Edge Animate project will no longer be actively developed. But because I am close to the development of Flash Professional - I assure you that Edge Animate will not be developed at all (except for critical errors). This decision was made in favor of Adobe Flash Professional (future Animate CC).

For people who want to constantly improve, learn something and constantly learn something new, we specially made this category. It contains exclusively educational, useful content that you will certainly enjoy. A large number of videos can perhaps rival even the education we are given at school, college or university. The biggest thing about training videos is that they try to give the latest, most relevant information. The world around us in the era of technology is constantly changing, and printed educational publications simply do not have time to provide the latest information.

Among the videos you can also find educational videos for preschool children. There your child will be taught letters, numbers, counting, reading, etc. Agree, it’s a very good alternative to cartoons. For primary school students you can also find English language training and help in studying school subjects. For older students, educational videos have been created that will help you prepare for tests, exams, or simply deepen your knowledge in a particular subject. The acquired knowledge can have a qualitative impact on their mental potential, as well as please you with excellent grades.

For young people who have already graduated from school, are studying or not studying at university, there are many fascinating educational videos. They can help them deepen their knowledge of the profession for which they are studying. Or get a profession, such as a programmer, web designer, SEO optimizer, etc. This profession is not yet taught at universities, so you can become a specialist in this advanced and relevant field only by self-education, which we are trying to help with by collecting the most useful videos.

For adults, this topic is also relevant, since it often happens that after working in a profession for years, you come to the understanding that this is not your thing and you want to learn something more suitable for yourself and at the same time profitable. Also among this category of people, there are often videos on the type of self-improvement, saving time and money, optimizing their lives, in which they find ways to live a much better and happier life. Even for adults, the topic of creating and developing your own business is very suitable.

Also among the educational videos there are videos with a general focus that are suitable for almost any age; in them you can learn about how life began, what theories of evolution exist, facts from history, etc. They perfectly broaden a person’s horizons, making him a much more erudite and pleasant intellectual interlocutor. Such educational videos are indeed useful for everyone to watch, without exception, since knowledge is power. We wish you a pleasant and useful viewing!

Nowadays, it is simply necessary to be what is called “on the wave.” This refers not only to news, but also to the development of one’s own mind. If you want to develop, explore the world, be in demand in society and be interesting, then this section is just for you.

Let's create a new file, make it 800x600 in size and transfer some files into it, namely these few pictures and “noise of the forest mp3”, that is, sound. I'm moving it here. What we have as a result is this picture - it’s a forest, it’s called “bg”, “play” and “pause”, these are buttons. I'll move them down now, let's move them, something like this - the simplest option.

I’ll now start the animation, press cntr+enter, there’s just a forest and just two buttons, nothing works. If I want to make a sound play automatically for me, it’s called “forest noise”, then I need to select this layer and then select “auto play”, now when I press cntr+enter the sound will play. Amazing.

How to add a clickable link to a video in Adobe Edge Animate.

If we just drew some button and there is some kind of background, then if we click on it, there will be no transition anywhere. To add interactive link We need to select this button, right-click open action, foul button, that’s what I call it, and click click, that is, what will be done when clicked. And here we need to select Open you are raol.

I'll show you in this video how to do it, it's not complicated, but you need to correctly understand where you need to copy the correct code and where you need to paste it.

Let's say you have video made in adobe edge animate, when you click on it, the desired landing page opens, it is in edge animate format and saved in the folder with the source code and Java scripts. Open it in any text editor, you can use any test editors, for example: notepad, etc.

How to loop an animation in Adobe Edge Animate, that is, how to make it so that when it plays to the end, it starts again from the beginning and goes on forever.

Here you can copy key frames, that is, I select one frame, press cntr+c, click on the desired field, press cntr+v, the animation will loop, that is, not loop, but in this case, go from the starting point back to the starting point. If I run this video and press cntr+enter, we see that the animation lasts only 1 second, it goes to one side and returns to the other.

I'll show you in this video how to do it, it's not complicated, but you need to correctly understand where you need to copy the correct code and where you need to paste it.

Let's say you have a banner made in Adobe edge animate, when you click on it, the desired landing page opens, it is in edge animate format and saved in a folder with the source code and Java scripts. Open it in any text editor, you can use any test editors, for example: notepad, etc.

Next, I want to insert this banner onto the site. What should be done? You need to download the index file, then open it in a text editor, copy the adobe edge code and at the end add the code here before the “head”, then before the title of the place where we will add our banner, before the div. For more precise execution, there are instructions that will help you: https://docs.google.com/document/d/1-kTj3QhCbzT47-dReqpgVCBN_YuPy3hqxAMp94KcnZ0/edit. Afterwards, we save and go to the FTP service, I use filezilla, find the storage location of your site and copy the index folder to your file, which is located on the server, replacing the current files. Next, we download all the Java scripts and update the site. Everything is ready - the animation works, and the tab with the landing page also opens.

If you are interested in such lessons, subscribe to my channel, because... there will be many new videos in the near future - http://www.youtube.com/user/danilfimushkin?sub_confirmation=1

00:32 – let’s say you have a banner made in Adobe edge animate

01:30 – add a banner to the site

02:09 – add code before the “head” tag

02:50 – instructions for adding a banner to the site

03:31 – upload files to the server

05:29 – we update the site and everything is ready!

Join and ask questions:

Download three free Muse templates: http://site/free-landing.html

http://vk.com/adobeedgeanimate

I'm on VKontakte: http://vk.com/danilfimushkin

At the webinar, I told and showed how you can make a full-fledged animated banner from a vector illustration.

00:17 – we begin to animate the vector illustration in Edge Animate
14:06 – create the movement of the character’s paws
16:54 – advantages of a nested symbol
17:48 – what is a nested symbol
18:24 – writing a looping animation
19:42 – looped animation is ready
23:40 – create eye blinks
26:54 – determine file names when saving
27:57 – animation of “drop-down” text
28:39 – attaching a motion curve – changing the animation axis
30:03 – intermediate summary of the animation, creating a snowy landscape and animating a snowflake
33:39 – Edge Animate review
34:52 – homework
35:25 – how to add an active link
39:09 – creating several buttons and attaching links

Join and ask questions: http://vk.com/adobeedgeanimate