2D Animation/Background

Animation in Pencil2D are organized in layers. The background image is image in first layer other layers loke person icon is moved on top of the background layer. For the example animation following background image was used.

SIR Model - Animation
Background Image - Raster Image - PNG format


Learning Task edit

  • (Import Background Image) Import the background image on the right in the OpenSource software Pencil2D and rename the layer with the name "Background".
  • (Create Background Image in LibreOffice Draw) Create your own background image in LibreOffice Draw and export your own background image as PNG file.
  • (Background Image - Cover Details) In upper example with the GIF animation for the SIR-Model the objects are moved on top of the background layer. It is also possible to add details in the background image and cover the details with rectangle or lines on top the background image. This is also an option that you have in conjunction with background images. In the first slide some details in the background image are covered with a white geometrical object and in following frames of the animation the covered geometrical element is removed. This gives also the illusion that obejcts appear in the animation, but everthing is already defined from the beginning. This approach makes sense if details are static on the page and you just want to uncover the detail step by step in the animation. It saves some time for positioning the appearing details on the screen. If you want to move object then the cover-uncover method is not recommended. Analyse the AudioSlides4Web animation and identify which content elements are created by the cover-uncover method and which images are added with layers on the background.