Let's create a new file, make it 800x600 in size and transfer some files into it, namely these few pictures and “mp3 forest noise”, that is, sound. I'm moving it here. What we have as a result is such a picture - this is a forest, it is called "bg", "play" and "pause", these are buttons. I'll move them down now, move them, like this - the easiest option.
I'll start the animation now, press cntr + enter, it's just a forest and just two buttons, nothing works. If I want to make a sound automatically play for me, it is called “forest noise”, then I need to select this layer and select “auto play” here, now when I press cntr + enter, I will play a sound. Amazing.
If we just drew some kind of button and there is some kind of background, then if we click on it, then there will be no transition anywhere. To add clickable link we need to select this button, right-click open action, foul button, I have it called that, and click click, that is, what will be done when clicked. And here we need to select Open you are raol.
I will show in this video how to do it, nothing 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 the edge animate format and saved in the folder with the source code and Java scripts. We open it in any text editor, you can use any test editors, for example: notepad, etc.
Here you can copy keyframes, that is, I select one frame, press cntr + c, click on the desired field, press cntr + v, the animation will be looped, that is, not looped, but in this case, go from the starting point back to the starting one. If I run this video, press cntr+enter, we see that the animation lasts only 1 second, it goes one way and returns the other.
I will show in this video how to do it, nothing 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 the edge animate format and saved in the folder with the source code and Java scripts. We open it in any text editor, you can use any test editors, for example: notepad, etc.
Next, I want to insert this banner on the site. What should be done? You need to download the index file, then open it also 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 is an instruction that will help you: https://docs.google.com/document/d/1-kTj3QhCbzT47-dReqpgVCBN_YuPy3hqxAMp94KcnZ0/edit. After we save and go to the FTP service, I have filezilla, find the storage location for your site and copy the index folder to your file on the server, replacing the current files. Next, we load all 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 you're done!
Join and ask questions:
Download three free Muse templates: http://website/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 - start animating vector illustration in Edge Animate
14:06 - create a movement with the paws of the character
16:54 - nested character benefits
17:48 - what is a nested symbol
18:24 - prescribing a looped animation
19:42 - looped animation is ready
23:40 - create blinking eyes
26:54 - determine the names of the files when saving
27:57 - animation of the "drop-down" text
28:39 - attaching a motion curve - changing the axis of the animation
30:03 - animation subtotal, creating a snowy landscape and animating a snowflake
33:39 - Edge Animate overview
34:52 - homework
35:25 – how to add an active link
39:09 - create multiple buttons and attach links
Join and ask questions: http://vk.com/adobeedgeanimate
Adobe Edge Animate - website animation tutorials
Animation for the site has long been a good and effective way to present the necessary information. Agree, it is much more pleasant to look at a beautiful, moving composition than to perceive a static, motionless picture. And the click-through rate is higher, and for the design it can be a good plus, and the prices for such work can be completely different. So, the advantages of animation are obvious. It remains a trifle, to learn how to do this very animation.
Previously, the word animation was strongly associated with the concept of Flash. A good format, which has ample opportunities, is quite convenient and understandable in work. But, it just so happened that this technology has not received distribution for modern devices. Yes, many browsers support it, but apple devices do not have the necessary software on board to display flash. Well, the guys did not share the sphere of influence. And if so, webmasters need to learn other methods for creating animation. The concept of adaptability is now a prerequisite.
So a new markup language has appeared, called HTML5, which can give developers almost unlimited opportunities for creativity. Many have already mastered it, but, as usual, for full and effective work, you need a program that would implement all these features in a convenient format. This is such a program.
The capabilities of the Adobe Edge program are quite wide. Here you can also create a banner with any animation effects. You can make a beautiful screensaver for the main page, buttons, menus, for a variety of children's and gaming resources - the field for creativity is the widest. So, whether you like it or not, it is desirable to master the program. Moreover, the interface is quite simple, understandable, there are no particular difficulties in mastering. There would be a desire.
For those who are not ready to immediately pay a tidy sum for the Adobe Edge program, you can try to work with the trial version of the program, which, of course, can be downloaded from the Adobe website. During the trial period, you will be able to decide whether this program is right for you. For those who do not yet have sufficient funds, you can easily find a shared version of this program. Our craftsmen work quickly, and you can always find the newest version on the same torrents. How to act, everyone determines for himself.
Mastering the Adobe Edge program is, in principle, a fairly simple procedure. Those who have worked with Adobe Flash can easily figure it out. But, in any case, simple and understandable lessons for working with this program will not interfere. After some searching, I found several such video tutorials that will allow anyone to master this program in the shortest possible time. I made a selection for myself, but, as usual, if it is useful to anyone, I will only be happy.
This tutorial shows you how to create a new project in Adobe Edge Animate and save it to your computer. What files the program generates when creating a new project.
In this tutorial, you will get to know the workspace of Edge Animate, get to know all the necessary panels and interface buttons.
Watch a video on Adobe Edge Animate
The first part of the tutorial on creating your first animation in Adobe Edge Animate. The author of the lesson, Valery Medvedev, simply, clearly and thoroughly shows all the necessary actions and the meaning of the control panel buttons.
Watch a video on Adobe Edge Animate
In this tutorial, we will finish creating our first animation in Adobe Edge Animate. The result was a simple clip, which, nevertheless, makes it possible to get acquainted with the initial necessary techniques for creating animation.
Watch a video on Adobe Edge Animate
In this video, we'll learn how to view an animation created with Edge Animate in a web browser. A little information about HTML5.
Watch a video on Adobe Edge Animate
An interesting example of animation when a rocket takes off at a certain counter value.
Ready trigger code:
timeCount = 5; sym.$("counter_txt").html(timerCount); tCounter = setInterval(timer, 1000); function timer() ( timerCount -= 1; if (timerCount< 1) { sym.play("start"); clearInterval(tCounter); return; } sym.$("counter_txt").html(timerCount); }
timeCount = 5 ; tCounter = setInterval (timer , 1000 ) ; function timer() timerCount -= 1 ; if (timerCount< 1 ) sym. play("start"); clearInterval(tCounter) ; return; sym. $("counter_txt" ) . html(timerCount); |
Watch a video on Adobe Edge Animate
How to make button state change on mouse hover. Required code for mouseleave:
sym.getSymbol("goBtn").stop("normal");
Watch a video on Adobe Edge Animate
You can easily embed YouTube videos into our animations. How to do this, we consider in the lesson. Required embed code:
var youtube = $("
Watch a video on Adobe Edge Animate
How to make the animation start playing only after the user scrolls the page to the right place. We do it using an example project in Adobe Muse. Set up the starting position for launch.
Watch a video on Adobe Edge Animate
How to make the image rotate 180 degrees around the vertical axis when hovering the mouse.
You can download the necessary files and codes.
Watch a video on Adobe Edge Animate
We create an interesting effect when, when moving the mouse over the video, each element moves independently.
Watch a video on Adobe Edge Animate
How to make the desired logo rotate around its axis. Unfortunately, the logo turned out to be unclickable.
Watch a video on Adobe Edge Animate
How to add sound on button click.
Watch a video on Adobe Edge Animate
As you can see, there is nothing complicated, everything is simple, understandable, so to speak, intuitively. But you can add spectacular and colorful elements to your sites, it all depends on your imagination. Yes, and with customers, you can discuss options for additional payment for such modern elements.
Good luck to everyone and creative success!
To prepare HTML creatives for placement in ADFOX, it is important to comply with the requirements for inserting the code that processes the click on the banner and counts the events in the banner.
When developing HTML code, you can use the editors for which this instruction is written:
- Adobe Animate CC;
- Google Web Designer;
- Adobe Edge Animate CC.
Prepare your project with the following requirements:
1.
The maximum allowable number of characters in the HTML code is 65,000;
2.
JavaScript and CSS should preferably be placed inside the banner's HTML code;
If the resulting HTML code exceeds the maximum allowed number of characters, then it is necessary to reduce the code by moving JavaScript and CSS into separate files:
- save js and css code in separate files with .js or .css extension;
3.
There can only be one .html file in a project;
4.
The maximum allowable 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 valid for files inside the archive):
- 300Kb;
- 1Mb for video files.
7.
File names must contain only numbers or letters of the English alphabet, underscores. It is not allowed to use Russian letters, spaces, quotation marks and special characters in the file name;
8.
Russian letters cannot be used in the names of variables and objects.
The only exception is the text on the banner.
9.
The format of the finished project - zip archive.
1. Editor preparation.
To create a new project in Adobe Animate CC, select the "HTML5 Canvas" project.
The code of this template can be used as a basis for creating creatives in the editor.
To apply a template to a project, in the publish settings, select "Advanced Publish Settings -> Import New...".
Template contains script adfox_HTML5.js
3. Click handling
If the creative has a looping 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 to navigate with different links, add the main button for clicking on the banner in the top animation layer, give the button an instance name (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, when clicked, the user is transferred to different pages of the advertised site.
Place some buttons on the top layer above certain parts of the animation, give the buttons instance names (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 mouse over- javascript event, n- event number from 1 to 30, which should be called.
To implement a looping animation in the creative in Animate CC:
- set the "Loop Timeline" option in the publish settings;
- use codes for buttons from this section, and codes for ordinary buttons from points 3.1 and 3.2 must be removed.
Creative code with one button and looping animation:
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.stopCycle = true; )
If there are several buttons, then in the ADFOX event call code, 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, which should be called.
Transparent buttons can be used, for example, if you need to make the entire area of the banner clickable or only a part of it. For them, as well as for ordinary buttons, a transition or event call code must be added.
Buttons in Animate are symbols that contain four frames. You can leave the first three empty and only fill in the last "Click" ("Hit") by adding content (a graphic element) to it via Insert > Timeline > Keyframe (Insert > Timeline > Keyframe).
The contents of the "Click" (Hit) frame are invisible and define the area of the button that responds to the click. You can add content (graphic element) to this frame through Insert> Timeline> Keyframe (Insert> Timeline> Keyframe). If the rest of the frames are left blank or invisible, the button on the Stage appears translucent blue and has the shape of the content contained in the next "Hit" frame. When publishing the project, the transparent blue area will not be visible.
To make the banner stretch along the width of the container in which it will be located on the site, make the settings: Select File > Publish Settings.
in taba 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 the content to fill the available screen space while maintaining the aspect ratio. So if the maximum width has already been reached, then the screen height area may remain empty and vice versa.
If you cannot achieve the desired result using the program settings, use scripts.
Here are examples of codes:
Download code for scaling with aspect ratio.
Download code for scaling without aspect ratio.
Download code for positioning elements where an0..an4 is the Instance Name of the elements.
If you want to display a banner from the 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. Project publication.
Important! When previewing a project in a browser via (Ctrl-Enter | Cmd-Enter) links in file names in HTML are appended with random values of the form ?1468231208369
. Such values must be excluded from the project when it is loaded into ADFOX.
For 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
The code of this banner can be used as a basis for 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 handling.
All events are assigned to specific animation elements through the Events tab.
To invoke actions, use the "Click Area" component.
Add it and select an event "Hitable Area" - "Touch/Click"(or "Tap Area > Touch/Click" in the English version). 
In the "Custom code" tab, specify the click function call.
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 to be called.
To make the banner stretch 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 options "Align to Container" And "Rubber layout" on the top toolbar.
If you enable Fluid Layout before using any of the alignment tools, then when the parent container is resized, all elements will align with each other and with the dimensions of the container.
In this case, you can simultaneously use both the relative sizes of elements in percentages and the absolute sizes - in pixels.
4. Project publication.
When adding a banner to ADFOX, the manager will need to know the correspondence between buttons and event numbers. For each event, the manager will prescribe its own transition link, which will then be passed to the banner code using a variable.
After publishing the project, zip it in the format .zip. Your creative is ready to be uploaded to the ADFOX banner.
To get started, run the file with the extension .an from the archive.
2. Click handling.
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 register a call to the click function.
Buttons must be assigned an instance name (Instance Name), for example: btnMain, btnRight.
2.1 If one jump button is used:
callclick();
2.2 If there are multiple navigation buttons:
callclick(n);
Where n- number of the event to 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 to be called.
A feature of the implementation of a stretching (rubber) banner.
In order for the banner to stretch along the width of the container in which it will be located on the site, when preparing the banner in the editor on the Properties panel, 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. Project publication.
The project should be published with the following settings:
After publishing the project, zip it in the format .zip. Your creative is ready to be uploaded to the ADFOX banner.
For more than seven years I have been working remotely with foreign customers from the USA, Canada, Australia, Germany and other countries. I draw graphic resources and animation for games in Adobe Animate CC. The editor used to be called Adobe Flash Professional CC.
On an old blog, I started a similar cycle of lessons, but instead of continuing there, I decided to rewrite everything again in order to share new experiences.
Why do we need another cycle of lessons about drawing in Adobe Flash? I have been doing this for many years and I believe that my experience can be useful for beginners. Especially for those who have never drawn with a graphics tablet before. If you draw well on paper, but have never drawn on a computer, then I definitely have something to tell you.
And for those who can’t draw on paper, I’ll try to explain how you can develop this skill as a whole, without being tied to a graphic editor: building perspective and composition, choosing colors, shading and other topics.
It doesn't matter if you can draw, you will need tools: devices and programs. Let's start with the hardware. You already have a computer, but you still need to connect a graphics tablet to it, which will give us the opportunity to draw on a virtual canvas that exists in RAM. In other words, this is another input device, like a mouse or trackball. But the tablet has advantages that allow you to draw as if on paper. These are pressure sensitivity and a pen-like shape of the manipulator.
There are many manufacturers of graphics tablets: Wacom, Genius, Huion. I've only encountered the first two. In total, I've already tried four Wacom tablets and one from Genius when I started. I highly recommend Wacom - it's high quality for a reasonable price.
If you don't have the money, don't buy the Genius, get the most affordable small used Wacom Bamboo Pen. I used almost the same model Wacom Bamboo Pen&Touch S CTH-460. There were no critical problems for seven years of use, a good device to start with. If you can allocate more money, then take a larger model. I am using Wacom Bamboo Fun Pen&Touch M CTH-670.
I will explain what some numbers and letters in the name mean to make it easier for you to navigate in the company's model park.
Wacom Bamboo Fun Pen&Touch M CTH-6 70
When you draw, the active area of the workspace is very small. In other words, the stylus constantly slides in a radius of a small circle. This circle may move slightly. Over time, a stain forms, which is visible as a dense accumulation of micro-scratches. It shows that you practically do not use the peripherals of the device, everything happens in the center.
It can be assumed that a large graphics tablet is not needed, since you will never use its entire working area, and the activity spot will be the same size as on a smaller model. But it's not.
When you work on a tablet, its active area is projected to the full width of the monitor. Therefore, the larger the tablet, the more accurately you can apply strokes. Conversely, the larger the monitor and the smaller the tablet, the more difficult and uncomfortable it will be for you to draw. From experience I can say that after switching from size S to M when working on a 29-inch ultra-wide monitor, I began to work 25-30% more comfortably. It takes me less effort to draw a complex path, and overall the interaction feels softer and more enjoyable.
Larger graphics tablets should provide even more comfortable working conditions, but I have not had to work on L-models, I can only assume.
Buying a pro model, you get a wireless device made of higher quality plastic with 2048 levels of pressure sensitivity versus 1024 for cheaper models, a beautiful design, additional controls in the form of buttons and a touch ring. I am completely satisfied with the younger outdated models of the Bamboo series, which are discontinued. The difference in cost between amateur and pro versions will be more than two times. The table will put everything on the shelves:
Before connecting the device, download the drivers from the official Wacom website.
| List of models | Link to drivers |
|---|---|
| Intuos CTL-4100/6100/4100WL/6100WL Intuos Pro PTH-451/651/660/851/860 One CTL-471/671/472/672 Intuos CTL-480/490/680/690 Intuos CTH-480/490/680/690 Intuos 5 PTK-450/650 PTH-450/650/850 Intuos 4 PTK-440/640/840/1240/540WL |
Windows macOS |
| Bamboo Pen&Touch CTH-460/470/471/660/661/670 Bamboo Pen CTL-460/471 |
Windows macOS |
After connecting the tablet and installing the drivers, launch the application Wacom Preferences, which can be found through Windows search (Win + S) or in the control panel.
The main settings of the company's tablets do not differ, both amateur and professional models are configured in a similar way.
On the tab Tablet you can customize the tablet for the right and left hand, as well as assign actions to the keys. First install them in Disabled, over time it will be possible to assign hotkeys. 
On the next tab pen important parameters are:
In the same tab in the section tracking press the button mapping... to set how the tablet work area is projected onto the monitor screen. A window will open Pen Mode Details.
In chapter Screen area choose Monitor, if you have several monitors and specify the main one. If there is only one monitor, then leave All Screens
.In chapter Scaling be sure to tick the box Force Proportions so that the client area does not stretch when projected onto the screen. In this case, part of the working area of the tablet will not be used, but we will have normal proportions of 1 to 1. And if you draw a circle, then it will be displayed on the screen as a circle, not an elongated ellipse.
Be sure to check the box next to Use Windows Ink for pressure sensitivity to work.
On the next tab Touch Options uncheck the box opposite Enable touch input to switch your tablet to normal mode.
On the other tabs, I have everything disabled, since I do not use either Touch mode gestures or the branded drop-down menu. This completes the graphics tablet setup.
Adobe Animate CC is a rebranding of Adobe Flash Professional CC with several new features added to the program. Even with the old name, it has gained immense popularity among artists, animators and indie game developers. Vector principles of construction allow you to create sprites for any resolution. Any version you can get your hands on is fine for drawing. Drawing tools have not changed for many years, but only slightly improved. I'll be using Adobe Animate CC, but what I've written will apply to older versions of Adobe Flash Professional as well. By the way, Adobe has recently switched to a monthly subscription model to gain access to its products instead of expensive one-time licensing. Currently, the price for using Adobe Animate CC is $20 per month.
After loading, create a new file and select the type Action Script 3.0. In the same window, you can specify the scene parameters:
These settings can also be changed after the document has been created. To do this, select a tool Selection Tool(hotkey V), open window Properties and expand section Properties. If you cannot find this window, then use the menu Window → Properties or by pressing Ctrl + F3.
To increase work efficiency, you need to use hotkeys to the maximum. In the early stages, it takes getting used to and learning new key combinations, but it provides a solid jump in your efficiency in the long run. I've redefined most of the hotkeys to be on the right side of the keyboard. Why exactly on the right? The fact is that I am left-handed and, accordingly, it is more convenient for me. If you are right-handed, then you will have to come up with your own scheme. Also, I use the Rapoo E9050 and Apple Wireless Keyboard, which are laptop keyboard form factors, so if you're using a full-sized one, then again, work hard and come up with your own scheme - it will pay off in a lot of time saved - and consider my scheme, as an example.
Get the idea: group key commands on the comfortable side of the keyboard for quick access without constantly changing hand position. Most of the time it should lie in one place, only the fingers "walk" in a small radius, pressing the buttons. Of course, there will be teams that demand a change of position, but they are in the vast minority. Here is my schema:
| Team | Description | old combination | New combination |
|---|---|---|---|
| Select All | Choose all | Ctrl+A | Ctrl+A, O |
| Deselect All | Remove selection | Ctrl+Shift+A | Ctrl+Shift+A,P |
| Undo | Undo action | Ctrl + Z | Ctrl+Z, [, Z |
| redo | Repeat action | ctrl+y | Ctrl+Y, ] |
| Zoom | Scaling | Shift+Z, Z | Shift+Z,\ |
| zoom in | Enlarge Image | Ctrl+=, Ctrl+Num= | Ctrl+=, Ctrl+Num=,= |
| zoom out | Zoom out | Ctrl+=, Ctrl+Num= | Ctrl + -, Ctrl + Num -, - |
| straighten | Straighten selected curves | 9 | |
| Smooth | Smooth Selected Curves | 0 | |
| Flip Horizontal | Flip Horizontally | F | |
| flip vertical | Flip Vertical | Shift+F | |
| Cut | Cut to clipboard | Ctrl + X | Ctrl + X, X |
| Duplicate Symbol... | clone symbol | ctrl+d | |
| Swap Symbol... | Change symbol | Ctrl+] |
In most cases, new combinations do not replace the old ones, but complement them, several new commands are introduced. You need to make settings through the menu Edit → Keyboard Shortcuts.... In the search field, enter the name of the team, in the column Shortcut click on an empty space opposite the desired command and press a new keyboard shortcut.
Do not try to understand the commands given in the table, all of them will be explained in the following lessons. In the future, when you start to actively use them, most likely you will redefine them several times until you find the most convenient option.
brush tool(hotkey B) - the brush tool, the most used when drawing. Settings are concentrated in two windows:
The brush setup is finished, let's paint something.
Pick a suitable color using the Color window (Ctrl + Shift + F9), select the brush tool (B) and start with one long stroke with a little effort to outline the future shape. Then circle the resulting outline to smooth out all the bumps - the brush is ready.
Note that only three strokes were used in the example above. You want to aim for medium-length strokes so that your hand doesn't leave the tablet. Try to make many small strokes incorrectly, as the resulting contour will not be smooth and with a lot of extra points.
Adobe Animate CC works on vector principles. All objects are described mathematically and can be scaled without loss of quality, in contrast to the raster approach. This allows us to manipulate vector objects, which we will never do with the same ease in a raster editor. We can smooth and simplify paths, straighten curved lines, change proportions and deform graphics without losing quality. Each stroke is automatically converted into mathematical curves that we can fine-tune and modify.
To verify all of the above, activate the tool subselection tool(hotkey A) and select the brush you just painted. Now you can see the points of the vector path and even change them.
Today we have set up Adobe Animate CC and are ready to start drawing. Practice a little before we continue. Learn how to draw simple geometric shapes without distortion, try different colors and brush settings (experiment with the Smoothing option).
Similar content
