2D Animation of Cellular Processes

Purpose:  To create an animation of a cell process and insert it into a presentation.  To consider the advantages and disadvantages of  an animation compared to a series of small multiples in conveying the concept of a dynamic process.

Overview:  Students will choose a cellular process such as mitosis, osmosis or DNA replication,  and create a simple 2D animation.  Then they will compare the use of an animation with the use of their frames individually by testing audience comprehension of the concept when the animation is used versus when the frames are used.


    Scientific Visualization:  2D animation
    Biology: Cells

NC Scientific and Technical Visualization Objectives:
3.00 Demonstrate and interpret basic computer skills and techniques.
       -Transport data among applications
5.01 Design and evaluate a simple visualization
5.02 Produce computer based concept visualization projects

NC  Biology Goals and Objectives

Goal 1:  Develop an understanding  of the physical, chemical and cellular basis of life.


Students will need a 2D drawing package such as CorelDraw or Adobe Illustrator to draw the frames for their animation,  the capability to produce an animation and a media player.  Corel PhotoPaint will work well.  Scion Image can also animate a stack of images but does not allow export in the avi format.  Once the animation has been produced students will need to create an explanatory presentation; either a PowerPoint or Web format will work.

Teacher Background

Please read the cell background information in Cell Presentation Lesson I.   Students in Biology classes study several dynamic processes in cells.  However, they often try to memorize the definitions for these processes without developing a clear mental image of what is happening.  Producing a simple animation by drawing an initial step of a process and then manipulating the picure to produce the other steps may help them to understand the process as a dynamic whole. Some biological processes from Biology 1 are listed below.  After doing the tutorial below students should choose a process to research and illustrate.   More advanced students may choose a more difficult process or try to incorporate more details.  The example problem in this tutorial  is mitosis illustrated with one chromosome.  The spindle fibers and many other details are left out.  Some students may want to use biology references and illustrate  more detail.  Then, students could discuss which animations are more effective for understanding the basic process.

Professional animation is done by large teams.  This requires a great deal of attention to detail so that continuity isn't lost.   When each frame had to be individually hand drawn a senior animator would produce key frames and then teams of junior animators would produce the in between frames needed for a smooth presentation.   This project was designed for students working individually or in pairs in order for each student to participate in the whole animation process.  A possible extension would be to challenge the class to produce a class animation where each student would produce one frame.  This exercise will quickly enable students to understand the challenge and teamwork needed for professional animation.

Although the processes being illustrated in this assignment are cellular, nearly photographic representations of the cell parts is not recommended.  Students will find that a more cartoon like representation can emphasize the concepts and important details better.   Of course, other scientific processes can be illustrated using these techniques as well.

Cellular   Processes:

mitosis (illustrated with two or more chromosomes)
meiosis with crossing over (more difficult)
contractile vacuoles (best after students observe in live paramecium or a video)
osmosis (diffusion of water through a semipermeable membrane - be sure animation shows random movement of particles)
DNA replication
Protein synthesis  (this is a fairly complicated process- much more difficult)
Function of a neuron (nerve cell)
Function of guard cells in plants


A very complete introduction to hand drawn cartoon animation techniques is  The Animator's Workbook: Step by Step Techniques of Drawn Animation   by Tony White, published by Watson-Guptill Publications, New York, 1986, 160pp.

A nice site explaining the phases of mitosis in detail with good pictures and movies: http://www.botany.utexas.edu/facstaff/facpages/ksata/ecpf96/9/index.htm

A graphic representation of protein synthesis: http://www.accessexcellence.org/AB/GG/protein_synthesis.html

A more complete explanation of protein synthesis with some graphics and links to other good sites: http://gened.emc.maricopa.edu/bio/bio181/BIOBK/BioBookPROTSYn.html

Neurons and how they function: http://www.epub.org.br/cm/n07/fundamentos/neuron/parts_i.htm

Text explanation of osmosis without many graphics: http://biology.arizona.edu/sciconn/lessons/mccandless/reading.html

Example Problem:  Mitosis Animation

In this example we will draw a cell and then manipulate it through the steps of mitosis.  We should end up with two cells identical to the first cell.
Each step will be one  frame in our animation.  Although the cell cycle is usually illustrated in Biology textbooks by showing the five phases: interphase, prophase, metaphase, anaphase, and telophase,   we will get a smoother animation if we also produce intermediate steps.  The less change between frames the smoother the animation will look.

Tools used: Corel Draw and Photo Paint:
1. Open Corel Draw and click on new graphic.  
2. It is critical theat each picture or frame we create for our animation be the same size and aligned in exactly the same way.  This alignment is called registration.  Frame size also controls the overall file size. Use the rectangle tool to draw a frame for your picture.  The rectangle will act as the outer boundary of each of your frames defining each frame's size and registration.  This way all of your frames will be the same. 

3.  Use the ellipse tool to draw an ellipse in the center of your frame to represent the cell membrane.   Make the cell big enough so that the nucleus can be clearly visible but small enough so that there is room for cell division in your frame. 

4.  Select the cell membrane using the pick tool and click once on blue to give your cell its background (fill) color. A right click can be used to change the color of the outline.  Now use the ellipse tool again to draw the nucleus.  Make its fill white to give  a clear background for the chromosomes.
5. Using the Freehand tool draw in the chromatin. If it is not already change the line thickness to hairline which is the thinnest setting .  During interphase chromosomes are long and uncoiled.

6.  This will be the first frame of your animation.  We will make each frame a different page in our Corel file. That way we can see the whole animation laid out, flip through it and make any needed adjustments before exporting each page individually for the animation file.  After completing a page use edit >select all > objects.  Then use edit>copy then flip to the next page by pressing the plus in the lower left corner and choose edit>paste.  Don't forget to save your file frequently.
7.  The first visible step in mitosis is that the chromosomes begin shortening and thickening.  To make the second frame of your animation copy the first page to a second page then on the second page delete your previous chromatin and use the freehand drawing tool to draw shorter, thicker Chromosomes. Once the freehand drawing tool is selected change the outline width from Hairline to .25. (Depending on your magnification you may need to increase the width several times to get a noticeable difference.) As the chromosomes become shorter and thicker you can see that there are two sister chromatids attached at the centromere.  Add sister chromatids.  This is your second frame.  Save the file and then copy this page to a third page.

8.   The chromosomes continue to shorten and thicken and  the nuclear membrane begins to dissolve as the cell moves into prophase.  You can turn the nuclear membrane outline invisible by choosing the square with the x in it at the top of the color palatte. Then draw grey hairlines to show the dissolving fragments.  Delete your old chromosomes and redraw with a 1 pt line thickness.  When a frame is complete be sure to save and copy to the next page before making the next set of changes. 

9.   In metaphase the chromosomes line up on the equator.  You can use the pick tool to select the chromosomes and move them. By selecting one chromatid and then holding shift while you select the other you can select both and group them.   Click once and grab the x in the middle to move (translate) the joined chromatids chromosome.  A second click allows you to grab a curved arrow at a corner to rotate the selected object. 

10.   Next,  in anaphase the sister chromatids move apart and the nuclear membrane completely disappears. When the joined chromatids are selected you can click ungroup (in the center of the 3rd line down of the top menu bar) to separate the chromosomes. 
11. You can use the transparency tool to make the nucleus disappear a little more in each frame.  Select the nucleus.  Then select the transparency tool.  Now up in the top menu bar there is a box indicating transparency type.  Change it from none to uniform.(You may want to experiment with some of the other effects too.)  Then adjust the amount of transparency with the slider to the right.  (This slider will not appear until a uniform transparency is selected.) The further to the right the slide is pushed the more the underlying blue will show through.  You can do this in one or more steps.  The more individual frames with smaller changes from the previous frame you create and save, the smoother your animation will be.

12.  In telophase the nucleus reforms and cytokinesis (the division of the cytoplasm) takes place. To show this you will need to  convert the ellipse that represents the cell membrane to curves.  Select the ellipse using the pick tool and then click on the convert to curves button  that will appear on the rght side of the properties bar.  Use the shape tool to select the point where the cell (plasma) membrane will pinch in.  Click on the word cusp on the left side of the properties bar.  This will allow the handles on the point you selected to be manipulated independently from each other.  Once a point has been changed to a cusp,  move it in and rotate the handles for a pinched effect.  To show the nucleus reforming make the fill less transparent. 

13.  Then use the knife tool , which is found by holding down the shape tool until the fly out bar appears.  Be sure that auto close on cut is selected.

       Click the knife tool where the cell pinches in on each side.  Then the pick tool can select each of the new cells and move them apart.

14.  The newly separated edges are straight.  Using the shape tool, click in the middle of the straight edge, then click to curve on the properties bar.  Then you can click on the straight line and manipulate it into a curve.  Continue to adjust the transparency of the nucleus as it reforms and show the unwinding of the chromosomes back into thin chromatin by making  them longer (using the shape tool) and adjusting  the thickness in stages back to a hairline. You finally end up with two daughter cells, identical to the parent cell.

15.  Now you should have at least 8 different pages in your file.   We will put these frames together into an animation.  You can get a preliminary idea of your animation by flipping through your pages.  Check carefully to be sure that each frame looks the way you want it to.  Remember the more frames you make with smaller differences between them the smoother your animation will look.
 16. You will export each page to a TIFF (Tagged Image File Format).   Start on page 1.  On the top pull down menu choose file>Export.  A dialog box will pop up.  Change the file name to mitosis1 and the type to TIFF Bitmap. Click Export. Another dialog box will pop up.  Choose paletted 8 bit, a 1 to 1 size ratio, a resolution of 75 DPI, normal anti aliasing and 256 fountain steps. Click ok.  The file will be exported.
17. Switch to page 2 and repeat changing the file name to mitosis 2.  Repeat for each subsequent page changing the file name each time. 
18. Open Corel Photo Paint.   Open your first frame,  mitosi1.tiff.  On the top pull down menu under movie, choose create from document.  Your frame will now appear as frame 1 in an avi file.
19. Under movie, select insert from file and choose your next frame.  Continue until you have inserted all of your frames.  Insert a blank frame at the end of the movie. 
20.  Using  Movie > controlplay movie you can see your movie at any time.  It will play continuously until you choose Movie > Control > stop movie.
21. Using  Movie > frame rate, will cause a dialog box with the time for each frame displayed.  Adjust the first and last frames (not your blank frame) to display a little longer.
22. When you are satisfied with your movie save it in avi format.  Now your movie can be played alone or inserted into a powerpoint  or web page.


Student Assignment Sheet                                                                        Name______________________

Part I:  Familiarize yourself with CorelDraw and the animation process by doing the Mitosis Animation Tutorial.

Part II:  Create your own animation:
1. Choose a cellular process to illustrate with a simple 2 D animation.
2.  Research the steps of the process.  Keep a record of your sources for your bibliography.  All sources - websites, books, magazines, etc must be documented.
3. Create a storyboard for each step of the process.  Each step will be at least one frame.  More frames with smaller intermediate steps will create a smoother animation. For this project your animation should have at least 10 frames.
4. Create the frames for your animation.
5. Bring the frames into an avi file.
6.  Make any needed changes in the timing of the frames. 
7. Save your movie. 
8.  Create a presentation explaining your animation.
9. Create an alternate version of your presentation without an animation, but with all the frames shown in sequence.
10.  Create a biblography listing all of your sources.
11. Develop 2 or 3 questions about the process you have illustrated to test audience understanding of your presentation. 
11. Test your presentations on groups of classmates.  After showing them the presentation and getting their comments ask the questions you developed to test understanding. 
12.  Discuss the differences between the two versions of the presentation.  Is animation a useful learning tool?  Which presentation conveys the dynamic nature of cell processes better?  Which is more interesting?  Which is easier to understand? Write a brief summary (1 or 2 paragraphs)of your discussion and findings. 

Evaluation Criteria:
tutorial animation completed and works
storyboard shows overall animation design 10
process well researched 
Individual frames
  - use a common frame size and registration
  - use of color  attracts viewer
  - appropriate level of detail in graphics 
frames brought into animation
animation shows process clearly -focus is on relevant scientific details
animation is smooth - enough frames are used for process
timing adjusted 
avi brought into explanatory presentation (power point or web page)
explanatory text clearly visible
scientific process clearly explained
written discussion of animation versus stills format
Total  100


Link to Sample Project       Top of Page        Lesson Plan Menu


last updated 2/2/00