1. Many students today are visual learners and little
inclined to study printed materials or text-based
online courses. Animations can serve as effective
multimedia tools to engage these students while
facilitating and enhancing the student learning
experience by explaining difficult concepts through
visual means instead of the traditional way of
heavy textual based presentation.
Aravinthan, V., and Worden, J., “Animations as a Tool for Enhancing
Teaching and Learning Outcomes in Civil Engineering Courses”,
40th ASEE/IEEE Frontiers in Education Conference, 2010
5. Creating the Resources
Original PowerPoint from surgeon, Chris Webb,
consisted of static diagrams and text with notes
Short
Introduction
1. Identification of
cancer types and
skin flap types
2. Case studies
3. Surgical
procedures
7. Creating the Resources
Example of slide from cancer type identification section
Banner
Title and
instructions
Roll over
images
Notes to
acompany
images
12. Features which enhance Learning and Teaching
• Navigation buttons (forward and back)
• Mouse over thumbnail images to reveal larger
image with explanatory text
• Button for audio narration
• Multiple choice picture quiz with feedback
14. Features which enhance Learning and Teaching
• Animation slider control
• Pop-up key for graphics in the animations
• Pop-up info boxes trigger jumps to frames in
the animations with overlaid annotations
• Video linked to animations
16. Pros and cons
Flash not available on There are alternatives
Mac devices
HTML5 will replace HTML5 not ready. Many years yet before it becomes used
Flash generally. Many users will be slow to adopt HTML5 browsers
Animation is time ...but enhances learning and teaching of difficult concepts.
consuming... Elements of animation can be reused in other contexts.
The cost of ...but unique resources such as the one I have developed can
producing resources generate revenue for the University
is higher...
Using an in-house ...there are other do-it-yourself options such as Xerte.
developer is not
always possible ...
18. Any questions?
Bob Read
Dept. Of Cellular and Molecular Physiology / e-Learning Unit
University of Liverpool
bobread@liv.ac.uk
19. Students receiving the animated pedagogical agent
(teaching assistant) with visual prompts performed
significantly better than those receiving verbal
prompts and the text condition only.
Yung, I., H., “Effects of animated agent with instructional
strategies in facilitating student achievement of different
educational objectives in multimedia learning”, Journal of
Educational Multimedia and Hypermedia, 18, 4, 2009, 453-
466
Hinweis der Redaktion
I have started with text taken from a talk about using animations to engage students on a Civil Engineering Course. Animation is a powerful tool for learning and teaching across all disciplines and I will be talking about a resource we have created in the E-Learning unit to help medical trainees increase their skills and knowledge of surgical techniques.
Paul Duvall from the e-Learning unit will talk about how the project came about and then I will go through the process of creating the resources.I will then show you the features of the finished resources and talk about the pros and cons of using animation in learning and teaching.Finally, there will be about 10 minutes at the end for any questions.
Paul Duvall from the e-Learning Unit will now explain the background to the project
I will now talk about the process of creating the resources.
I received a template in the form of a PowerPoint from skin cancer surgeon, Chris Webb.There was a short introduction followed by three main sections.1. Identification of cancer types from photographs and skin flap types from diagrams.2. Case studies of three patients with photographs.3. Description of the possible surgical procedures with diagrams.
In addition to the PowerPoint I received some video clips of Chris performing reconstructive skin flap surgery with his own commentary.
In this example from the PowerPoint, you can see that there is a banner at the top containing an image and the University logo.The content below the banner contains five images with an instruction to roll over each one to learn more. Chris had also added a large amount of text which was intended to be displayed when the mouse cursor is moved over the image.
In this example from the PowerPoint you can see that there are three diagrams to illustrate how skin flaps are moved during the surgery together with some notes.There was a key provided on another slide to explain what the colours and shading represented, but it was very difficult to visualize the actual movement of the skin by looking at these static images.For most of the procedures I had to use a combination of searches on Google and meetings with Chris to understand what was happening.I decided that the process would be best explained using animations for each procedure.
The first step in creating the resource was to decide how the resources where going to be presented. They potentially could be used for CPD outside of the University and so should be able to be displayed in VITAL and also work standalone outside of the context of a VLE.We decided that the content of the PowerPoint should be split into three units built using Adobe Flash. This software has everything we needed for creating the resources - animation tools, scripting for the interactive elements, tools for embedding video and can be played in different environments.The next step was the overall design which needed to be consistent across all the units. Anew banner was designed containing the logo and pictures of the University clock tower and Liverpool waterfront. This is contained within a master file which is reusable. A footer bar was added containing the module name and navigation controls
I will demonstrate the interactive elements shortly, but I first want to show you a quick video of the animation process.I first draw a line......and then bend it into a curve.I made a copy of the curve......and flipped it over.I then filled the shape with colour.[Ask Paul to stop the movie at this point]The shape fills an area of the timeline from frame 1 to frame 50. I have chosen a rate of 12 frames per second for my animation so it will last for slightly over 4 seconds.[Ask Paul to start the movie again]]I want my shape to change into a line, so I need to add a keyframe at the end......and then change the shape into a line by bending the curves.I then select shape tweening for the frames. Tweening is a short for In-betweening. Flash will automatically calculate the shape for each intermediate frame.
I will now show you the finished resource and demonstrate the features which enhance learning and teaching.
[Demonstrate the first unit at this point]The navigation buttons in the footer allow you to move forward or backward through the resource.Mouse over thumbnail images enable several types of carcinoma to be compared quickly and easily. Explanatory text is linked to each image. Large amounts of text on the slide are avoided by displaying it inside a scrollable box.There is a button for audio narration to cater for different learning styles.A multiple choice picture quiz tests the users knowledge. On clicking an image, feedback is given in a pop-up window.
[Demonstrate the second unit at this point]Additional information buttons expand on the key points. This avoids large amounts of text on the slide and the extra information may be skipped if the learner is reviewing the resource and is familiar with the material.
The ‘Play Animation’ button starts the animation from any point and the slider control can be used to go directly to any point in the animation or can be dragged with the mouse to play quickly or slowly, forwards or backwards (a process called scrubbing!).A pop-up key explains the graphics used in the animations which can be shown at any time.When there is an additional information button, this can be linked to a frame in the animation containing overlaid annotations. This avoids having explanatory text and symbols in the animation during playback.When there is accompanying video, a button can be clicked to switch between the animation and the video.
I will now go through some of the pros and cons of creating resources using Flash.
Pros and consFlash swf files do not play on Mac devices.There are other alternatives such as Mac projector – A self contained program to play Flash without a swf file.HTML5 will replace Flash.HTML5 is not ready yet. It will be many years before it comes into general use. Many users will be slow to upgrade to HTML5 browsers. An authoring tool will still be required to create animation.Animation is time consuming.The extra time spent in development is worthwhile because of the enhancements to learning and teaching. Some difficult concepts may require a series of complicated diagrams which can be replaced by a single, easily understood, animation.The cost of producing resources is higher.Unique interactive animated resources can generate revenue which can offset the cost of producing them.Using an in-house developer to create resources is not always possible.There are other, less sophisticated, but easier to use alternatives such as Xerte.
