Character Animation with Callipeg & Lumafusion on iPad

1. Introduction: Hi, my name is Mélanie and I am co-creator of Callipeg. In this class, I will show you how I create a small shot of a character animation. In the process, I will use different ways to handle the timeline and the drawing sheets, the selection and transformation tools, the brushes and color. Finally, I will show you how to export your work in Callipeg and to import and use it in Lumafusion. You will find the Callipeg and Lumafusion files in the Resources area. Start with the Rough file if you want to follow along during the class. Let's start with the rough animation. 2. Rough: For now, I have only one drawing sheet in my timeline. If I go to the next frame, the Canvas is blank. To display the onion skin tap on the onion icon, on the layer. And now I can see the previous drawing outside of my drawing sheet. To change the onion skin parameters, go to the settings in the Onion Skin tab. I will change the onion skin as Colors to display the previous drawing in red. And the next drawing in blue. For the moment, there is no next drawing. So I can't preview my blue color. Double-tap on an empty frame to create a new sheet. You can also draw directly and it will create a new sheet automatically. If the Brush icon in the top bar is selected, tap on it to open the brush list. I choose a pencil brush to draw my rough animation. I will lower the opacity of the onion skin. Activate the lock if you wish to lower everything at the same time. In the pencil settings, I increase the smoothing value to improve the look of my line strokes. I will also use the pencil for the eraser, which has the same list of brushes. Now I want to flip my drawing horizontally to see if I made proportion mistakes. To do so, in the timeline, I tap on the menu icon and I choose the icon to select all the sheets in the layer. And then I tap on the selection or transformation icon in the top bar, and I choose the Transform tool in the sidebar. The first icon on the side will flip horizontally. I can tap either on the transform icon or on the selection or the brush to validate the transformation. With the selection tool I can isolate parts of my drawing to transform. To flip my drawing, I select all my drawing sheets, choose the Transform tool and flip horizontally. Now I see that the head is too small, so I will use the selection tool to isolate the head, switch to the Transform tool and move the anchor point from the center to the neck of the girl. That way I can scale the head from its base. To flip through your frames, you can drag the pencil or finger left and right on the timeline. But you can also use the flip tool in the floating menu. Touch the canvas with two fingers for 1 second to open the floating menu. Then drag the flip icon up and down to travel through your drawing sheets without having to open timeline. That way I can choose where I want to go with the ruler displayed on the left. To change the timing of the drawing sheets, I select the sheets I want to change, and in the action panel at the top of the timeline, I hold my pencil on the clock and choose the number of expositions. If I want to choose another number, I simply tap on the clock and enter the number myself. Now, each drawing is exposed during 12 frames, in this case, half a second. To create in-betweens, I will select all the drawing sheets and use the split tool. So I touch and hold on the scissors and choose 6. That way, each drawing sheet will be cut to last 6 frames and the newly created sheet will be empty. I could use the in-between tool, but it would extend the total duration by adding sheets in between. In this case, the last sheet is empty, so I will duplicate the first drawing sheet and place it at the end, double-tap on a sheet to select it, touch and hold on the duplicate icon and move it where you want to drop it. In the onion skin parameters, I switch all the drawings I don't want to see except the one before and the one after. For now, the flip is set to travel between every frame in the timeline. To flip only between drawing sheets, go to the settings in the Flip tab and turn the switch towards flip sheets. And now the ruler is much smaller and I flip only through each drawing. To change the timing of a drawing sheet manually, double-tap on it to select it and use the arrows to drag the extremity left or right. If you don't want to leave any holes in the timeline, Activate the magnet. And the drawing sheets will be pushed and pulled when a sheet is re-scaled. To delete a drawing sheet select it to open the action panel and choose the red bin. 3. Clean: Now that I finished and retimed my rough animation, I will start to clean. To do so, I need to create a new drawing layer. First, I will rename this first layer. To rename, I double tap on the name and I rename it Rough. Then I duplicate this layer without the content. And I get a second layer with the same structure, but with empty drawing sheets. I double tap on the name to rename it Clean. Now I lower the opacity of the Rough layer and I disable the onion skin. In order to clean, I will need to pick another brush. In the brush list, I choose the first brush and I try changing the parameters to see what I like. I increase the minimum size of the brush to get less size variation, which will come in handy later when I have to color inside the shapes. I also push the smoothing to 40. That way I can draw slowly while keeping a clean line. I will speed up the cleaning process because it would be quite long to watch. I will create a new drawing layer for the legs. I know that the legs don't move during the whole animation, so I draw them on a separate layer. That way, I only have to draw them once. I will now extend the one drawing sheet in the layer Legs to last during the whole animation. There I see that the dress moves more than expected, so it will need to be animated on the other layer. Now that I am done with the legs, I can lock the layer to protect it. And I will also lock the Rough layer and only focus on the layer Clean. In the onion skin parameters, I can activate more drawing sheets if my drawings are too far apart in the timeline. For now, the last drawing is a duplicate of the first drawing. So I will copy the first clean, and paste it on the last drawing sheet. Now that I cleaned a few drawings, I will remove a few sheets. It just helps me keep the onion skin simple, one before and one after. I remove the few drawing sheets I don't need for now, and keep only the blank drawing sheet I'll be working on. In order to fill the blanks, I duplicate the sheets without the content from one layer to the other. I move the layer down to get it closer to the original and make duplicating much easier. I added the hands in the Rough and Clean layers. And I can see that I still need more drawings in-between. 4. Adding more drawings: I will show you more ways to handle the timeline and add drawing sheets. I can handle both Rough and Clean layers. I want to add a drawing between these two. So I select them on both layers and tap on the in-between icon. And it added a blank drawing in between the two. So now I will add a drawing in between these two. And it adds another two drawing sheets with the timing of the previous sheets. When the drawing sheets on two different layers are identical, I can handle them both at the same time. At first I will work on the Rough layer. So I select the pencil brush, and for the eraser too. And this time I use the onion skin of the clean layer while working on the Rough layer. Another way to create new in-betweens is to manually split the sheets. Drag the pencil down to split the sheet in two. Then I use the clear icon in the floating menu to clear the new sheets. I increase the length of the Layer Legs to match the length of the other layers. Now, I will switch to the Clean layer and clean the new drawings. And now I hide the Rough layer to see what the clean animation looks like on its own. 5. Colors: When I am satisfied with my animation, I can start to color. I duplicate the clean layer without drawings to get a new layer with the same structure. And I rename it Color. I'm going to pick the skin color to be a light pink, yellowish color. And then I'm going to add a new palette. And I rename it Girl. A simple tap on the empty circle adds the current color. As it is my only palette, I can already see it in the color wheel tab, which will allow me to add colors to the palette directly from the color wheel. I disable the onion skin everywhere, as I don't need it. And I lock the Clean layer to protect it. Double-tap with a finger to fill. Then you can adjust the tolerance of the fill with a slider displayed at the top. When I fill, the filled color is previewed at the front while I can adjust the tolerance before it is applied. If I want to get out of the field preview, I simply zoom in or out, and I know the fill is applied. As I used a brush with no much size variation, I know that when the color fills outside of the area, it means that there is a gap. So I fill the gap with my pencil, and now I can fill. I'm going to place the Color layer under the line layer. And I continue to fill the rest of the drawing sheets and to close the gaps when needed. I'm going to create a new layer for the legs color. That way I only have to color them once. I duplicate the structure of the layer Legs, and I call it Legs Colors. And I place it at the bottom of the layers pile. Now that I'm done with this layer, I lock it to protect it. And I continue to fill on the Color layer. For the hair, I will use a brown color. And I add it to the palette. I save my colors in a palette in case I need to access them quickly later. You can also access your palettes in another shot. For the dress, I pick a light yellow. And I must not forget to add it to the palette. Now I will try to find a color for the white of the eyes. Once I am satisfied, I can add the color to the palette. For the eyes, I will use a dark brown. I'll just make it a bit darker, and I add it to the palette. For the teeth, I will use the same color as for the white of the eyes. And a darker color for the teeth the back. I use a dark red for the tongue. If I forgot to add a color to the palette, I simply need to pick it with the picker and add it to the palette. Then I use a darker red for the back of the mouth. I will pick a light pastel green for the dandelion. When I need to change the line of the other layer, I unlock it in order to edit it. Make sure that you are on the right layer before you continue. And now I am done with the basic colors of my animation. 6. Dandelion: I create a new drawing layer that I call Dandelion. And I select the other unlocked layers to lock them and focus on my new layer. I double-tap on the top of the timeline to create a marker, it will mark the end of my animation. So I change the color to red, and I rename it End. In the settings, in the Timeline tab, you can choose to always show markers description. That way I can always see the name of my marker. Now I can start drawing my dandelion seeds. I will use both the Dandelion onion skin and the Clean onion skin. And I continue to draw the seeds on the other drawing sheets. I will add a new layer with the path I want the seeds to follow. To do so, I create a sheet and extend it to the End marker. I choose another color and I draw the path. I place this layer under the Dandelion layer so that it does not cover the seeds. To help me animating the flying seeds, I will add spacing indications on the path. But if I want to make sure that I'm in the right place, I need to draw them on separate drawing sheets. So I create new sheets in the Dandelion layer that will match with the path layer beneath. Now that I have a structure for this layer, I can cut the layer underneath to match the one on top. Split the sheet with the pencil to divide it into smaller ones. I use another color and I draw over the spacing indicators. And now I can simply follow the pink indicator. I will add a swaying movement to the flying seeds. I duplicate the first drawing sheet and I place it after the end to loop the dandelion seeds animation. And I disable the onion skin of the Clean layer. I can see that the seeds don't follow the animation because this layer does not have the same structure as the Clean layer. So now I create a new layer above the Clean layer to duplicate the structure I need. I select the sheets that I want, and I drag the sheets from the icon "duplicate without content" to place them just above the originals. Now I can move this new layer at the top and copy the drawings to them. On the Dandelion layer, I select the area I want to copy. I tap on the Copy icon, then I switch to the layer above and I paste. Then I come back to the previous layer. I select the area and I tap on the Clear icon to clear the selected area. And then I continue the same process on the next sheets. And now the animation makes more sense. I rename the layer Dandelion 2. I will change the timing of the flying dandelion seeds and play the animation to see if I am satisfied with the movement. Now I switch off the onion skin on both layers, and I will change the color of the seeds. To do so, I choose the rectangle shape in the brush panel, and I enable the alpha lock on the layer. And now I can fill only the dandelion seeds with my new color. And I do the same on the layer above. I create a new layer and place it under the Clean layer. And I rename it Cheeks. I will add a little blush on the cheeks of the girl with the pencil brush. I duplicate the sheets without content and drop them on top. I could also have duplicated the layer without the content. In the brush list, I choose the Pencil and switch to the freehand shape. I increase the size of the brush and choose a color between red and orange. In the pencil settings, I disable the "Pressure controls size", which allows me to always keep the same size. Even with variations in the pencil pressure. I enable the Color Mix, which doesn't mix anything because there is no other color on the layer. But if I enable the Wet Brush, the brush will mix its own color with other colors and with the transparency. That way I can draw and smudge at the same time. I adjust the size and opacity until I get the result I want. And then I draw the blush on all the other drawing sheets. If the color is too strong, I can still lower the opacity of the layer. 7. Lumafusion: First, I disable the layers of the dandelion seeds. In the settings in the export tab, I will export my animation as a sequence in the HEVC format. Which will export a video with a transparent background. So I make sure that the option "Export Background" is disabled. And I tap on Export. I will save my animation in the files, and directly in the Lumafusion folder, in UserMedia and Files. Now I go to the Lumafusion app and I create a new project. I rename it callipeg-lumafusion. And I tap on the + icon. In the media section, I choose Imported and Files, which is where I saved my animation. I can drop it directly into my timeline. Now, I'll go back to Callipeg to create light. I create a new layer and extend the drawing sheet until the end. I choose a light pink color. And I will use the Pencil without Wet Brush or Color Mix. And I choose a low opacity. The eye icon with a 1 disables all the other layers. That way, I will export only the light layer. I choose the type as Image and I keep the format as PNG. In Lumafusion, I create an overlay title. I tap on the Titles tab and I tap on the bin to remove the text. Then I tap on the + and I create a new shape. I increase the size of the rectangle to cover the whole space. Then I choose a dark blue. Then I go back to the Frame & Fit tab, and I change the blending to Multiply. That way, my character is now in darkness. To add a light, I drop the image I previously exported into the timeline. And in the editor, I change the blending to Soft Light. I will use the same image to add shadows. So I duplicate this clip, And in the editor, I change the blending to Stencil Alpha. Which only reveals what is under the pixels of my image. I will need to expand the area of my light if I want to reveal more of the character. After exporting the new version of the light, I remove the previous clips and insert my new image. And I change the blending modes as I did before. I will add lights in the eyes of the character and also on the line strokes of the left on the character. So I duplicate the layer Clean and activate the alpha mask. And I draw over the lines on the left part of the character. I also need to duplicate the clean layer of the Legs in order to draw over the lines. I disable all the other layers to export only these new layers. So now let's see the result in Lumafusion. I will choose the blending mode Lighten, and play with the opacity. If I am satisfied by the look of it, I can go back to Callipeg and animate the lights. Now that I am done with the animation, I can export an HEVC file and insert it in my Lumafusion project. And I change the blending to Lighten. I add more pixels to the main light to reduce the shadows in the character. In Lumafusion, I use the new light for the Stencil Alpha. In Callipeg, I enable only the dandelion layers to export them. I export them as an HEVC file. In Lumafusion, I simply need to drop it on top in the timeline. I can duplicate my clips to lengthen and loop the animation. 8. Conclusion: I made some changes off-camera to work more comfortably, and change the lights of the character. So this was one of many ways to use Callipeg. For this example, I insisted on the handling of the drawing sheets in the timeline, which seem challenging for some people. I wish it could help you understand better the mechanics of the timeline, and the other tools as well. Feel free to create a project with the files I left in the Resources area. Or create your own animation from scratch with your own ideas. Have fun animating.