At the moment I'm just looking at the possibilities of Hype and I don't have any work to show. The only thing I've done and can show is a test with the pencil animation.
Here is the video:
I'm aware that it's not a great job, but I'm just starting to get to know the program.
I take this opportunity to ask if you plan to implement a pair of textured pencils. For example: a rough one like pencil or chalk and another kind of spray (and if the spray could be applied either on the background, drawing lines, or just on an object you could create simple but very visual shading effects)
I don't know how to program it and I imagine it's not easy to do, but it would be a very powerful tool to be able to make drawn presentations.
I'm preparing one, with camera movement included, to explain a subject from the university (I study pedagogy). When I have finished it I will be happy to share it in the forum, but it will be from October.
With Hype (and a graphic tablet) it is relatively easy to make this line drawing effect.
Here you have the video tutorial of how to do it:
I said it wasn't a great job, because it's just a test of Hype's ability. I find many faults in him.
To make an animated illustration like this, you just have to structure the work. I like to work with different line thickness because it helps to give more volume to the drawing.
So, the first step is to draw the outline of the figure with a thick line to separate it from the background. Then you work with other lines of different thickness. This depends on the depth and importance that you want to give to each part of the drawing.
A " lasso " type tool is missing to be able to select an area and give it colour with only three movements. That would make the colour part not take so much time. That will be my next research, because I already have a couple of ideas of how to solve it with the current Hype tools, simple but powerful.
Hype is proving to be a great creative tool and its limitations also help to increase our creativity.
There's a definite possibility for this; Hype uses SVG under-the-hood which has a filter mechanism that can enabled a wide range of effects. There are performance implications, but it is something we have on our list to investigate.
Luckily, @MaxZieb led the way with developing ways to use this within Hype already. You can check out this thread where he has an example project that textures the strokes:
The basic flow to getting this to work is:
Copy the "HypePencilEnabler 1.0" symbol element and paste it into your document
Add a Class Name for your vector shape in the Identity Inspector that matches what was used for the shape elements in the example document, like "hypePencilHB"
Export or Preview (it will not show up in Hype's editor)
Wow, pencil? just what I needed, I used to make videos making simple drawings using specific shapes for kids to learn, but I stop because the process wasn't perfect, I'll try this.
@jonathan, One question: Why can't I create an automatic animation of a dashed line?
The only way I've found to do it is to draw a white dashed line and use it as a mask. I have duplicated it underneath with another line colour and I have activated the animation of this black line that is hidden intermittently under the white mask.
The trick works on a white background but as soon as it is superimposed on a coloured area, you can see the trick. Would there be another way to do it?
I have tested the two contributions you have made.
I added a hand with a pencil and the rest of the arm up to the elbow. The shading is done directly with Hype and it's perfect this way because you can adjust the shade as needed.
I had to correct the position of the "lineObserver" in its x and y coordinates to fit the pencil tip.It was a bit difficult to find where because I don't have much idea of programming, but I do know that you have to add or subtract pixels, or points, to the default coordinates to make that correction.
The concrete correction was (In lines 16 and 17 of the code):
hypeDocument.setElementProperty(handElm, 'top', offsetTop + pt.y -65);
hypeDocument.setElementProperty(handElm, 'left', offsetLeft + pt.x +55);
you can use invisible lines to reposition the hand if the offset between two lines creates a big jump OR even easier you can just animate the hand as you want. As long as there is no marked line progressing the hand is free to be animated with Hype.
the object positioned by the lineObserver can be anything … so you could just have it position a group (1) and inside the group the hand image (2) can be moved around until the pencil point is aligned with the group corner. That way you don't have to adjust x and y for the pen.
You can make the hand and pen a symbol and then use symbol actions from the main timeline to run any symbol timeline using symbol actions. That way the hand can have a set of reusable "gestures" or "actions" that can be added to any motion without having to repeat the animation work.
That looks great.
This way you can give the arm some naturalness, at least support and lift the pencil tip from the paper. That's enough to make a more dynamic global animation
The technical reason is that the line draw and line dash use the same property under the hood. My recollection is that the solutions that were developed in the forums would likely be the way forward to allowing both in Hype for a future release .
I'm glad to see everyone contributing on here - looks like with all these techniques combined a hand drawn pencil animation look has come together!
Hahaha, thank you very much.
Wow, this looks wonderful.
.