ap-3-11.dvi Acta Polytechnica Vol. 51 No. 3/2011 Practical Implementation of Animation for Students of Pedagogical Studies at MIAS CTU in Prague D. Vaněček, J. Jirsa Abstract This paper shows computer animation as a teaching and learning instrument in technical education. Our aim is to show good practice in creating computer animations. The paper includes an example, which can serve as a practical guide for teachers of technical subjects. Keywords: computer animation, education, e-learning. Introduction The main goal of this paper is to present didactic aspects of producing computer animations for use in education, to categorize types of animations andpro- vide examples. A secondary goal is to show an approach to cre- ating an educational animation bymeans of a simple example. The authors prefer a systematic approach to the creationof interactive components,which they consider to be an effective way of achieving the de- sired results. The first part of the paper will intro- duce the concept and will explain each step. Specific examples will be shown in the second part. Creating educational animation — design approach In the samewaythatweneed topreparebefore teach- ing a class, we need to have a method and to think things out before we can create the educational an- imations. If we are in too great a hurry, thinking only about creating an animation of some kind, the outcome is not likely to be truly effective. Trial-and- error usually leads to unpleasantly inconsistent re- sults. We should therefore study proven methods, and approach the general process of creating anima- tion as a project divided into several stages. The project can be broken down into the following basic phases: • Analysis • Concept • Realization • Piloting • Completion • Testing Note that these phases are very similar to the prin- ciples and approaches used in any systematic human activity. Analytical phase In thepreparation stage,weusually consider the con- cept and display of the problem that is to be pre- sented. We decide which parts of the topic would be suitable for an animated display. In other words, we consider how the subject should be presented in or- der for students to understand it easily and be able to remember the important facts. The course de- scription is usually a useful starting point. We ask ourselves fundamental questions: whether the ani- mation should be just demonstrative, or whether it should be interactive with direct student participa- tion. A demonstrative animation enables the learner just to observe the issue under discussion, and on this basis to form an idea and acquire knowledge. We also consider the choice of an appropriate tech- nology, whether it is available, or whether it is first necessary to acquire it and learn how to use it. At this stage it is worth investigating whether something similar does not already exist. In thisway, we can avoidmaking unnecessary efforts. Nowadays, a great number of ready animations can be found on the internet, in various forms. Time spent onmaking a search is definitely not wasted. Concept In the concept phase, our ideas should gain a more precise form. We should set basic forms of parts of animations, consider specific animated features, their properties and location in accordance with didactic principles. On the basis of the outputs of our analy- sis,weshouldchooseanappropriate softwareproduct for creating the animations. [1] The concept phase includes setting a detailed timetable for creating the animation. It is also neces- sary to decide on the process, and onwhowill create a specific animated situation, when and how. This proven approach is especially suitable when dealing 66 Acta Polytechnica Vol. 51 No. 3/2011 with a broad subject, which usually requires time- consuming processing. We also should considerwhen and how to incorporate the animation into a class or lecture (e.g., use diagnostic animations for recapitu- lation). Of course, if we want to present an anima- tion during a lecture, it is necessary to ensure that the classroomhas appropriate equipment. This may not always be easy. Realization The realization stage involves actually creating the animation. With the selected SWtoolwe create spe- cific objects, models and scenes according to our re- quirements and needs. However, even at this stage it is necessary to take into account the properties and capabilities of the software product. Depending on the possibilities, we can choose either to create the animation gradually, from the beginning to the end, or to create individual parts separately and then as- semble them into the final product. Piloting Before using the animation in the classroom, it is ad- visable to do some so-called piloting, i.e. initial test- ing of the product. Piloting is a notion drawn from preparing examinations — see [2]. Animations are submitted for criticism by a colleague (or by several colleagues) who did not participate in creating the animation. Another option is to test the animation with the help of senior studentswhohave already en- countered the problem that is to be presented, and are thus able to share their impressions and opinions. After piloting, deficiencies that had not been picked up, or that had been overlooked, can be removed. Completion The completion stage involves publishing the anima- tion. This can be done in various ways. In most cases, the product is published on the internet via webpages integrated into an electronic learning sys- tem (LSM) run by the school. This method is con- venient if we want the product to be accessible only to a certain number of students with an access pass- word, and not to the general public. If no e-learning system is available to us, we can try to create a sim- ple webpage and publish it. There are many tools available that can export an animation into a form that is relatively easily incorporated into webpages. Testing The last step should be to test our work. Initial testing is usually conducted with colleagues who can point out major deficiencies from the outset. Af- ter making corrections, we can proceed to piloting, where we test our project on a group of students. After piloting the pages with animations, we pro- ceed to the evaluation stage, which takes the form of a discussion or a questionnaire. On the basis of the results, we again make appropriate adjustments and changes. Now it might seem that everything is ready. However, this would be a wrong assumption. Wemust realize that as theworld aroundus changes, the students also change. Thus we are faced with the task of re-checking the suitability of our created animation, in professional terms and in pedagogical terms — see [3]. The process of creating an animation In this second part of the paper, we will present a specific example of creating an educational anima- tion. For illustrative purposes, wewill present a sim- ple animation of the principle of the operation of a paternoster elevator. This animation might be used inmechanical engineering classes for high-school stu- dents. We will follow the steps listed in part one, with minor simplifications. Analysis Let us consider the following model situation: We are teaching a course on engineering and ma- chinery at a technical high school with an engineer- ing or electro-technical specialization. The audience that the animation is designed for consists of second and third grade students. The students are proficient with computer technology and the internet, andhave access to a school computer network. They can also log into a school intranet via aweb interface. If some of the students do not have an internet connection at home, the animation can be copied to a CDROM and given to the students. Before the era of e-learning, we used only text- books with pictures and photos as didactic tools, to- gether with regular blackboard and chalk, and for a few topics we had a videotape of a program from a public media broadcast. We also used to enrich the class with samples of machine parts, e.g. bearings, cog-wheels, etc. In order to enhance students’ education and in- crease their interest in the topic, we decided to use an animation of a complicated piece of machinery. A check showed that there is no available edu- cational CDROM meeting our expectations on the market. An internet search also did not reveal any sources where the topic was presented using anima- tions. We therefore decided to fill the void and to create an animation of our own. 67 Acta Polytechnica Vol. 51 No. 3/2011 Fig. 1: Sketch for an intended animation We can use ordinary computer technology owned by the school to create the animation. We will as- sume that the school has bought Adobe Flash soft- ware — see [4]. We chose this product on the basis of our previous positive experience. Concept Let us consider a simple animation, which will re- flect the essential features of the functioning of the paternoster lift. Wewill not go intomuchdetail. The constituents in the animationwill be relatively simple symbols, so that students can understand easily and will later be able to explain the principle and draw a scheme of the lift — see Figure 1. If we should find out later (e.g. during piloting) that the animation could be more detailed, it will not be a problem to update it and go into greater detail. For a simple representation of this kind, it would not be advisable to attempt to make the animation three-dimensional, because the work would be much more time-consuming. We would like to create the animation in a relatively short time, and with mini- mum effort. This is why we chose Adobe Flash. Its controls are similar to the controls of other graphic tools that arewidely used in computers. In addition, it is not difficult to understand the elementaryprinci- ples for creatingananimation, anda fairly computer- literate person should be able tomaster them. More- over, Flash contains several tutorials through which even a beginner can find out the possibilities and op- tions. In an animation we distinguish between static components, which do not change during the anima- tion, and dynamic components, which show certain changes, e.g.: • Motion (Motion Tween) • Shift • Rotation • Curved motion • Shape change (Shape Tween) • Color change • A combination of the previous options Adobe Flash supports this distinction between static and dynamic symbols, and offers three basic types of symbols to the user [4]: 1. for static symbols it offers the Graphic type, which can contain both graphics drawn by the user and inserted raster images and photos, 2. for dynamic symbols it introduces the Movie Clip type, 3. for creating buttons it offers the Button type. 68 Acta Polytechnica Vol. 51 No. 3/2011 In our case, we will use only the first two types, be- cause we want to create a demonstrative animation without any interaction with the user. Our symbols from Figure 1 can thus be divided according to the following table: Table 1: Choice of type for individual symbols Symbol Type of symbol in Adobe Flash Rotor Graphic Animated rotor Movie clip Cabin Graphic Cables Without type (line) / Graphics Let it be added for clarification that the symbol of the animated rotor contains a symbol for the ro- tor itself. The Movie Clip type is therefore usually composed of individual static symbols of theGraphic type. We can also see that the cables do not have to be represented by a symbol, but can be drawn completely freely with a line. The next step in our consideration of the design concepts for the paternoster animation should be to allocate the individual symbols to sub-layers. This is therefore a logical separationof symbolswith adiffer- entmeaning. However, there are also graphic reasons for this separation. We usually use it when we need to emphasize the correct order of the symbols on the screen, or for animations in which the symbols are supposed to overlie in a specific way. Adobe Flash fully supports layers, and even offers several different types of layers. Four layers of the following types are sufficient for our animation: • two layers of the Normal type for the symbols for animated rotors and cables, • a layer of theGuide type for the invisible line on which the cabin will move, • a layer of theGuide type for the cabinwhichwill move on the line from the previous layer. The names of the individual layers and the order of the layers will be described in the following section. Implementation The implementation is the process of creation, when we gradually create the sub-components with the use of Adobe Flash. Then we compose the sub- components into the final animation. The repetitive motif of the rotor canbeused to our advantage, since we need to draw and animate it only once, and then use it four times. For better orientation, we can fol- low the sketch presented above. In theprevious section,wegenerally indicated the types of symbols that would be appropriate for our components. We also allocate the symbols approxi- mately into layers so that they will make sense and will correspond with our ideas. The creation of the paternoster elevator is thus divided into the following implementation steps: 1. Customize IDE (Integrated Development Envi- ronment) 2. Draw the symbol for the rotor 3. Create the animated rotor — see Figure 2 4. Draw the symbol for the cabin — see Figure 3 5. Arrange the symbols into layers and distribute them on the canvas 6. Draw the guiding cables — see Figure 4 7. Create the line for the movement of the cabin 8. Create the animation of the cabin on the line 9. Export the animation into a format displayable on the webpage — see Figure 5 Fig. 2: Animation of the rotor Fig. 3: Motif of the cabin All these steps will be implemented in the IDE of Adobe Flash. In this way,wewill not need any other software tools. Piloting At this stage, the animation is already complete. Next, we should carry out initial testing and present the results of our work to someone who is unbiased, but who has knowledge of the topic and can offer objective criticism. We therefore ask a colleague to evaluate a demonstration of the animation. It is also 69 Acta Polytechnica Vol. 51 No. 3/2011 Fig. 4: Drawing of the guiding cables Fig. 5: Example of an export into an appropriate format good to approach some senior students, show them the animation and ask for their informal but impor- tant opinions. In both cases,we should consider their suggestions and make any necessary changes. The opinionswill probably not be the same. However, we consider that both groups of evaluators are impor- tant, and neither should be omitted. Completion Thework on the animationprojectwill be completed as explained above. We will modify our presentation in Flash for publication on the internet by saving it in anappropriate format. With the permission of the school network administrator, we will place it on the school intranet system where it will be accessible for the students. If there is a student who is unable to connect to the network from home (which will be- come highly improbable in future years), we can also save the animation on a CDROM. A CDROM can also serve as a backup. Testing The last stage is to test our animation and find out how useful the students consider it. In this step, the targeted group of students will discuss the anima- tion or respond to a questionnaire to let us know whether it was useful and whether it helped them to understand the topic better. After the evaluationwe can make further adjustments. As was already men- tioned above, we must not assume that our task is now over. After some time we should revise all the animations that we have created and consider their validity and purpose. In this waywe can ensure that we are keeping up with the latest didactic and pro- fessional standards. Conclusion The goal of this paper was to acquaint readers from the professional public with the topic of creating ed- ucational animations. This problem has not been dealt with theoretically before (the authors were un- successful in their efforts to find any relevant refer- ences). We have noted that many animations are being created without taking didactic considerations sufficiently into account. In our opinion, this is not a satisfactory approach. We have therefore attempted to bring some theoretical order into the issue ofmak- inganimations for e-learning. This could formabasis for further research on the theoretical bases for cre- ating educational animations. The paper endedwith a practical implementation of our theoretical prin- ciples. The topic is extensive, and it is obvious that the set of three papers presentedhere cannotdeal ex- haustivelywith thewhole topic. With theavailability 70 Acta Polytechnica Vol. 51 No. 3/2011 of user-friendly software, educational animations are now widely used, and will be used even more in the future. They deserve much greater attention than they have received until now. References [1] Jirsa, J.: Tvorba počítačové animace pro potřeby výuky technických předmětů, BP MÚVS ČVUT, Praha, 2009, ved. práce D. Vaněček. [2] Svoboda, E., Bečková, V., Švercl, J.: Kapi- toly z didaktiky odborných předmětů. 1. vyd. Praha : Vydavatelství ČVUT, 2004. 156 s. ISBN 80-01-02928-X. [3] Drahovzal, J., Kilián, O., Kouhoutek, R. Didak- tika odborných předmětů. Brno : Paido, 1997. 156 s. ISBN 80-85931-35-4. [4] Adobe Flash Professional [online]. 2009 [cit. 2009–04–20]. Dostupný z WWW: http://www.adobe.com/products/flash/ Ing. Paed. IGIP. David Vaněček, Ph.D. E-mail: david.vanecek@muvs.cvut.cz Czech Technical University in Prague Masaryk Institute of Advanced Studies Department of Engineering Pedagogy Horská 3, 128 00 Praha 2, Czech Republic Ing. Bc. Jan Jirsa E-mail: jirsaj@fel.cvut.cz Czech Technical University in Prague Faculty of Electrical Engineering Technická 2, 166 27 Praha 6, Czech Republic 71