The history of 2D animation

What did you copy at 1L? Be professional. It's all wrong.

The following cannot be copied, 1998 broke out too many bubbles and then burst, and many large Flash studios closed down one after another. Many animation studios try to apply their past successful experience on the Internet to TV business. At that time, it collapsed. Com makes many studios nervous. For Hollywood, it seems too risky to entrust the heavy responsibility to a new program like Flash. JibJab Media and other small companies still maintained a conservative fiscal policy in the late 1990s, and he tried to add value to his reputation in Flash in successful offline venture business (as shown in figure 1.8), such as TV advertisements, toys and children's books. As many small studios like JibJab Media grow up, large and small production companies begin to pay attention to their production processes and realize that Flash is a very powerful software. Slowly, after ten years of rough network animation, Flash finally began to enter the mainstream entertainment market. Although only a few programs currently use Flash as an animation tool, Hollywood has begun to pay attention to it.

1999 JibJab Media

Figure1.8 The diffusion effect of Jibjab animation Capitol Ill made the Spiridellis brothers famous.

Interview with Greg Spirid Liss and Evan Spirid Liss.

In order to take advantage of the unprecedented opportunity to spread their animation to all parts of the world through the Internet, the Spiridellis brothers who used to work in a garage in Brooklyn founded JibJab Media at 1999. Since the establishment of the company, millions of people have visited JibJab.com, and more than 500,000 people have subscribed to their newsletter. Spiridellis brothers have made online advertisements for many companies such as Sony, Kraft, Disney, Revlon and Cartoon Network. Their works are also broadcast on Fox, ABC, CNN, MTV, WB, Noggin, Nickelodeon and independent film channels. In the creative process, Greg is in charge of writing and Evan is in charge of drawing.

Q: Tell us about the birth of JibJab.

A: (Greg) I first met Flash in the business school of 1998, which was called Future Splash. The technology of streaming high-quality animation through narrow-band connection conquered me. Evan is making traditional animation, mainly stop-motion animation. I told him that he should take a closer look. The advantage of this technology is that it doesn't have to have an art foundation, so it is very practical. For only a few hundred dollars, you can spread your works to audiences all over the world. Evan will use it right away.

I graduated from Parsons School of Design in new york. When Greg introduced Flash to me, I already had my own job. Although I was working on planning a TV program at that time, I soon became convinced that the Internet was not only the future trend, but also the best way for me to show my strength.

(Greg) So when I graduated from 1999, we started JibJab. We can't choose a better time. In the next six months, major entertainment companies are ready to dabble in online animation. After only a few months, we naturally become experts.

Q: What's it like to run a Flash animation company in America? Com era?

A: (Greg) Many companies have greatly increased the amount of venture capital, and they use this money to gain the right to use our works. Because this is a brand-new industry and there are no rules, we have benefited a lot from it. Different from the traditional project sales method, we don't need to deal with bureaucracy and various standards, which are related to production costs. We just price the model and then authorize others to use the model that highlights our advantages. But the lack of standards can also lead to problems-you never know whether you spend too much or too little on a project.

(Evan) The first year was like riding a roller coaster. Today I feel that we are going to finish great work, and the next day I will worry that I will lose everything! Every time we make a decision, we feel that it is either success or destruction. Then we learned how to look at the ups and downs from day to day, so as not to waste our time in suffering.

Q: As a Flash animation company that started in the heyday of the 1980s. In the era of com, how did you keep running and succeed?

A: (Greg) At first, we made a profit by authorizing super-rich investors. Then, in the summer of 2000, almost all our customers closed down. So we changed our direction and focused on advertising. I read many business magazines and made many sales calls. If I see someone selling products in an advertising company, I will pick up the phone and introduce myself to them. We don't have any good luck with the agent. We signed a lot of profitable advertisements, and it is still our main source of income until now. In addition to advertising, we also increased the toy business on 200 1 and then grew up.

Q: Any suggestions for those who are considering setting up their own Flash studios?

A: (Evan) You must develop a unique sensitivity. You must give people a reason to choose you over others. If you compete on price, you can't survive. People hire you because what you do is different from what others think. You should work hard to produce the works you like, not the works you "think" others will buy. You should sit in front of the computer for a long time and enjoy it.

Use the Internet to expand your reputation-all business starts from word of mouth. Create something new and interesting, and then put your own name on it. Add a "Send to a Friend" button so that your audience can use the tools they need to help you spread the animation online.

In business, you should discuss the establishment of a limited liability company with your accountant, lawyer or financial adviser before doing anything. Before you sign any contract, you should let someone who knows their situation check it first. Don't get so caught up in endless negotiations that you forget that your real business is animation-not negotiation! For the new studio, the most important thing is to establish its own credibility. Customers are equal to credibility, so establish your customer list as soon as possible, and success is just around the corner.

(Evan) In addition, it is very important to choose business partners carefully. Use your intuition to judge whether you should trust those who promise to give you money. We have never encountered anything bad since we started our business four years ago, because we trust our intuition. If we don't like the people who give us the task, we will always avoid it even if they promise Jinshan Yinshan. There are many people who want to use independent producers now, so you must always be careful.

Q: You two turned one of your characters "Funny Santa Claus" (as shown in figure 1.9 and figure 1. 10) into a novel doll and sold it in Spencer's gift. How did you do that?

A: (Greg) Demand is the mother of innovation. When? Com has run out of funds, so we need to find another source of income. Every Christmas, millions of people watch our comic "Funny Santa Claus" online, and the question naturally arises, "What can we sell to these people?" We came up with interesting Santa Claus dolls.

(Evan) Greg found 10 toy companies online, sent them Santa's funny pictures, and said to them, "If you are willing to cooperate, please send us samples." We received these strange samples from all over Asia. One of the toys is very similar to Genghis Khan; Another toy has a pair of duck feet, but in the end we only chose one to match it.

(Greg) We need a considerable quantity to put the products into production, so we took the best samples to Spencer Gifts, a national chain retailer, on the seller's open day. We met a buyer and told her that more than 2 million people visit our website every Christmas and show her samples. She signed the order on the spot.

That was three years ago. Now we have a complete product chain, selling toys all over the United States, including Urban Outfitter. This year, these products even appeared in MTV's Osborne program, which is really a surprise for our public relations department.

This chapter will guide readers to browse the Flash interface and prepare for animation. If you are a beginner in Flash and are not familiar with its interface, you should take the time to learn Macromedia tutorials. There are many excellent books with the theme of Flash on the market, which can solve all technical problems about software.

2. 1 Timeline

If you have a traditional art background before using Flash, it will be easier to understand this software by comparing it with traditional animation. As we all know, animators need to take pains to turn their works back and forth to ensure the correctness of their movements. An animator sketching on the stage can see the interval between actions through multiple paintings at once. There is a function called "onion skin" in Flash, which artists can use to view any number of consecutive frames in animation. It works like a film table, except that the former allows the animator to view any number of pictures. The onion skin button is located below the time axis, as shown in Figure 2. 1. After clicking this button, you can use the gray anchor point on the timeline to set the number of frames you want to see.

Press Enter to see the appearance of the work. Select the Export command from the File menu to convert the work into QuickTime or AVI files for real-time playback, as shown in Figure 2.2.

You can also think of the canvas area as a drawing table with a timeline above the stage. You can move the timeline vertically or horizontally in this interface. Most painters will lock the timeline above their works for easy operation. By using the function keys listed one by one in Table 2. 1, you can control the appearance time of the screen. Press Enter to view the work.

Sandro Cossaro

Figure 2. 1 Using the onion skin tool, you can view multiple frames.

Sandro Cossaro in 2003

Figure 2.2 Export to AVI and QuickTime format files for broadcasting.

Table 2. 1 Add and Delete Frames

button

Working energy

F5

Add a static frame

Shift+F5

Delete frame

F7

Insert a blank keyframe

Shift+F6

Delete key frames

F6

Insert key frame

When adding or deleting static frames, you should click the red rectangle above the timeline, as shown in Figure 2.3. This is more convenient than selecting frames in the timeline.

Sandro Cossaro in 2003

Figure 2.3 When adding or deleting frames, you should click the label on the timeline.

Doing a basic exercise can help you get familiar with the concept of timeline. Think of each key frame as a piece of drawing paper, draw a sketch on 1 frame, then select the frame and press F5 several times. This allows the drawing paper to remain on the screen for the duration of these frames. If you want to change the image, you need a new drawing paper, so you should press F7 to add a blank keyframe. Select anywhere on this blank keyframe to sketch and press F5 to add more frames to it. Use F7 to place another blank keyframe, then draw a third sketch on the stage, and finally press Enter. Just made an animation prototype with Flash, as shown in Figure 2.4. Go back and adjust the number of frames in each sketch, delete some frames, and then add frames elsewhere to see what happens.

Figure 2.4 Simple animation with only 3 key frames.

Components are the building blocks of Flash animation. They not only play an important role in reducing the file size on the network, but also save a lot of time in making radio and network animation. Components are equivalent to those used when assembling animation. Think of Hannah Babela's cartoon "Flintstones", in which all the characters are assembled from small pictures that overlap correctly, and Fred's legs are also used on Barney.

1999 JWL

Flash stores components in the library, so you don't have to take out celluloid pieces to shoot under the camera. Using components in a complicated way can make a complete animation. Once the left arm is drawn and converted into a component, the flipped object can be used as the right arm. You can also lengthen this arm and paint it blue by clicking two buttons. Unlike its corresponding traditional celluloid, the assembly can be stretched, squeezed and tilted in many ways, as shown by the tree in Figure 2.5. Skillful use of these shortcut keys is one of the essential factors to become an excellent Flash animator. Most works use datum objects (such as characters sharing similar body parts) to speed up the production process. Chapter 6 will explain in detail the subtleties of components in Flash.

Sandro Cossaro in 2002

Figure 2.5 All these trees are the same components, but their colors and sizes have been adjusted.

You can change the components in the following ways:

● Color: You can change the brightness, Alpha value and opacity of the component in the properties dialog box.

● Size: You can tilt, scale and rotate components in the toolbox.

● Shape: You can edit the component by clicking its center. This will change the appearance of the symbol in the whole animation. You can split the symbol by pressing ctrl+B.

2.3 interpolation animation

Some people who talk about Flash think that it can magically help animators move target objects. These people must have overheard the word "tween animation". Flash can basically complete the animation between simple shapes and objects. Although Flash can help people move objects more easily than in the past, animators still have to have a good sense of time and speed to get natural motion effects.

The function that Flash provides to make an object transition from point A to point B is a double-edged sword. If used effectively, this function can really save painter's time. However, excessive tweening will unnecessarily increase the file size and make animation boring.

Learning how to properly grasp the transition time is as important as understanding this concept. In Flash, the animator can change the exposure time of any given element to create fade-in and fade-out effects, and can also use the tween animation function in Flash to make smooth animations for the brightness, color and transparency of elements.

Shape tweens can transform shapes from one keyframe to another. The simpler the shape in the keyframe (such as from circle to square), the smoother the deformation effect. The transition from a scribbled shape to a square will have a completely different effect, as shown in Figure 2.6.

Figure 2.6 Using tween shapes, simple shapes and colors can be changed.

The shape tweening function is particularly useful when creating a smooth shape transformation animation. Figure 2.7 demonstrates the method of making smiling faces by using shape tweening function. Starting from the mouth layer with blank keyframes, draw a point on the first blank keyframe. Add several static frames to this layer and draw a small pattern on key frame 5. Then select Shape from the drop-down list box in the Frame panel. The final deformation is a perfect smile animation. Shape tween functions can also be used for color transition, and they are excellent tools for making flame animation. Remember that tween shapes cannot transition components, groups or movie clips, and their keyframes must be simple vector diagrams.

Sandro Cossaro in 2003

Figure 2.7 In the last frame, the dot-shaped mouth becomes a smiling mouth.

Tween animation allows you to move components, groups or editable text from one location to another. Figure 2.8 illustrates this simple concept with an example of text floating. Create a symbol and put it in the frame 1, then copy the symbol into a blank keyframe and move it anywhere. Once the tween is created, Flash will move the symbol from the selected start point to the end point.

If you use the Tilt tool to distort the keyframes in the tween animation, the program will still create the tween frames. You can scale, rotate, and tilt instances of components. You can use the tween tool to just move objects from here to there, but the utility of this tool goes far beyond that, and its specific usage will be explained in later chapters. In chapter 8, we will explain the method of making tween animation for components on curved paths.

After exploring the wonderful world of tween animation, readers may find that there is an option called "Slow Motion" in the Frame panel, as shown in Figure 2.9. This function controls the acceleration of shape or tween animation. If you don't use this function, the tween animation will start and end at a uniform speed, and the animation effect will be dull and mechanical. In real life, there are no creatures moving at a uniform speed, and the animation with increasing speed will start slowly and accelerate gradually during the movement until the end. Slow-motion animation will start quickly and then slow down gradually until it is over.

If readers are unfamiliar with Flash, it is better to experience this function more, as shown in Figure 2. 10. Using the extreme values of acceleration and deceleration to make simple motion tween animation can form the perception of speed. This is an important concept to understand the weight and motion table mentioned in the following chapter.

Pivot element

Pivot animation is very similar to marionette, which is based on a series of anchor points. When making a component, the program will automatically calculate the center point of each object. When an object is converted into a component, a small crosshair appears on the screen. If you want to animate the pivot, the designer or animator must move the center point (the point around which the object rotates) to the appropriate position. This is a very important point to pay attention to when dealing with character animation. In pivot animation, it is usually that objects are mutually rotating points. For example, the hand rotates not around the middle of the palm, but around the wrist. When making hand components, you must use the Free Transform command to edit the center point. In the process of animation, the work of editing the center point of the component should be left to the role designer. In the next chapter, we will see that in the process of dealing with Flash movie animation, Flash role designers will play a vital role in the subsequent workload.

The hollow point in the center of the component defines the axis of rotation originally calculated. If you want to edit the calculated center point, you should choose the command Modify → Transform → Free Transform, as shown in Figure 2. 1 1. This command converts the component into a freely deformable object so that the user can manipulate its rotation point. At this time, the center point will become a white solid point, and the user can move this small point to the correct position required by the object, as shown in Figure 2.438+02. Now the component will move around the correct rotation point, and we can make tweens for it. If you are dealing with a complex character and can't judge the position of the rotation point, you should stand up and practice this action by yourself and feel the position of the rotation point through your body. A good feeling about the human body and weight will help to understand these concepts.

The free transform tool can not only be used for animation of articulated rotating joints, but also help to tilt keyframes. Figure 2. The characters in13 look left first and then right. When making an action animation to make him look around with suspicion, he must position his anchor point on the ground to get the result of looking to the right. Edit the center point first, and then stretch it with the tilt tool. By editing the center point of the character, we can express the movement effect without spending time drawing extra frames.

Flash animation is actually animation-Flash is just a tool that people use. The management principles of time, resources and creativity in the traditional production process are also applicable to animation production with Flash as the core. Using Flash as an animation tool has changed some production methods, but the classic production methods are still applicable. This chapter will lead readers to browse the specific process of making animation, but at the same time, it will emphasize those processes that are greatly affected by using Flash as an animation tool.

In the process of making animation with Flash, which production processes are most affected? Flash can be regarded as a front-end highlight, which means that the substantive content of the work is completed in the early stage of production, including the determination of mirror image, design drawing, asset structure and asset management. Creating an easy-to-use asset library not only takes a lot of time, but also is good at planning. The resources in the library need to be designed in a form that can be easily operated by animators. Most of the work of Flash animation is not as focused on animation as traditional 2D animation. The former focuses on the preparation of resources and all properties (including design, color and character structure).

These front-end factors must be considered when making schedules and budgets. As will be described in detail later in this chapter, the schedule of flash production must reflect the unique basic rules related to flash. Compared with traditional 2D animation, Flash cancels or modifies some processes, such as pencil test, but it also brings some new problems, such as making components and managing assets. Before making a timetable, you must be familiar with the unique steps of making animation with Flash. It will be a thankless practice to apply the traditional 2D animation mode to Flash animation.

Investors, operators and affiliated departments (such as marketing department) need to understand the uniqueness of adopting Flash production mode. Because Flash animation is a relatively new thing, they may just realize that this novel production method can save them money and time. Spending some time training them in the basic knowledge of Flash production may reduce misunderstandings in the future production process and guide them to form realistic expectations.

For animation production using overseas subcontractors (this situation exists in almost all TV programs), you must be familiar with the Flash production process used by foreign production companies. The advantages and disadvantages of subcontractors must be evaluated, because subcontractors may face many problems when delivering projects. If domestic production companies are strong enough to hire overseas directors, many problems that eventually arise in foreign production companies can be solved on the spot. In order to avoid wasteful rework, it is necessary for the production company to establish an open communication system with subcontractors. Some powerful production companies have set up internal optimization teams to adjust the external animation. If this is the case, the budget and timetable should reflect the internal adjustment process considered in advance.

Before establishing the schedule and budget, we must first make clear what kind of animation we want to do. Because every type of animation involves this problem, it is necessary to make preparations in advance. It is necessary to evaluate the personnel required for the project and the time required to complete the project. Animation style and the type of character design will greatly affect the project, and complex design and animation style need more time and manpower to complete. In addition, it is necessary to assess the material needs, such as office space, office supplies, equipment and food preparation. Does the project have a trade union background, some trade union background or no trade union background [①]? What are the results of different choices? You must also interview voice actors, artistic talents and key producers, let them audition for trial operation, or recruit new people.

3. 1 Make production plan

You must first understand the type of animation you are making, and then you can make an appropriate schedule and budget. What are the iron laws in the production process? These iron laws include delivery date, product form and length, animation technology, script content, payment plan, approval of production company, legal and authorization matters, office space requirements and recruitment and employment dates of employees. The iron law or constant factors in the production process will prompt what kind of restrictions can be made.

The form of animation can be feature film length, 7-minute, 1 1 minute or 22-minute TV series, short films, commercials, online animation, commercial breaks or animation breaks of mixed media works. The length of a work is usually determined by its form (for example, 1 1 minute TV series), but the length of a feature film-direct or cinema version is not fixed. The audio-visual version may be 60-70 minutes, and the cinema version may be 75-90 minutes or more. This book assumes that the main animation technology used is Macromedia's Flash MX 2004, but this software is an extensible tool, and it can also be used in combination with many other technologies. Users can easily mix Flash with 3D animation, real shots and other combinations. If the produced Flash animation is only a part of a large-scale work, we must also consider the link of putting/synthesizing other media into our own work (or putting/synthesizing our own work into other media) when making progress.

The budget and timetable depend entirely on what is included in the script. How many characters are there in the script? How many characters are there on average in each scene? How many different backgrounds are there in the script? Producers who use Flash as animation technology must be better at "reuse" (compared with traditional 2D animation). One of the most powerful time-saving tools of Flash is that it can reuse various elements, including characters, backgrounds, props or cartoons. If the producer is not familiar with the reuse function of Flash, he should find an experienced Flash animator to help analyze the script. He will be surprised to find that some things can be reused or become other objects by simply adjusting them here and there.