https://wiki.synfig.org/api.php?action=feedcontributions&user=Ceox&feedformat=atomSynfig Studio :: Documentation - User contributions [en]2024-03-29T06:27:51ZUser contributionsMediaWiki 1.26.3https://wiki.synfig.org/index.php?title=DemoReel&diff=4445DemoReel2007-11-03T05:41:11Z<p>Ceox: /* Other thoughts */</p>
<hr />
<div>=== Goal ===<br />
Produce a demo reel for display on Youtube, revver, etc to showcase the capabilities of Synfig, and generate interest in the community of artists and coders to use and improve Synfig. Ideally the whole video could be produced in Synfig (excluding audio). <br />
<br />
=== Proposed screenplay ===<br />
Unless otherwise stated the source is from the Synfig examples. There seems to be a recurring theme of 'eyes' here, so the tentative working title is 'The Eye's have it'. <br />
<br />
==== Introduction ====<br />
Open with <br />
* handwritten 'synfig' by dooglus ([http://uk.youtube.com/watch?v=djk4B_GiN-Q&NR=1 YouTube] | [[Media:Handwriting.sifz|sifz]])<br />
<br />
then an animated figure synched to some speech - "Welcome to the Synfig Demo Reel" (I have something in the works for this one)<br />
<br />
Either - Cover the basics - shapes, lines, filters, distortions, transforms, etc, or just launch straight into a slide show of still images<br />
<br />
==== Stills ====<br />
<br />
* Gradients.sif<br />
* wallpaper/backdrop.sif<br />
Some combination of zooming in and out on the eyes of the following to demonstrate that Synfig is vector based and looks good at any resolution:-<br />
* Rore's Cat<br />
* Tux<br />
* prologuekid.sif<br />
* pirate.sif<br />
* Macwolfen.sif<br />
* New Julia/newjulia2.sif<br />
<br />
<br />
Transition to -<br />
<br />
==== Animations ====<br />
* mandelbrot.sif<br />
* cells.sif<br />
* noise.sif<br />
* z_depth test.sif<br />
* warpcube.sif<br />
* Preamble taffy.sif<br />
* Rotating gears by dooglus http://uk.youtube.com/watch?v=ljmQARJccYk<br />
* underwater by Ulrik http://uk.youtube.com/watch?v=j7fO-1V_IFA<br />
* plant growing by Ulrik http://uk.youtube.com/watch?v=UqeUOrAoziE<br />
* room by Ulrik http://uk.youtube.com/watch?v=UWxj9NenDTE<br />
* eye.sif http://uk.youtube.com/watch?v=nAYdf-CJwPo<br />
* Eyes (by Madsen - he already gave us permission to use it in a demo reel)<br />
* Synfig trailer by StephanMorin http://uk.youtube.com/watch?v=7q2jN3qcOcM<br />
* Sy'n'fig by Zelig<br />
* boot.sif by pxegeek - Call to action help stamp out bugs in Synfig<br />
<br />
* Credits<br />
* links to Prologue, Werewolf<br />
<br />
==== Other thoughts ====<br />
Need clearance from the copyright holders for the use of these works. Please comment if it's OK or if you don't want your work used.<br />
: It's OK to use any of my animations -- [[User:Dooglus|dooglus]] 04:12, 30 October 2007 (EDT)<br />
: It's ok to use any of my animations and music at [http://www.musikboden.se/mymusic/mymusic.html my site] -- [[User:Ulrik|ulrik]] 05:29, 30 October 2007 (EDT)<br />
Music? If some of the more musical amongst us are willing to share their music - <br />
* Madsen has some funky music that I can't begin to describe, and some nice electronic stuff also (e.g. http://laxness101.lillesvin.net/strg/lax-Lay.mp3). <br />
* Ulrik has some accordian music that may not be to everyone's taste ;) and some great piano music at http://www.musikboden.se/mymusic/solopiano/solopiano.html (yes, I'm biased - I only try to play piano). <br />
* If we want to go up tempo, Ceox has some nice synth music that I think would work well. (Oxysphere?)<br />
* I could make a new song for the reel by making a whole new song or making customized versions of older songs. Regards, Ceox<br />
What did I miss?</div>Ceoxhttps://wiki.synfig.org/index.php?title=DemoReel&diff=4444DemoReel2007-11-03T05:33:37Z<p>Ceox: /* Other thoughts */</p>
<hr />
<div>=== Goal ===<br />
Produce a demo reel for display on Youtube, revver, etc to showcase the capabilities of Synfig, and generate interest in the community of artists and coders to use and improve Synfig. Ideally the whole video could be produced in Synfig (excluding audio). <br />
<br />
=== Proposed screenplay ===<br />
Unless otherwise stated the source is from the Synfig examples. There seems to be a recurring theme of 'eyes' here, so the tentative working title is 'The Eye's have it'. <br />
<br />
==== Introduction ====<br />
Open with <br />
* handwritten 'synfig' by dooglus ([http://uk.youtube.com/watch?v=djk4B_GiN-Q&NR=1 YouTube] | [[Media:Handwriting.sifz|sifz]])<br />
<br />
then an animated figure synched to some speech - "Welcome to the Synfig Demo Reel" (I have something in the works for this one)<br />
<br />
Either - Cover the basics - shapes, lines, filters, distortions, transforms, etc, or just launch straight into a slide show of still images<br />
<br />
==== Stills ====<br />
<br />
* Gradients.sif<br />
* wallpaper/backdrop.sif<br />
Some combination of zooming in and out on the eyes of the following to demonstrate that Synfig is vector based and looks good at any resolution:-<br />
* Rore's Cat<br />
* Tux<br />
* prologuekid.sif<br />
* pirate.sif<br />
* Macwolfen.sif<br />
* New Julia/newjulia2.sif<br />
<br />
<br />
Transition to -<br />
<br />
==== Animations ====<br />
* mandelbrot.sif<br />
* cells.sif<br />
* noise.sif<br />
* z_depth test.sif<br />
* warpcube.sif<br />
* Preamble taffy.sif<br />
* Rotating gears by dooglus http://uk.youtube.com/watch?v=ljmQARJccYk<br />
* underwater by Ulrik http://uk.youtube.com/watch?v=j7fO-1V_IFA<br />
* plant growing by Ulrik http://uk.youtube.com/watch?v=UqeUOrAoziE<br />
* room by Ulrik http://uk.youtube.com/watch?v=UWxj9NenDTE<br />
* eye.sif http://uk.youtube.com/watch?v=nAYdf-CJwPo<br />
* Eyes (by Madsen - he already gave us permission to use it in a demo reel)<br />
* Synfig trailer by StephanMorin http://uk.youtube.com/watch?v=7q2jN3qcOcM<br />
* Sy'n'fig by Zelig<br />
* boot.sif by pxegeek - Call to action help stamp out bugs in Synfig<br />
<br />
* Credits<br />
* links to Prologue, Werewolf<br />
<br />
==== Other thoughts ====<br />
Need clearance from the copyright holders for the use of these works. Please comment if it's OK or if you don't want your work used.<br />
: It's OK to use any of my animations -- [[User:Dooglus|dooglus]] 04:12, 30 October 2007 (EDT)<br />
: It's ok to use any of my animations and music at [http://www.musikboden.se/mymusic/mymusic.html my site] -- [[User:Ulrik|ulrik]] 05:29, 30 October 2007 (EDT)<br />
: It's ok to use any of my and music from [http://ceox.urli.net my site] and I could also make a new song for the reel by making new elements or making customized versions of older songs. P.S. You may also use my animation, if you want. -- [[User:Ceox|ceox]] 07:27, 3 November 2007 (EDT)<br />
Music? If some of the more musical amongst us are willing to share their music - <br />
* Madsen has some funky music that I can't begin to describe, and some nice electronic stuff also (e.g. http://laxness101.lillesvin.net/strg/lax-Lay.mp3). <br />
* Ulrik has some accordian music that may not be to everyone's taste ;) and some great piano music at http://www.musikboden.se/mymusic/solopiano/solopiano.html (yes, I'm biased - I only try to play piano). <br />
* If we want to go up tempo, Ceox has some nice synth music that I think would work well. (Oxysphere?)<br />
<br />
What did I miss?</div>Ceoxhttps://wiki.synfig.org/index.php?title=User:Ceox&diff=4443User:Ceox2007-11-03T05:29:50Z<p>Ceox: New page: Heyhey. I don't know any cool wiki editing. but I know how to link! Ain't that cool? [http://ceox.urli.net My Site]</p>
<hr />
<div>Heyhey. I don't know any cool wiki editing. but I know how to link! Ain't that cool?<br />
[http://ceox.urli.net My Site]</div>Ceoxhttps://wiki.synfig.org/index.php?title=DemoReel&diff=4442DemoReel2007-11-03T05:27:57Z<p>Ceox: /* Other thoughts */</p>
<hr />
<div>=== Goal ===<br />
Produce a demo reel for display on Youtube, revver, etc to showcase the capabilities of Synfig, and generate interest in the community of artists and coders to use and improve Synfig. Ideally the whole video could be produced in Synfig (excluding audio). <br />
<br />
=== Proposed screenplay ===<br />
Unless otherwise stated the source is from the Synfig examples. There seems to be a recurring theme of 'eyes' here, so the tentative working title is 'The Eye's have it'. <br />
<br />
==== Introduction ====<br />
Open with <br />
* handwritten 'synfig' by dooglus ([http://uk.youtube.com/watch?v=djk4B_GiN-Q&NR=1 YouTube] | [[Media:Handwriting.sifz|sifz]])<br />
<br />
then an animated figure synched to some speech - "Welcome to the Synfig Demo Reel" (I have something in the works for this one)<br />
<br />
Either - Cover the basics - shapes, lines, filters, distortions, transforms, etc, or just launch straight into a slide show of still images<br />
<br />
==== Stills ====<br />
<br />
* Gradients.sif<br />
* wallpaper/backdrop.sif<br />
Some combination of zooming in and out on the eyes of the following to demonstrate that Synfig is vector based and looks good at any resolution:-<br />
* Rore's Cat<br />
* Tux<br />
* prologuekid.sif<br />
* pirate.sif<br />
* Macwolfen.sif<br />
* New Julia/newjulia2.sif<br />
<br />
<br />
Transition to -<br />
<br />
==== Animations ====<br />
* mandelbrot.sif<br />
* cells.sif<br />
* noise.sif<br />
* z_depth test.sif<br />
* warpcube.sif<br />
* Preamble taffy.sif<br />
* Rotating gears by dooglus http://uk.youtube.com/watch?v=ljmQARJccYk<br />
* underwater by Ulrik http://uk.youtube.com/watch?v=j7fO-1V_IFA<br />
* plant growing by Ulrik http://uk.youtube.com/watch?v=UqeUOrAoziE<br />
* room by Ulrik http://uk.youtube.com/watch?v=UWxj9NenDTE<br />
* eye.sif http://uk.youtube.com/watch?v=nAYdf-CJwPo<br />
* Eyes (by Madsen - he already gave us permission to use it in a demo reel)<br />
* Synfig trailer by StephanMorin http://uk.youtube.com/watch?v=7q2jN3qcOcM<br />
* Sy'n'fig by Zelig<br />
* boot.sif by pxegeek - Call to action help stamp out bugs in Synfig<br />
<br />
* Credits<br />
* links to Prologue, Werewolf<br />
<br />
==== Other thoughts ====<br />
Need clearance from the copyright holders for the use of these works. Please comment if it's OK or if you don't want your work used.<br />
: It's OK to use any of my animations -- [[User:Dooglus|dooglus]] 04:12, 30 October 2007 (EDT)<br />
: It's ok to use any of my animations and music at [http://www.musikboden.se/mymusic/mymusic.html my site] -- [[User:Ulrik|ulrik]] 05:29, 30 October 2007 (EDT)<br />
: It's ok to use any of my and music from [http://ceox.urli.net my site] -- [[User:Ceox|ceox]] 07:27, 3 November 2007 (EDT)<br />
Music? If some of the more musical amongst us are willing to share their music - <br />
* Madsen has some funky music that I can't begin to describe, and some nice electronic stuff also (e.g. http://laxness101.lillesvin.net/strg/lax-Lay.mp3). <br />
* Ulrik has some accordian music that may not be to everyone's taste ;) and some great piano music at http://www.musikboden.se/mymusic/solopiano/solopiano.html (yes, I'm biased - I only try to play piano). <br />
* If we want to go up tempo, Ceox has some nice synth music that I think would work well. (Oxysphere?)<br />
<br />
What did I miss?</div>Ceoxhttps://wiki.synfig.org/index.php?title=Doc:Shiny_Effects&diff=4237Doc:Shiny Effects2007-10-19T04:59:04Z<p>Ceox: /* Step 10: */</p>
<hr />
<div>Shiny Effects #1 by Ceox<br />
<br />
'''Skill Level:''' Intermediate<br />
<br />
'''Length:''' About 30 minutes<br />
<br />
'''Version of Synfig Studio:''' 0.61.07<br />
<br />
In this tutorial we will make some shiny/glowy effects on your text.<br />
<br />
It might seem long to you because there is a lot of text, but when I<br />
first tried this out I did it in 5-10 minutes, so if you learn all the<br />
stuff you'll be able to do it that fast as well.<br />
<br />
== Part 1 - Designing ==<br />
<br />
=== Step 1: Create New Document ===<br />
<br />
We start by opening Synfig Studio and creating a new document with all<br />
the default settings except these:<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic1.gif<br />
<br />
=== Step 2: Create Text Layer ===<br />
<br />
Now we create a new text layer. In this tutorial I'm going to use<br />
the text "Ceox". That's not my real name, but it will have to<br />
do. Start by adding the text layer:<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic2.gif<br />
<br />
=== Step 3: Select Text Layer ===<br />
<br />
Now you should see a "Text Layer" text in the middle of your<br />
project. Select the text layer in the layers list, so that it is<br />
highlighted, and you should see its parameters in the "Params" window,<br />
which is on the bottom of your workspace if you haven't placed it<br />
somewhere else. (Click on the image to enlarge it; it will open in a<br />
new window).<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic3.gif<br />
<br />
=== Step 4: Edit Text Layer ===<br />
<br />
Now we are going to modify the text in the "Params" window. First<br />
double-click on the color in the "Value" cell and choose the color you<br />
want, with 100 "Alpha". I chose a darkish blue. Then double-click on<br />
the "Text Layer" text, also in the "Value" cell and enter your name<br />
into the pop-up window. After this, change the size to 50pt and the<br />
font to Arial, both by double-clicking the field in the "Value"<br />
cell. Here's a screenshot of all things need to be modified: (I have<br />
darkened all the values that should be good to go by default, but if<br />
you like you can check the others as well).<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic4.gif<br />
<br />
=== Step 5: (OPTIONAL) ===<br />
<br />
If you want some more "fancyness" on your text, create a stroke for<br />
the text, like this step tells you. Right click on the text layer in<br />
the layers list and choose "Duplicate Layer":<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic5.gif<br />
<br />
Now you should have two "Text" layers on top of each other. Choose<br />
the lower "Text" layer and change the color to something else what<br />
you have on the top "Text" layer. Im am going to choose a simple<br />
green. Now change the size of this layer to about 2-3 pt bigger than<br />
the layer on the top, in this case to 52pt. (50pt 2pt, if you didn't<br />
get it). Now we have a stroke for our text, though it might not be<br />
perfectly around the text. You can fix this, my moving the lower layer<br />
a bit. This is how my text looks like now:<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic6.gif<br />
<br />
=== Step 6: ===<br />
<br />
Now we create the first shiny thing. Add a new layer just like we<br />
added the text layer, by clicking on the little black arrow in the<br />
corner of our canvas and choosing "Layer &gt; New Layer &gt;<br />
Gradients &gt; Linear Gradient. Now your canvas should be filled with<br />
a some colored gradient. Don't worry, we will get your text back in<br />
the next step. Which actually comes now. Choose the "Linear Gradient"<br />
layer in the layers list and then double-click on the "Gradient"<br />
value in the "Params" window, like we double-clicked in Step 4. Now<br />
you should see a window which calls itself the "Gradient Editor". At<br />
the bottom of this window you should see two black 'half-arrows', one<br />
on the left side and one on the right side. Click on the one, which is<br />
on the left side. (When the color of it changes to white, it is<br />
selected.) Change the color to white and the "Alpha" value to 0. Now<br />
select the arrow on the right side and do the same thing. Now insert a<br />
new arrow (or CPoint, what ever you want to call them) by clicking in<br />
the center of the area, which is over the half-arrows with your right<br />
mouse button and select "Insert CPoint". Notice that the menu will<br />
only appear when you keep the right mouse button pressed down. Now<br />
select this arrow and change its color to white and its "Alpha" value<br />
to 50. As you may have noticed by now, the alpha amount controls the<br />
transparency of an object. Now your Gradient Editor should look like<br />
this:<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic7.gif<br />
<br />
and your canvas something like this:<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic8.gif<br />
<br />
=== Step 7: ===<br />
<br />
Rotate and scale the "Linear Gradient" layer with the "Normal Tool"<br />
using the control points like the video shows.<br />
[http://personal.inet.fi/musiikki/ceox/synfigtuto1/vid1.swf.html Click<br />
here to view video. Opens up in new window.]<br />
<br />
=== Step 8: ===<br />
<br />
Select the "Linear Gradient" layer in the layers list and set its<br />
"Blend Method" to "Onto" in the "Params" window. Now the Gradient<br />
layer is visible only on the layers below it. Your gradient should<br />
disappear if you placed like the video showed in the previous<br />
step. (Not on top of the text)<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic9.gif<br />
<br />
=== Step 9: ===<br />
<br />
It's easier to do all the animations afterwards, so now we could make<br />
the other shiny effect, which I prefer to call a 'shimmer'. We start<br />
by taking the BLine tool ([[Image:draw-path_128sif.png]]) and zooming<br />
in 400% into our canvas. You can zoom in and out in the "Navigator":<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic19.gif<br />
<br />
 Now we have to draw a new object with the BLine tool<br />
([[Image:draw-path_128sif.png]]) in to some sharp corner of our<br />
text. I chose the corner of the X, because this effect looks good on<br />
the last character(s). So now draw a shape like this one:<br />
<br />
(Insert a controller by pressing your left mouse button and close the<br />
line by clicking on the first point with your right mouse button and<br />
selecting "Loop BLine")<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic20.gif<br />
<br />
=== Step 10: ===<br />
<br />
Now zoom out to 100% again. You should now have a new layer in your<br />
layers list:<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic10.gif<br />
<br />
Select it by clicking on it. Now we have its parameters in the<br />
"Params" window. Change its color to white, if it isn't it aleady. You<br />
also have to set its "Feather" to 1pt and the "Type of Feather" to<br />
"Box Blur". We don't want it to be visible yet so we also have to set<br />
the "Alpha" value to 0 in the color editor. Now everything is ready<br />
for the animation.<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic11.gif<br />
<br />
== Part 2 - Animating ==<br />
<br />
=== Step 1: ===<br />
<br />
First we animate the "Linear Gradient" layer. Select it in the layers<br />
list. Now you should have to have two green control points visible in<br />
your canvas. Choose the "Normal Tool" ([[Image:normal_icon-full.jpg]])<br />
and select both of those points by drawing an rectangle over<br />
them. Open the keyframe- window by clicking on its icon (a golden key)<br />
in the same window where the "Params" are. Make sure your timeline<br />
indicator is at "0f" (the small orange line on a gray background) and<br />
add a new keyframe by pressing on the blue icon. Move the timeline<br />
indicator to "2s" and add a new keyframe. Now your window should look<br />
like this:<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic12.gif<br />
<br />
=== Step 2: ===<br />
<br />
Move the time indicator to "0f" and press on the green ball in the<br />
lower right corner of your canvas. After pressing on it, its color<br />
changes to red, like it is in the screenshot. Now move the control<br />
points up a bit (this doesn't affect the animation), just to create a<br />
waypoint. Go back to "2s", where we inserted the second keyframe and<br />
move the two green control points to the right side of your text. The<br />
first animation has been created. You can move your timline indicator<br />
around to see it. This should be your timeline and canvas now:<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic13.gif<br />
<br />
=== Step 3: ===<br />
<br />
Now let's encapsulate our "Linear Gradient" layer and the two "Text"<br />
layers by selecting them all. (Select multiple layers by holding CTRL<br />
down and selecting the layers). Then press on one of the selected<br />
layers and choose "Encapsulate". The layers should now be groupped in<br />
one layer with a box symbol and labelled "Inline Canvas". You can open<br />
all the layers by clicking on the small arrow on the left side of the<br />
box- icon.<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic14.gif<br />
<br />
=== Step 4: ===<br />
<br />
I just noticed, that I screwed up and we have to make the whole<br />
animation a bit longer. Click on the black arrow in the upper left<br />
corner of your canvas, select "Edit" and then "Properties". A new<br />
window should pop up. Go to the "Time" tab and then set the "End Time"<br />
to 4s 2f.<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic15.gif<br />
<br />
=== Step 5: ===<br />
<br />
Select the "NewBLine(some number) Region" layer, place the timeline<br />
indicator to "2s" and a add a keyframe, like in Step 2. Now repeat<br />
this by adding keyframes also to "3s" and "4s". Move your timeline<br />
indicator back to "2s" and press the green ball icon to get into the<br />
animate editing mode. Now open the "Colors" window from the "Params"<br />
window and set the "Alpha" value to 1. Close the window. Move the time<br />
indicator to "3s" and set the "Alpha" value to 100 trough the<br />
"Colors" window like before. Now move the time indicator to "4s" and<br />
set "Alpha" to 0. Now we have the shimmer in the corner of our text<br />
fading in and out in 2 seconds. Your timeline should now look like<br />
this (without those texts, of course):<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic16.gif<br />
<br />
=== Step 6: ===<br />
<br />
Your animation is basicly ready, but that shimmer needs some<br />
enchancement. First add a new layer onto the "NewBLine(some number)<br />
Region" layer, by left clicking on it and selecting "New Layer &gt;<br />
Transform &gt; Rotate". A new layer named "Rotate" should appear. Now<br />
lets encapsulate the "Rotate" and "NewBLine..." layer like in Step 3,<br />
but just selecting the "Rotate" and "NewBline..." layers this<br />
time. If we wouldn't do this the rotatation effect would affect our<br />
text too, but that's not what we want. Now you should have 2 "Inline<br />
Canvas" layer groups. Open the first one by pressing on the small<br />
white arrow next to the [box]- icon. This is what your layers list<br />
should look like now:<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic17.gif<br />
<br />
=== Step 7: ===<br />
<br />
Select both of the layers in the opened "Inline canvas" and you should<br />
see the outline of your shimmer and a new line, which has a green dot<br />
and a blue dot in both ends. Move the green dot to the center of your<br />
shimmer like this:<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic18.gif<br />
<br />
=== Step 8: ===<br />
<br />
Make sure, you're still in the "Animate Editing Mode" (the ball in the<br />
bottom left corner of your canvas is red, if you are), place your<br />
timeline indicator to "2s" and select only the "Rotate" layer. Now<br />
you have to set the "Amount" value to 0.01 in the "Params" window,<br />
just to set the waypoint. Move the timeline indicator to "3s" and set<br />
the "Amount" value to 180 (for 180 degrees) and then move the<br />
timeline indicator to "4s" and the "Amount" value to 359.<br />
<br />
Congratulations, you are done!<br />
<br />
[http://personal.inet.fi/musiikki/ceox/synfigtuto1/Shiny_Effects_Tutorial_1_by_Ceox.sif Here's the Synfig Studio file.]<br />
<br />
And here's the final result:<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/animation.gif<br />
<br />
Hope this tutorial helped you with something :)<br />
<br />
For further questions, contact me at ceoxmusic (at) gmail (dot) com<br />
<br />
[http://ceox.urli.net Ceox] |<br />
[http://personal.inet.fi/musiikki/ceox/synfigtuto1/ HTML version]</div>Ceoxhttps://wiki.synfig.org/index.php?title=Doc:Shiny_Effects&diff=4224Doc:Shiny Effects2007-10-18T05:30:37Z<p>Ceox: /* Step 8: */</p>
<hr />
<div>HTML VERSION OF THIS, YOU CAN FIND HERE:<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/<br />
<br />
= Shiny Effects #1 by Ceox =<br />
<br />
<span>'''Skill Level:'''</span> Intermediate<span>'''<br /> Lenght:'''</span> ca. 30 minutes<br /><span>'''Version of Synfig Studio:'''</span> 0.61.07<br /><span>''''''</span><br /><br /> In this tutorial we make some shiny/glowy effects on your text.<br /> It might feel long to you, according to all of the text, but when I first tried this out, if it worked on Synfig, I did it in 5-10 minutes, so if you learn all the stuff you'll be able to do it so fast too.<br /><br />
<br />
== Part 1 - Designing ==<br />
<br />
=== Step 1: ===<br />
<br />
We start by opening Synfig Studio and creating a new document with all the default settings except these:<br /> http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic1.gif<br />
<br />
=== Step 2: ===<br />
<br />
Now we create a new text layer, so in this tutorial I'm going to use 'Ceox'. That's not my real name, but it will have to do. Start by adding the text layer:<br /> <br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic2.gif<br />
<br />
=== Step 3: ===<br />
<br />
Now you should see a "Text Layer"- text in the middle of your project. Select the text layer in the layers list, so that its background changes to blue, and you should see its parameters in the "Params" window, which is on the bottom of your workspace, if you haven't placed it somewhere else. (Click on image to enlarge, will open in new window).<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic3.gif<br />
<br />
=== Step 4: ===<br />
<br />
Now we are going to modify the text in the "Params" window. First double-click on the color in the "Value" cell and choose the color you want, with 100 "Alpha". I chose a darkish blue. Then double-click on the "Text Layer"- text, also in the "Value" cell and enter your name in to the pop-up window. After this, change the size to 50pt and the font to Arial, both by double-clicking the field in the "Value"- cell. Here's a screenshot of all things need to be modified: (I have darkened all values, that should be good to go by default, but you should anyway check out, that you have the same ones)<br /> http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic4.gif<br />
<br />
=== Step 5: (OPTIONAL) ===<br />
<br />
<span><font color="rgb(65, 65, 65)">If you want some more "fancyness" on your text, create a stroke for the text, like this step tells you. Right click on the text layer in</font></span> <span><font color="rgb(65, 65, 65)">the layers list and choose "Duplicate Layer":<br /></font></span><br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic5.gif<br />
<br /><span><font color="rgb(76, 76, 75)">Now you should have two</font></span> <span><font color="rgb(76, 76, 75)">"Text"- layers on top of each other. Choose the lower "Text"- layer and</font></span> <span><font color="rgb(76, 76, 75)">change the color to something else what you have on the top "Text"- layer.</font></span> <span><font color="rgb(76, 76, 75)">Im am going to choose a simple green. Now change the size of this layer</font></span> <span><font color="rgb(76, 76, 75)">to about 2-3 pt bigger than the layer on the top, in this case to 52pt.</font></span> <span><font color="rgb(76, 76, 75)">(50pt 2pt, if you didn't get it). Now we have a stroke for our text,</font></span> <span><font color="rgb(76, 76, 75)">though it might not be perfectly around the text. You can fix this, my</font></span> <span><font color="rgb(76, 76, 75)">moving the lower layer a bit.</font></span> <span><font color="rgb(76, 76, 75)">This is how my text looks like now:</font></span><br /><br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic6.gif<br />
<br />
=== Step 6: ===<br />
<br />
Now we create the first shiny thing. Add a new layer just like we added the text layer, by clicking on the little black arrow in the corner of our canvas and choosing "Layer &gt; New Layer &gt; Gradients &gt; Linear Gradient. Now your canvas should be filled with a some colored gradient. Don't worry, we will get your text back in the next step. Which actually comes now. Choose the "Linear Gradient"- layer in the layers list and then double-click on the "Gradient"- value in the "Params" window, like we double-clicked in Step 4. Now you should see a window which calls itself the "Gradient Editor". At the bottom of this window you should see two black 'half-arrows', one on the left side and one on the right side. Click on the one, which is on the left side. (When the color of it changes to white, it is selected.) Change the color to white and the "Alpha"- value to 0. Now select the arrow on the right side and do the same thing. Now insert a new arrow (or CPoint, what ever you want to call them) by clicking in the center of the area, which is over the half-arrows with your right mouse button and select "Insert CPoint". Notice that the menu will only appear when you keep the right mouse button pressed down. Now select this arrow and change its color to white and its "Alpha" value to 50. As you may have noticed by now, the alpha amount controls the transparency of an object. Now your Gradient Editor should look like this:<br /> <br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic7.gif<br />
<br /> and your canvas something like this:<br /> http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic8.gif<br />
<br />
=== Step 7: ===<br />
<br />
Rotate and scale the "Linear Gradient"- layer with the "Normal Tool" using the control points like the video shows. <br />[http://personal.inet.fi/musiikki/ceox/synfigtuto1/vid1.swf.html Click here to view video. Opens up in new window.]<br />
<br />
=== Step 8: ===<br />
<br />
Select the "Linear Gradient"- layer in the layers list and set its "Blend Method" to "Onto" in the "Params" window. Now the Gradient layer is visible only on the layers below it. Your gradient should disappear if you placed like the video showed in the previous step. (Not on top of the text)<br /> <br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic9.gif<br />
<br />
=== Step 9: ===<br />
<br />
It's easier to do all the animations afterwards, so now we could make the other shiny effect, which I prefer to call a 'shimmer'. We start by taking the BLine tool ([[Image:draw-path_128sif.png]]) and zooming in 400% into our canvas. You can zoom in and out in the "Navigator":<br />http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic19.gif<br /> Â Now we have to draw a new object with the BLine tool ([[Image:draw-path_128sif.png]]) in to some sharp corner of our text. I chose the corner of the X, because this effect looks good on the last character(s). So now draw a shape like this one:<br /> (Insert a controller by pressing your left mouse button and close the line by clicking on the first point with your right mouse button and selecting "Loop BLine")<br /><br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic20.gif<br />
<br />
=== Step 10: ===<br />
<br />
Now zoom out to 100% again. You should now have a new layer in your layers list:<br /> [[Image:pic10.gif]]<br /> Select it by clicking on it. Now we have its parameters in the "Params" window. Change its color to white, if it isn't it aleady. You also have to set its "Feather" to 1pt and the "Type of Feather" to "Box Blur". We don't want it to be visible yet so we also have to set the "Alpha" value to 0 in the color editor. Now everything is ready for the animation. <br /><br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic11.gif<br />
<br />
== Part 2 - Animating ==<br />
<br />
=== Step 1: ===<br />
<br />
First we animate the "Linear Gradient"- layer. Select it in the layers list. Now you should have to have two green control points visible in your canvas. Choose the "Normal Tool" ([[Image:normal_icon-full.jpg]]) and select both of those points by drawing an rectangle over them. Open the keyframe- window by clicking on its icon (a golden key) in the same window where the "Params" are. Make sure your timeline indicator is at "0f" (the small orange line on a gray background) and add a new keyframe by pressing on the blue icon. Move the timeline indicator to "2s" and add a new keyframe. Now your window should look like this:<br /> <br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic12.gif<br />
<br />
=== Step 2: ===<br />
<br />
Move the time indicator to "0f" and press on the green ball in the lower right corner of your canvas. After pressing on it, its color changes to red, like it is in the screenshot. Now move the control points up a bit (this doesn't affect the animation), just to create a waypoint. Go back to "2s", where we inserted the second keyframe and move the two green control points to the right side of your text. The first animation has been created. You can move your timline indicator around to see it. This should be your timeline and canvas now:<br /> http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic13.gif<br />
<br />
=== Step 3: ===<br />
<br />
Now let's encapsulate our "Linear Gradient"- layer and the two "Text"- layers by selecting them all. (Select multiple layers by holding CTRL down and selecting the layers). Then press on one of the selected layers and choose "Encapsulate". The layers should now be groupped in one layer with a box symbol and labelled "Inline Canvas". You can open all the layers by clicking on the small arrow on the left side of the box- icon.<br /> http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic14.gif<br />
<br />
=== Step 4: ===<br />
<br />
I just noticed, that I screwed up and we have to make the whole animation a bit longer. Click on the black arrow in the upper left corner of your canvas, select "Edit" and then "Properties". A new window should pop up. Go to the "Time" tab and then set the "End Time" to 4s 2f.<br /> http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic15.gif<br />
<br />
=== Step 5: ===<br />
<br />
Select the "NewBLine(some number) Region"- layer, place the timeline indicator to "2s" and a add a keyframe, like in Step 2. Now repeat this by adding keyframes also to "3s" and "4s". Move your timeline indicator back to "2s" and press the green ball icon to get into the animate editing mode. Now open the "Colors"- window from the "Params" window and set the "Alpha" value to 1. Close the window. Move the time indicator to "3s" and set the "Alpha"- value to 100 trough the "Colors" window like before. Now move the time indicator to "4s" and set "Alpha" to 0. Now we have the shimmer in the corner of our text fading in and out in 2 seconds. Your timeline should now look like this (without those texts, of course):<br /> http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic16.gif<br />
<br />
=== Step 6: ===<br />
<br />
Your animation is basicly ready, but that shimmer needs some enchancement. First add a new layer onto the "NewBLine(some number) Region"- layer, by left clicking on it and selecting "New Layer &gt; Transform &gt; Rotate". A new layer named "Rotate" should appear. Now lets encapsulate the "Rotate" and "NewBLine..." layer like in Step 3, but just selecting the "Rotate" and "NewBline..."- layers this time. If we wouldn't do this the rotatation effect would affect our text too, but that's not what we want. Now you should have 2 "Inline Canvas"- layer groups. Open the first one by pressing on the small white arrow next to the [box]- icon. This is what your layers list should look like now:<br /> <br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic17.gif<br />
<br />
=== Step 7: ===<br />
<br />
Select both of the layers in the opened "Inline canvas" and you should see the outline of your shimmer and a new line, which has a green dot and a blue dot in both ends. Move the green dot to the center of your shimmer like this:<br /> <br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic18.gif<br />
<br />
=== Step 8: ===<br />
<br />
Make sure, you're still in the "Animate Editing Mode" (the ball in the bottom left corner of your canvas is red, if you are), place your timeline indicator to "2s" and select only the "Rotate"- layer. Now you have to set the "Amount" value to 0.01 in the "Params" window, just to set the waypoint. Move the timeline indicator to "3s" and set the "Amount"- value to 180 (for 180 degrees) and then move the timeline indicator to "4s" and the "Amount"- value to 359. <br /> Congratulations, you are done!<br /><br />[http://personal.inet.fi/musiikki/ceox/synfigtuto1/Shiny_Effects_Tutorial_1_by_Ceox.sif Here's the Synfig Studio file.]<br /><br /> And here's the final result:<br /> <br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/animation.gif<br />
<br /> Hope this tutorial helped you with something :)<br /><br /> For further questions, contact me at ceoxmusic (at) gmail (dot) com<br /><br />[http://ceox.urli.net Ceox]<br /><br /></div>Ceoxhttps://wiki.synfig.org/index.php?title=Doc:Shiny_Effects&diff=4223Doc:Shiny Effects2007-10-18T05:27:26Z<p>Ceox: /* Step 7: */</p>
<hr />
<div>HTML VERSION OF THIS, YOU CAN FIND HERE:<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/<br />
<br />
= Shiny Effects #1 by Ceox =<br />
<br />
<span>'''Skill Level:'''</span> Intermediate<span>'''<br /> Lenght:'''</span> ca. 30 minutes<br /><span>'''Version of Synfig Studio:'''</span> 0.61.07<br /><span>''''''</span><br /><br /> In this tutorial we make some shiny/glowy effects on your text.<br /> It might feel long to you, according to all of the text, but when I first tried this out, if it worked on Synfig, I did it in 5-10 minutes, so if you learn all the stuff you'll be able to do it so fast too.<br /><br />
<br />
== Part 1 - Designing ==<br />
<br />
=== Step 1: ===<br />
<br />
We start by opening Synfig Studio and creating a new document with all the default settings except these:<br /> http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic1.gif<br />
<br />
=== Step 2: ===<br />
<br />
Now we create a new text layer, so in this tutorial I'm going to use 'Ceox'. That's not my real name, but it will have to do. Start by adding the text layer:<br /> <br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic2.gif<br />
<br />
=== Step 3: ===<br />
<br />
Now you should see a "Text Layer"- text in the middle of your project. Select the text layer in the layers list, so that its background changes to blue, and you should see its parameters in the "Params" window, which is on the bottom of your workspace, if you haven't placed it somewhere else. (Click on image to enlarge, will open in new window).<br />
<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic3.gif<br />
<br />
=== Step 4: ===<br />
<br />
Now we are going to modify the text in the "Params" window. First double-click on the color in the "Value" cell and choose the color you want, with 100 "Alpha". I chose a darkish blue. Then double-click on the "Text Layer"- text, also in the "Value" cell and enter your name in to the pop-up window. After this, change the size to 50pt and the font to Arial, both by double-clicking the field in the "Value"- cell. Here's a screenshot of all things need to be modified: (I have darkened all values, that should be good to go by default, but you should anyway check out, that you have the same ones)<br /> http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic4.gif<br />
<br />
=== Step 5: (OPTIONAL) ===<br />
<br />
<span><font color="rgb(65, 65, 65)">If you want some more "fancyness" on your text, create a stroke for the text, like this step tells you. Right click on the text layer in</font></span> <span><font color="rgb(65, 65, 65)">the layers list and choose "Duplicate Layer":<br /></font></span><br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic5.gif<br />
<br /><span><font color="rgb(76, 76, 75)">Now you should have two</font></span> <span><font color="rgb(76, 76, 75)">"Text"- layers on top of each other. Choose the lower "Text"- layer and</font></span> <span><font color="rgb(76, 76, 75)">change the color to something else what you have on the top "Text"- layer.</font></span> <span><font color="rgb(76, 76, 75)">Im am going to choose a simple green. Now change the size of this layer</font></span> <span><font color="rgb(76, 76, 75)">to about 2-3 pt bigger than the layer on the top, in this case to 52pt.</font></span> <span><font color="rgb(76, 76, 75)">(50pt 2pt, if you didn't get it). Now we have a stroke for our text,</font></span> <span><font color="rgb(76, 76, 75)">though it might not be perfectly around the text. You can fix this, my</font></span> <span><font color="rgb(76, 76, 75)">moving the lower layer a bit.</font></span> <span><font color="rgb(76, 76, 75)">This is how my text looks like now:</font></span><br /><br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic6.gif<br />
<br />
=== Step 6: ===<br />
<br />
Now we create the first shiny thing. Add a new layer just like we added the text layer, by clicking on the little black arrow in the corner of our canvas and choosing "Layer &gt; New Layer &gt; Gradients &gt; Linear Gradient. Now your canvas should be filled with a some colored gradient. Don't worry, we will get your text back in the next step. Which actually comes now. Choose the "Linear Gradient"- layer in the layers list and then double-click on the "Gradient"- value in the "Params" window, like we double-clicked in Step 4. Now you should see a window which calls itself the "Gradient Editor". At the bottom of this window you should see two black 'half-arrows', one on the left side and one on the right side. Click on the one, which is on the left side. (When the color of it changes to white, it is selected.) Change the color to white and the "Alpha"- value to 0. Now select the arrow on the right side and do the same thing. Now insert a new arrow (or CPoint, what ever you want to call them) by clicking in the center of the area, which is over the half-arrows with your right mouse button and select "Insert CPoint". Notice that the menu will only appear when you keep the right mouse button pressed down. Now select this arrow and change its color to white and its "Alpha" value to 50. As you may have noticed by now, the alpha amount controls the transparency of an object. Now your Gradient Editor should look like this:<br /> <br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic7.gif<br />
<br /> and your canvas something like this:<br /> http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic8.gif<br />
<br />
=== Step 7: ===<br />
<br />
Rotate and scale the "Linear Gradient"- layer with the "Normal Tool" using the control points like the video shows. <br />[http://personal.inet.fi/musiikki/ceox/synfigtuto1/vid1.swf.html Click here to view video. Opens up in new window.]<br />
<br />
=== Step 8: ===<br />
<br />
Select the "Linear Gradient"- layer in the layers list and set its "Blend Method" to "Onto" in the "Params" window. Now the Gradient layer is visible only on the layers below it. Your gradient should disappear if you placed like the video showed in the previous step. (Not on top of the text)<br /> <br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic9.gif<br />
<br />
=== Step 9: ===<br />
<br />
It's easier to do all the animations afterwards, so now we could make the other shiny effect, which I prefer to call a 'shimmer'. We start by taking the BLine tool ([[Image:draw-path_128sif.png]]) and zooming in 400% into our canvas. You can zoom in and out in the "Navigator":<br />http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic19.gif<br /> Â Now we have to draw a new object with the BLine tool ([[Image:draw-path_128sif.png]]) in to some sharp corner of our text. I chose the corner of the X, because this effect looks good on the last character(s). So now draw a shape like this one:<br /> (Insert a controller by pressing your left mouse button and close the line by clicking on the first point with your right mouse button and selecting "Loop BLine")<br /><br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic20.gif<br />
<br />
=== Step 10: ===<br />
<br />
Now zoom out to 100% again. You should now have a new layer in your layers list:<br /> [[Image:pic10.gif]]<br /> Select it by clicking on it. Now we have its parameters in the "Params" window. Change its color to white, if it isn't it aleady. You also have to set its "Feather" to 1pt and the "Type of Feather" to "Box Blur". We don't want it to be visible yet so we also have to set the "Alpha" value to 0 in the color editor. Now everything is ready for the animation. <br /><br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic11.gif<br />
<br />
== Part 2 - Animating ==<br />
<br />
=== Step 1: ===<br />
<br />
First we animate the "Linear Gradient"- layer. Select it in the layers list. Now you should have to have two green control points visible in your canvas. Choose the "Normal Tool" ([[Image:normal_icon-full.jpg]]) and select both of those points by drawing an rectangle over them. Open the keyframe- window by clicking on its icon (a golden key) in the same window where the "Params" are. Make sure your timeline indicator is at "0f" (the small orange line on a gray background) and add a new keyframe by pressing on the blue icon. Move the timeline indicator to "2s" and add a new keyframe. Now your window should look like this:<br /> <br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic12.gif<br />
<br />
=== Step 2: ===<br />
<br />
Move the time indicator to "0f" and press on the green ball in the lower right corner of your canvas. After pressing on it, its color changes to red, like it is in the screenshot. Now move the control points up a bit (this doesn't affect the animation), just to create a waypoint. Go back to "2s", where we inserted the second keyframe and move the two green control points to the right side of your text. The first animation has been created. You can move your timline indicator around to see it. This should be your timeline and canvas now:<br /> http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic13.gif<br />
<br />
=== Step 3: ===<br />
<br />
Now let's encapsulate our "Linear Gradient"- layer and the two "Text"- layers by selecting them all. (Select multiple layers by holding CTRL down and selecting the layers). Then press on one of the selected layers and choose "Encapsulate". The layers should now be groupped in one layer with a box symbol and labelled "Inline Canvas". You can open all the layers by clicking on the small arrow on the left side of the box- icon.<br /> http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic14.gif<br />
<br />
=== Step 4: ===<br />
<br />
I just noticed, that I screwed up and we have to make the whole animation a bit longer. Click on the black arrow in the upper left corner of your canvas, select "Edit" and then "Properties". A new window should pop up. Go to the "Time" tab and then set the "End Time" to 4s 2f.<br /> http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic15.gif<br />
<br />
=== Step 5: ===<br />
<br />
Select the "NewBLine(some number) Region"- layer, place the timeline indicator to "2s" and a add a keyframe, like in Step 2. Now repeat this by adding keyframes also to "3s" and "4s". Move your timeline indicator back to "2s" and press the green ball icon to get into the animate editing mode. Now open the "Colors"- window from the "Params" window and set the "Alpha" value to 1. Close the window. Move the time indicator to "3s" and set the "Alpha"- value to 100 trough the "Colors" window like before. Now move the time indicator to "4s" and set "Alpha" to 0. Now we have the shimmer in the corner of our text fading in and out in 2 seconds. Your timeline should now look like this (without those texts, of course):<br /> http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic16.gif<br />
<br />
=== Step 6: ===<br />
<br />
Your animation is basicly ready, but that shimmer needs some enchancement. First add a new layer onto the "NewBLine(some number) Region"- layer, by left clicking on it and selecting "New Layer &gt; Transform &gt; Rotate". A new layer named "Rotate" should appear. Now lets encapsulate the "Rotate" and "NewBLine..." layer like in Step 3, but just selecting the "Rotate" and "NewBline..."- layers this time. If we wouldn't do this the rotatation effect would affect our text too, but that's not what we want. Now you should have 2 "Inline Canvas"- layer groups. Open the first one by pressing on the small white arrow next to the [box]- icon. This is what your layers list should look like now:<br /> <br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic17.gif<br />
<br />
=== Step 7: ===<br />
<br />
Select both of the layers in the opened "Inline canvas" and you should see the outline of your shimmer and a new line, which has a green dot and a blue dot in both ends. Move the green dot to the center of your shimmer like this:<br /> <br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic18.gif<br />
<br />
=== Step 8: ===<br />
<br />
Make sure, you're still in the "Animate Editing Mode" (the ball in the bottom left corner of your canvas is red, if you are), place your timeline indicator to "2s" and select only the "Rotate"- layer. Now you have to set the "Amount" value to 0.01 in the "Params" window, just to set the waypoint. Move the timeline indicator to "3s" and set the "Amount"- value to 180 (for 180 degrees) and then move the timeline indicator to "4s" and the "Amount"- value to 359. <br /> Congratulations, you are done!<br /><br /><br /><br /> And here's the final result:<br /> <br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/animation.gif<br />
<br /> Hope this tutorial helped you with something :)<br /><br /> For further questions, contact me at ceoxmusic (at) gmail (dot) com<br /><br />[http://ceox.urli.net Ceox]<br /><br /></div>Ceoxhttps://wiki.synfig.org/index.php?title=Tutorials&diff=4201Tutorials2007-10-17T17:35:18Z<p>Ceox: </p>
<hr />
<div>This is an index of all of the tutorials for Synfig Studio.<br />
<br />
{| border="1" cellspacing="0" align="center" width="80%"<br />
|'''Tutorial Name'''||'''Description''' || '''Level'''<br />
|-<br />
| [[Getting Started]] [[http://www.synfig.com/synfig_tutorial.pdf PDF]] || New to Synfig Studio? This tutorial will help you get the gist of things || Basic<br />
|-<br />
| [[Animation Basics]] || Introduction to making things move, the timeline, and the [[Keyframes Dialog|keyframes dialog]]. || Basic<br />
|-<br />
| [[Adding Layers]] || Introduction to the Layers palette, and basics of compositing. || Basic<br />
|-<br />
| [[Creating Shapes]] || Introduction to making shapes using the bline and normal tools. || Basic<br />
|-<br />
| [[How do I|How do I...?]] || Quick tutorials, and commonly-needed tasks. || Basic<br />
|-<br />
| [[PictureTutorial|Timonator's newbie tutorial with pictures!]] || a WIP tutorial with lots of screenshots. || Not defined<br />
|-<br />
| [[Flower Animation]] || A beginner tutorial, showing animation with blines. It could be a good tutorial to follow, after the Animations Basics one. || Intermediate<br />
|-<br />
| [[Shiny Effects]] #1 || A tutorial of making some shiny effects. || Intermediate<br />
|-<br />
| [[Building a magnifying glass]] [[http://www.musikboden.se/synfigfiles/tutorial_magnifying_glass.pdf PDF]] || A tutorial showing how to build a magnifying glass. || Intermediate<br />
|-<br />
| [[Following a BLine]] || A tutorial showing how to make a layer follow a BLine rotating to face the direction it's moving in. || Advanced<br />
|-<br />
| [[Walk Cycle]] || Tutorial showing import of multiple still frames, and rotoscoping to generate a walk cycle animation || Advanced<br />
|-<br />
| [[Reuse Animations]] || Tutorial that explains how to reuse "poses" of portions of the scene without interfere on the rest of it. || Advanced<br />
|-<br />
| [[Switching Scenes]] || Tutorial that explains how to edit a collection of .sif files together and switch back and forth between them. || Advanced<br />
|-<br />
| [[Requested Tutorials]] || Need a tutorial? Request it here. || N/A<br />
|}<br />
<br />
== See Also ==<br />
* [[Keyboard Shortcuts]]<br />
<br />
General animation tutorial links:<br />
<br />
[http://www.keithlango.com/tutorials/old/popThru/popThru.html Keith Largo Tutes]<br />
<br />
[http://www.animationarchive.org/2006/05/meta-100000-animation-drawing-course.html The Animation Drawing Course at The Animation Archive] <br />
<br />
[http://www.garycmartin.com/mouth_shapes.html Lip Sync]</div>Ceoxhttps://wiki.synfig.org/index.php?title=Doc:Shiny_Effects&diff=4200Doc:Shiny Effects2007-10-17T17:30:28Z<p>Ceox: </p>
<hr />
<div>HTML VERSION OF THIS, YOU CAN FIND HERE:<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/<br />
<br />
= Shiny Effects #1 by Ceox =<br />
<br />
<span>'''Skill Level:'''</span> Intermediate<span>'''<br /> Lenght:'''</span> ca. 30 minutes<br /><span>'''Version of Synfig Studio:'''</span> 0.61.07<br /><span>''''''</span><br /><br /> In this tutorial we make some shiny/glowy effects on your text.<br /> It might feel long to you, according to all of the text, but when I first tried this out, if it worked on Synfig, I did it in 5-10 minutes, so if you learn all the stuff you'll be able to do it so fast too.<br /><br />
<br />
== Part 1 - Designing ==<br />
<br />
=== Step 1: ===<br />
<br />
We start by opening Synfig Studio and creating a new document with all the default settings except these:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic1.gif]]<br />
<br />
=== Step 2: ===<br />
<br />
Now we create a new text layer, so in this tutorial I'm going to use 'Ceox'. That's not my real name, but it will have to do. Start by adding the text layer:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic2.gif]]<br />
<br />
=== Step 3: ===<br />
<br />
Now you should see a "Text Layer"- text in the middle of your project. Select the text layer in the layers list, so that its background changes to blue, and you should see its parameters in the "Params" window, which is on the bottom of your workspace, if you haven't placed it somewhere else. (Click on image to enlarge, will open in new window).<br />
<br />
=== [pic3.gif [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic3.gif]]] ===<br />
<br />
=== Step 4: ===<br />
<br />
Now we are going to modify the text in the "Params" window. First double-click on the color in the "Value" cell and choose the color you want, with 100 "Alpha". I chose a darkish blue. Then double-click on the "Text Layer"- text, also in the "Value" cell and enter your name in to the pop-up window. After this, change the size to 50pt and the font to Arial, both by double-clicking the field in the "Value"- cell. Here's a screenshot of all things need to be modified: (I have darkened all values, that should be good to go by default, but you should anyway check out, that you have the same ones)<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic4.gif]]<br />
<br />
=== Step 5: (OPTIONAL) ===<br />
<br />
<span><font color="rgb(65, 65, 65)">If you want some more "fancyness" on your text, create a stroke for the text, like this step tells you. Right click on the text layer in</font></span> <span><font color="rgb(65, 65, 65)">the layers list and choose "Duplicate Layer":<br /></font></span>Â [[Image:pic5.gif]]<br /><span><font color="rgb(76, 76, 75)">Now you should have two</font></span> <span><font color="rgb(76, 76, 75)">"Text"- layers on top of each other. Choose the lower "Text"- layer and</font></span> <span><font color="rgb(76, 76, 75)">change the color to something else what you have on the top "Text"- layer.</font></span> <span><font color="rgb(76, 76, 75)">Im am going to choose a simple green. Now change the size of this layer</font></span> <span><font color="rgb(76, 76, 75)">to about 2-3 pt bigger than the layer on the top, in this case to 52pt.</font></span> <span><font color="rgb(76, 76, 75)">(50pt 2pt, if you didn't get it). Now we have a stroke for our text,</font></span> <span><font color="rgb(76, 76, 75)">though it might not be perfectly around the text. You can fix this, my</font></span> <span><font color="rgb(76, 76, 75)">moving the lower layer a bit.</font></span> <span><font color="rgb(76, 76, 75)">This is how my text looks like now:</font></span><br />[[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic6.gif]]<br />
<br />
=== Step 6: ===<br />
<br />
Now we create the first shiny thing. Add a new layer just like we added the text layer, by clicking on the little black arrow in the corner of our canvas and choosing "Layer &gt; New Layer &gt; Gradients &gt; Linear Gradient. Now your canvas should be filled with a some colored gradient. Don't worry, we will get your text back in the next step. Which actually comes now. Choose the "Linear Gradient"- layer in the layers list and then double-click on the "Gradient"- value in the "Params" window, like we double-clicked in Step 4. Now you should see a window which calls itself the "Gradient Editor". At the bottom of this window you should see two black 'half-arrows', one on the left side and one on the right side. Click on the one, which is on the left side. (When the color of it changes to white, it is selected.) Change the color to white and the "Alpha"- value to 0. Now select the arrow on the right side and do the same thing. Now insert a new arrow (or CPoint, what ever you want to call them) by clicking in the center of the area, which is over the half-arrows with your right mouse button and select "Insert CPoint". Notice that the menu will only appear when you keep the right mouse button pressed down. Now select this arrow and change its color to white and its "Alpha" value to 50. As you may have noticed by now, the alpha amount controls the transparency of an object. Now your Gradient Editor should look like this:<br />  [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic7.gif]]<br /> and your canvas something like this:<br />  [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic8.gif]]<br />
<br />
=== Step 7: ===<br />
<br />
Rotate and scale the "Linear Gradient"- layer using the control points like the video shows. <br />[vid1.swf.html Click here to view video. Opens up in new window.]<br />
<br />
=== Step 8: ===<br />
<br />
Select the "Linear Gradient"- layer in the layers list and set its "Blend Method" to "Onto" in the "Params" window. Now the Gradient layer is visible only on the layers below it. Your gradient should disappear if you placed like the video showed in the previous step. (Not on top of the text)<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic9.gif]]<br />
<br />
=== Step 9: ===<br />
<br />
It's easier to do all the animations afterwards, so now we could make the other shiny effect, which I prefer to call a 'shimmer'. We start by taking the BLine tool ([[Image:draw-path_128sif.png]]) and zooming in 400% into our canvas. You can zoom in and out in the "Navigator":<br />[[Image:pic19.gif]]<br />  Now we have to draw a new object with the BLine tool ([[Image:draw-path_128sif.png]]) in to some sharp corner of our text. I chose the corner of the X, because this effect looks good on the last character(s). So now draw a shape like this one:<br /> (Insert a controller by pressing your left mouse button and close the line by clicking on the first point with your right mouse button and selecting "Loop BLine")<br />[[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic20.gif]]<br />
<br />
=== Step 10: ===<br />
<br />
Now zoom out to 100% again. You should now have a new layer in your layers list:<br /> Â [[Image:pic10.gif]]<br /> Select it by clicking on it. Now we have its parameters in the "Params" window. Change its color to white, if it isn't it aleady. You also have to set its "Feather" to 1pt and the "Type of Feather" to "Box Blur". We don't want it to be visible yet so we also have to set the "Alpha" value to 0 in the color editor. Now everything is ready for the animation. <br />[[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic11.gif]]<br />
<br />
== Part 2 - Animating ==<br />
<br />
=== Step 1: ===<br />
<br />
First we animate the "Linear Gradient"- layer. Select it in the layers list. Now you should have to have two green control points visible in your canvas. Choose the "Normal Tool" ([[Image:normal_icon-full.jpg]]) and select both of those points by drawing an rectangle over them. Open the keyframe- window by clicking on its icon (a golden key) in the same window where the "Params" are. Make sure your timeline indicator is at "0f" (the small orange line on a gray background) and add a new keyframe by pressing on the blue icon. Move the timeline indicator to "2s" and add a new keyframe. Now your window should look like this:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic12.gif]]<br />
<br />
=== Step 2: ===<br />
<br />
Move the time indicator to "0f" and press on the green ball in the lower right corner of your canvas. After pressing on it, its color changes to red, like it is in the screenshot. Now move the control points up a bit (this doesn't affect the animation), just to create a waypoint. Go back to "2s", where we inserted the second keyframe and move the two green control points to the right side of your text. The first animation has been created. You can move your timline indicator around to see it. This should be your timeline and canvas now:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic13.gif]]<br />
<br />
=== Step 3: ===<br />
<br />
Now let's encapsulate our "Linear Gradient"- layer and the two "Text"- layers by selecting them all. (Select multiple layers by holding CTRL down and selecting the layers). Then press on one of the selected layers and choose "Encapsulate". The layers should now be groupped in one layer with a box symbol and labelled "Inline Canvas". You can open all the layers by clicking on the small arrow on the left side of the box- icon.<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic14.gif]]<br />
<br />
=== Step 4: ===<br />
<br />
I just noticed, that I screwed up and we have to make the whole animation a bit longer. Click on the black arrow in the upper left corner of your canvas, select "Edit" and then "Properties". A new window should pop up. Go to the "Time" tab and then set the "End Time" to 4s 2f.<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic15.gif]]<br />
<br />
=== Step 5: ===<br />
<br />
Select the "NewBLine(some number) Region"- layer, place the timeline indicator to "2s" and a add a keyframe, like in Step 2. Now repeat this by adding keyframes also to "3s" and "4s". Move your timeline indicator back to "2s" and press the green ball icon to get into the animate editing mode. Now open the "Colors"- window from the "Params" window and set the "Alpha" value to 1. Close the window. Move the time indicator to "3s" and set the "Alpha"- value to 100 trough the "Colors" window like before. Now move the time indicator to "4s" and set "Alpha" to 0. Now we have the shimmer in the corner of our text fading in and out in 2 seconds. Your timeline should now look like this (without those texts, of course):<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic16.gif]]<br />
<br />
=== Step 6: ===<br />
<br />
Your animation is basicly ready, but that shimmer needs some enchancement. First add a new layer onto the "NewBLine(some number) Region"- layer, by left clicking on it and selecting "New Layer &gt; Transform &gt; Rotate". A new layer named "Rotate" should appear. Now lets encapsulate the "Rotate" and "NewBLine..." layer like in Step 3, but just selecting the "Rotate" and "NewBline..."- layers this time. If we wouldn't do this the rotatation effect would affect our text too, but that's not what we want. Now you should have 2 "Inline Canvas"- layer groups. Open the first one by pressing on the small white arrow next to the [box]- icon. This is what your layers list should look like now:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic17.gif]]<br />
<br />
=== Step 7: ===<br />
<br />
Select both of the layers in the opened "Inline canvas" and you should see the outline of your shimmer and a new line, which has a green dot and a blue dot in both ends. Move the green dot to the center of your shimmer like this:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic18.gif]]<br />
<br />
=== Step 8: ===<br />
<br />
Make sure, you're still in the "Animate Editing Mode" (the ball in the bottom left corner of your canvas is red, if you are), place your timeline indicator to "2s" and select only the "Rotate"- layer. Now you have to set the "Amount" value to 0.01 in the "Params" window, just to set the waypoint. Move the timeline indicator to "3s" and set the "Amount"- value to 180 (for 180 degrees) and then move the timeline indicator to "4s" and the "Amount"- value to 359. <br /> Congratulations, you are done!<br /><br /><br /><br /> And here's the final result:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/animation.gif]]<br /> Hope this tutorial helped you with something :)<br /><br /> For further questions, contact me at ceoxmusic (at) gmail (dot) com<br /><br />[http://ceox.urli.net Ceox]<br /><br /></div>Ceoxhttps://wiki.synfig.org/index.php?title=Doc:Shiny_Effects&diff=4199Doc:Shiny Effects2007-10-17T17:29:36Z<p>Ceox: </p>
<hr />
<div>HTML VERSION OF THIS, YOU CAN FIND HERE:<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/<br />
<br />
= Shiny Effects #1 by Ceox =<br />
<br />
<span>'''Skill Level:'''</span> Intermediate<span>'''<br /> Lenght:'''</span> ca. 30 minutes<br /><span>'''Version of Synfig Studio:'''</span> 0.61.07<br /><span>''''''</span><br /><br /> In this tutorial we make some shiny/glowy effects on your text.<br /> It might feel long to you, according to all of the text, but when I first tried this out, if it worked on Synfig, I did it in 5-10 minutes, so if you learn all the stuff you'll be able to do it so fast too.<br /><br />
<br />
== Part 1 - Designing ==<br />
<br />
=== Step 1: ===<br />
<br />
We start by opening Synfig Studio and creating a new document with all the default settings except these:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic1.gif]]<br />
<br />
=== Step 2: ===<br />
<br />
Now we create a new text layer, so in this tutorial I'm going to use 'Ceox'. That's not my real name, but it will have to do. Start by adding the text layer:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic2.gif]]<br />
<br />
=== Step 3: ===<br />
<br />
Now you should see a "Text Layer"- text in the middle of your project. Select the text layer in the layers list, so that its background changes to blue, and you should see its parameters in the "Params" window, which is on the bottom of your workspace, if you haven't placed it somewhere else. (Click on image to enlarge, will open in new window).<br />
<br />
=== [pic3.gif [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic3.gif]]] ===<br />
<br />
=== Step 4: ===<br />
<br />
Now we are going to modify the text in the "Params" window. First double-click on the color in the "Value" cell and choose the color you want, with 100 "Alpha". I chose a darkish blue. Then double-click on the "Text Layer"- text, also in the "Value" cell and enter your name in to the pop-up window. After this, change the size to 50pt and the font to Arial, both by double-clicking the field in the "Value"- cell. Here's a screenshot of all things need to be modified: (I have darkened all values, that should be good to go by default, but you should anyway check out, that you have the same ones)<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic4.gif]]<br />
<br />
=== Step 5: (OPTIONAL) ===<br />
<br />
<span><font color="rgb(65, 65, 65)">If you want some more "fancyness" on your text, create a stroke for the text, like this step tells you. Right click on the text layer in</font></span> <span><font color="rgb(65, 65, 65)">the layers list and choose "Duplicate Layer":<br /></font></span>Â [[Image:pic5.gif]]<br /><span><font color="rgb(76, 76, 75)">Now you should have two</font></span> <span><font color="rgb(76, 76, 75)">"Text"- layers on top of each other. Choose the lower "Text"- layer and</font></span> <span><font color="rgb(76, 76, 75)">change the color to something else what you have on the top "Text"- layer.</font></span> <span><font color="rgb(76, 76, 75)">Im am going to choose a simple green. Now change the size of this layer</font></span> <span><font color="rgb(76, 76, 75)">to about 2-3 pt bigger than the layer on the top, in this case to 52pt.</font></span> <span><font color="rgb(76, 76, 75)">(50pt 2pt, if you didn't get it). Now we have a stroke for our text,</font></span> <span><font color="rgb(76, 76, 75)">though it might not be perfectly around the text. You can fix this, my</font></span> <span><font color="rgb(76, 76, 75)">moving the lower layer a bit.</font></span> <span><font color="rgb(76, 76, 75)">This is how my text looks like now:</font></span><br />[[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic6.gif]]<br />
<br />
=== Step 6: ===<br />
<br />
Now we create the first shiny thing. Add a new layer just like we added the text layer, by clicking on the little black arrow in the corner of our canvas and choosing "Layer &gt; New Layer &gt; Gradients &gt; Linear Gradient. Now your canvas should be filled with a some colored gradient. Don't worry, we will get your text back in the next step. Which actually comes now. Choose the "Linear Gradient"- layer in the layers list and then double-click on the "Gradient"- value in the "Params" window, like we double-clicked in Step 4. Now you should see a window which calls itself the "Gradient Editor". At the bottom of this window you should see two black 'half-arrows', one on the left side and one on the right side. Click on the one, which is on the left side. (When the color of it changes to white, it is selected.) Change the color to white and the "Alpha"- value to 0. Now select the arrow on the right side and do the same thing. Now insert a new arrow (or CPoint, what ever you want to call them) by clicking in the center of the area, which is over the half-arrows with your right mouse button and select "Insert CPoint". Notice that the menu will only appear when you keep the right mouse button pressed down. Now select this arrow and change its color to white and its "Alpha" value to 50. As you may have noticed by now, the alpha amount controls the transparency of an object. Now your Gradient Editor should look like this:<br />  [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic7.gif]]<br /> and your canvas something like this:<br />  [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic8.gif]]<br />
<br />
=== Step 7: ===<br />
<br />
Rotate and scale the "Linear Gradient"- layer using the control points like the video shows. <br />[vid1.swf.html Click here to view video. Opens up in new window.]<br />
<br />
=== Step 8: ===<br />
<br />
Select the "Linear Gradient"- layer in the layers list and set its "Blend Method" to "Onto" in the "Params" window. Now the Gradient layer is visible only on the layers below it. Your gradient should disappear if you placed like the video showed in the previous step. (Not on top of the text)<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic9.gif]]<br />
<br />
=== Step 9: ===<br />
<br />
It's easier to do all the animations afterwards, so now we could make the other shiny effect, which I prefer to call a 'shimmer'. We start by taking the BLine tool ([[Image:draw-path_128sif.png]]) and zooming in 400% into our canvas. You can zoom in and out in the "Navigator":<br />[[Image:pic19.gif]]<br />  Now we have to draw a new object with the BLine tool ([[Image:draw-path_128sif.png]]) in to some sharp corner of our text. I chose the corner of the X, because this effect looks good on the last character(s). So now draw a shape like this one:<br /> (Insert a controller by pressing your left mouse button and close the line by clicking on the first point with your right mouse button and selecting "Loop BLine")<br />[[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic20.gif]]<br />
<br />
=== Step 10: ===<br />
<br />
Now zoom out to 100% again. You should now have a new layer in your layers list:<br /> Â [[Image:pic10.gif]]<br /> Select it by clicking on it. Now we have its parameters in the "Params" window. Change its color to white, if it isn't it aleady. You also have to set its "Feather" to 1pt and the "Type of Feather" to "Box Blur". We don't want it to be visible yet so we also have to set the "Alpha" value to 0 in the color editor. Now everything is ready for the animation. <br />[[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic11.gif]]<br />
<br />
== Part 2 - Animating ==<br />
<br />
=== Step 1: ===<br />
<br />
First we animate the "Linear Gradient"- layer. Select it in the layers list. Now you should have to have two green control points visible in your canvas. Choose the "Normal Tool" ([[Image:normal_icon-full.jpg]]) and select both of those points by drawing an rectangle over them. Open the keyframe- window by clicking on its icon (a golden key) in the same window where the "Params" are. Make sure your timeline indicator is at "0f" (the small orange line on a gray background) and add a new keyframe by pressing on the blue icon. Move the timeline indicator to "2s" and add a new keyframe. Now your window should look like this:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic12.gif]]<br />
<br />
=== Step 2: ===<br />
<br />
Move the time indicator to "0f" and press on the green ball in the lower right corner of your canvas. After pressing on it, its color changes to red, like it is in the screenshot. Now move the control points up a bit (this doesn't affect the animation), just to create a waypoint. Go back to "2s", where we inserted the second keyframe and move the two green control points to the right side of your text. The first animation has been created. You can move your timline indicator around to see it. This should be your timeline and canvas now:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic13.gif]]<br />
<br />
=== Step 3: ===<br />
<br />
Now let's encapsulate our "Linear Gradient"- layer and the two "Text"- layers by selecting them all. (Select multiple layers by holding CTRL down and selecting the layers). Then press on one of the selected layers and choose "Encapsulate". The layers should now be groupped in one layer with a box symbol and labelled "Inline Canvas". You can open all the layers by clicking on the small arrow on the left side of the box- icon.<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic14.gif]]<br />
<br />
=== Step 4: ===<br />
<br />
I just noticed, that I screwed up and we have to make the whole animation a bit longer. Click on the black arrow in the upper left corner of your canvas, select "Edit" and then "Properties". A new window should pop up. Go to the "Time" tab and then set the "End Time" to 4s 2f.<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic15.gif]]<br />
<br />
=== Step 5: ===<br />
<br />
Select the "NewBLine(some number) Region"- layer, place the timeline indicator to "2s" and a add a keyframe, like in Step 2. Now repeat this by adding keyframes also to "3s" and "4s". Move your timeline indicator back to "2s" and press the green ball icon to get into the animate editing mode. Now open the "Colors"- window from the "Params" window and set the "Alpha" value to 1. Close the window. Move the time indicator to "3s" and set the "Alpha"- value to 100 trough the "Colors" window like before. Now move the time indicator to "4s" and set "Alpha" to 0. Now we have the shimmer in the corner of our text fading in and out in 2 seconds. Your timeline should now look like this (without those texts, of course):<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic16.gif]]<br />
<br />
=== Step 6: ===<br />
<br />
Your animation is basicly ready, but that shimmer needs some enchancement. First add a new layer onto the "NewBLine(some number) Region"- layer, by left clicking on it and selecting "New Layer &gt; Transform &gt; Rotate". A new layer named "Rotate" should appear. Now lets encapsulate the "Rotate" and "NewBLine..." layer like in Step 3, but just selecting the "Rotate" and "NewBline..."- layers this time. If we wouldn't do this the rotatation effect would affect our text too, but that's not what we want. Now you should have 2 "Inline Canvas"- layer groups. Open the first one by pressing on the small white arrow next to the [box]- icon. This is what your layers list should look like now:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic17.gif]]<br />
<br />
=== Step 7: ===<br />
<br />
Select both of the layers in the opened "Inline canvas" and you should see the outline of your shimmer and a new line, which has a green dot and a blue dot in both ends. Move the green dot to the center of your shimmer like this:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic18.gif]]<br />
<br />
=== Step 8: ===<br />
<br />
Make sure, you're still in the "Animate Editing Mode" (the ball in the bottom left corner of your canvas is red, if you are), place your timeline indicator to "2s" and select only the "Rotate"- layer. Now you have to set the "Amount" value to 0.01 in the "Params" window, just to set the waypoint. Move the timeline indicator to "3s" and set the "Amount"- value to 180 (for 180 degrees) and then move the timeline indicator to "4s" and the "Amount"- value to 359. <br /> Congratulations, you are done!<br /><br />[Shiny_Effects_Tutorial_1_by_Ceox.sif Heres the .sfz file.]<br /><br /> And here's the final result:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/animation.gif]]<br /> Hope this tutorial helped you with something :)<br /><br /> For further questions, contact me at ceoxmusic (at) gmail (dot) com<br /><br />[http://ceox.urli.net Ceox]<br /><br /></div>Ceoxhttps://wiki.synfig.org/index.php?title=Doc:Shiny_Effects&diff=4198Doc:Shiny Effects2007-10-17T17:29:20Z<p>Ceox: </p>
<hr />
<div>== HTML VERSION OF THIS, YOU CAN FIND HERE:<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/ ==<br />
<br />
= Shiny Effects #1 by Ceox =<br />
<br />
<span>'''Skill Level:'''</span> Intermediate<span>'''<br /> Lenght:'''</span> ca. 30 minutes<br /><span>'''Version of Synfig Studio:'''</span> 0.61.07<br /><span>''''''</span><br /><br /> In this tutorial we make some shiny/glowy effects on your text.<br /> It might feel long to you, according to all of the text, but when I first tried this out, if it worked on Synfig, I did it in 5-10 minutes, so if you learn all the stuff you'll be able to do it so fast too.<br /><br />
<br />
== Part 1 - Designing ==<br />
<br />
=== Step 1: ===<br />
<br />
We start by opening Synfig Studio and creating a new document with all the default settings except these:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic1.gif]]<br />
<br />
=== Step 2: ===<br />
<br />
Now we create a new text layer, so in this tutorial I'm going to use 'Ceox'. That's not my real name, but it will have to do. Start by adding the text layer:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic2.gif]]<br />
<br />
=== Step 3: ===<br />
<br />
Now you should see a "Text Layer"- text in the middle of your project. Select the text layer in the layers list, so that its background changes to blue, and you should see its parameters in the "Params" window, which is on the bottom of your workspace, if you haven't placed it somewhere else. (Click on image to enlarge, will open in new window).<br />
<br />
=== [pic3.gif [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic3.gif]]] ===<br />
<br />
=== Step 4: ===<br />
<br />
Now we are going to modify the text in the "Params" window. First double-click on the color in the "Value" cell and choose the color you want, with 100 "Alpha". I chose a darkish blue. Then double-click on the "Text Layer"- text, also in the "Value" cell and enter your name in to the pop-up window. After this, change the size to 50pt and the font to Arial, both by double-clicking the field in the "Value"- cell. Here's a screenshot of all things need to be modified: (I have darkened all values, that should be good to go by default, but you should anyway check out, that you have the same ones)<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic4.gif]]<br />
<br />
=== Step 5: (OPTIONAL) ===<br />
<br />
<span><font color="rgb(65, 65, 65)">If you want some more "fancyness" on your text, create a stroke for the text, like this step tells you. Right click on the text layer in</font></span> <span><font color="rgb(65, 65, 65)">the layers list and choose "Duplicate Layer":<br /></font></span>Â [[Image:pic5.gif]]<br /><span><font color="rgb(76, 76, 75)">Now you should have two</font></span> <span><font color="rgb(76, 76, 75)">"Text"- layers on top of each other. Choose the lower "Text"- layer and</font></span> <span><font color="rgb(76, 76, 75)">change the color to something else what you have on the top "Text"- layer.</font></span> <span><font color="rgb(76, 76, 75)">Im am going to choose a simple green. Now change the size of this layer</font></span> <span><font color="rgb(76, 76, 75)">to about 2-3 pt bigger than the layer on the top, in this case to 52pt.</font></span> <span><font color="rgb(76, 76, 75)">(50pt 2pt, if you didn't get it). Now we have a stroke for our text,</font></span> <span><font color="rgb(76, 76, 75)">though it might not be perfectly around the text. You can fix this, my</font></span> <span><font color="rgb(76, 76, 75)">moving the lower layer a bit.</font></span> <span><font color="rgb(76, 76, 75)">This is how my text looks like now:</font></span><br />[[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic6.gif]]<br />
<br />
=== Step 6: ===<br />
<br />
Now we create the first shiny thing. Add a new layer just like we added the text layer, by clicking on the little black arrow in the corner of our canvas and choosing "Layer &gt; New Layer &gt; Gradients &gt; Linear Gradient. Now your canvas should be filled with a some colored gradient. Don't worry, we will get your text back in the next step. Which actually comes now. Choose the "Linear Gradient"- layer in the layers list and then double-click on the "Gradient"- value in the "Params" window, like we double-clicked in Step 4. Now you should see a window which calls itself the "Gradient Editor". At the bottom of this window you should see two black 'half-arrows', one on the left side and one on the right side. Click on the one, which is on the left side. (When the color of it changes to white, it is selected.) Change the color to white and the "Alpha"- value to 0. Now select the arrow on the right side and do the same thing. Now insert a new arrow (or CPoint, what ever you want to call them) by clicking in the center of the area, which is over the half-arrows with your right mouse button and select "Insert CPoint". Notice that the menu will only appear when you keep the right mouse button pressed down. Now select this arrow and change its color to white and its "Alpha" value to 50. As you may have noticed by now, the alpha amount controls the transparency of an object. Now your Gradient Editor should look like this:<br />  [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic7.gif]]<br /> and your canvas something like this:<br />  [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic8.gif]]<br />
<br />
=== Step 7: ===<br />
<br />
Rotate and scale the "Linear Gradient"- layer using the control points like the video shows. <br />[vid1.swf.html Click here to view video. Opens up in new window.]<br />
<br />
=== Step 8: ===<br />
<br />
Select the "Linear Gradient"- layer in the layers list and set its "Blend Method" to "Onto" in the "Params" window. Now the Gradient layer is visible only on the layers below it. Your gradient should disappear if you placed like the video showed in the previous step. (Not on top of the text)<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic9.gif]]<br />
<br />
=== Step 9: ===<br />
<br />
It's easier to do all the animations afterwards, so now we could make the other shiny effect, which I prefer to call a 'shimmer'. We start by taking the BLine tool ([[Image:draw-path_128sif.png]]) and zooming in 400% into our canvas. You can zoom in and out in the "Navigator":<br />[[Image:pic19.gif]]<br />  Now we have to draw a new object with the BLine tool ([[Image:draw-path_128sif.png]]) in to some sharp corner of our text. I chose the corner of the X, because this effect looks good on the last character(s). So now draw a shape like this one:<br /> (Insert a controller by pressing your left mouse button and close the line by clicking on the first point with your right mouse button and selecting "Loop BLine")<br />[[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic20.gif]]<br />
<br />
=== Step 10: ===<br />
<br />
Now zoom out to 100% again. You should now have a new layer in your layers list:<br /> Â [[Image:pic10.gif]]<br /> Select it by clicking on it. Now we have its parameters in the "Params" window. Change its color to white, if it isn't it aleady. You also have to set its "Feather" to 1pt and the "Type of Feather" to "Box Blur". We don't want it to be visible yet so we also have to set the "Alpha" value to 0 in the color editor. Now everything is ready for the animation. <br />[[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic11.gif]]<br />
<br />
== Part 2 - Animating ==<br />
<br />
=== Step 1: ===<br />
<br />
First we animate the "Linear Gradient"- layer. Select it in the layers list. Now you should have to have two green control points visible in your canvas. Choose the "Normal Tool" ([[Image:normal_icon-full.jpg]]) and select both of those points by drawing an rectangle over them. Open the keyframe- window by clicking on its icon (a golden key) in the same window where the "Params" are. Make sure your timeline indicator is at "0f" (the small orange line on a gray background) and add a new keyframe by pressing on the blue icon. Move the timeline indicator to "2s" and add a new keyframe. Now your window should look like this:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic12.gif]]<br />
<br />
=== Step 2: ===<br />
<br />
Move the time indicator to "0f" and press on the green ball in the lower right corner of your canvas. After pressing on it, its color changes to red, like it is in the screenshot. Now move the control points up a bit (this doesn't affect the animation), just to create a waypoint. Go back to "2s", where we inserted the second keyframe and move the two green control points to the right side of your text. The first animation has been created. You can move your timline indicator around to see it. This should be your timeline and canvas now:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic13.gif]]<br />
<br />
=== Step 3: ===<br />
<br />
Now let's encapsulate our "Linear Gradient"- layer and the two "Text"- layers by selecting them all. (Select multiple layers by holding CTRL down and selecting the layers). Then press on one of the selected layers and choose "Encapsulate". The layers should now be groupped in one layer with a box symbol and labelled "Inline Canvas". You can open all the layers by clicking on the small arrow on the left side of the box- icon.<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic14.gif]]<br />
<br />
=== Step 4: ===<br />
<br />
I just noticed, that I screwed up and we have to make the whole animation a bit longer. Click on the black arrow in the upper left corner of your canvas, select "Edit" and then "Properties". A new window should pop up. Go to the "Time" tab and then set the "End Time" to 4s 2f.<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic15.gif]]<br />
<br />
=== Step 5: ===<br />
<br />
Select the "NewBLine(some number) Region"- layer, place the timeline indicator to "2s" and a add a keyframe, like in Step 2. Now repeat this by adding keyframes also to "3s" and "4s". Move your timeline indicator back to "2s" and press the green ball icon to get into the animate editing mode. Now open the "Colors"- window from the "Params" window and set the "Alpha" value to 1. Close the window. Move the time indicator to "3s" and set the "Alpha"- value to 100 trough the "Colors" window like before. Now move the time indicator to "4s" and set "Alpha" to 0. Now we have the shimmer in the corner of our text fading in and out in 2 seconds. Your timeline should now look like this (without those texts, of course):<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic16.gif]]<br />
<br />
=== Step 6: ===<br />
<br />
Your animation is basicly ready, but that shimmer needs some enchancement. First add a new layer onto the "NewBLine(some number) Region"- layer, by left clicking on it and selecting "New Layer &gt; Transform &gt; Rotate". A new layer named "Rotate" should appear. Now lets encapsulate the "Rotate" and "NewBLine..." layer like in Step 3, but just selecting the "Rotate" and "NewBline..."- layers this time. If we wouldn't do this the rotatation effect would affect our text too, but that's not what we want. Now you should have 2 "Inline Canvas"- layer groups. Open the first one by pressing on the small white arrow next to the [box]- icon. This is what your layers list should look like now:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic17.gif]]<br />
<br />
=== Step 7: ===<br />
<br />
Select both of the layers in the opened "Inline canvas" and you should see the outline of your shimmer and a new line, which has a green dot and a blue dot in both ends. Move the green dot to the center of your shimmer like this:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic18.gif]]<br />
<br />
=== Step 8: ===<br />
<br />
Make sure, you're still in the "Animate Editing Mode" (the ball in the bottom left corner of your canvas is red, if you are), place your timeline indicator to "2s" and select only the "Rotate"- layer. Now you have to set the "Amount" value to 0.01 in the "Params" window, just to set the waypoint. Move the timeline indicator to "3s" and set the "Amount"- value to 180 (for 180 degrees) and then move the timeline indicator to "4s" and the "Amount"- value to 359. <br /> Congratulations, you are done!<br /><br />[Shiny_Effects_Tutorial_1_by_Ceox.sif Heres the .sfz file.]<br /><br /> And here's the final result:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/animation.gif]]<br /> Hope this tutorial helped you with something :)<br /><br /> For further questions, contact me at ceoxmusic (at) gmail (dot) com<br /><br />[http://ceox.urli.net Ceox]<br /><br /></div>Ceoxhttps://wiki.synfig.org/index.php?title=Doc:Shiny_Effects&diff=4197Doc:Shiny Effects2007-10-17T17:28:48Z<p>Ceox: </p>
<hr />
<div>==HTML VERSION OF THIS, YOU CAN FIND HERE:<br />
http://personal.inet.fi/musiikki/ceox/synfigtuto1/==<br />
<br />
= Shiny Effects #1 by Ceox =<br />
<br />
<span>'''Skill Level:'''</span> Intermediate<span>'''<br /> Lenght:'''</span> ca. 30 minutes<br /><span>'''Version of Synfig Studio:'''</span> 0.61.07<br /><span>''''''</span><br /><br /> In this tutorial we make some shiny/glowy effects on your text.<br /> It might feel long to you, according to all of the text, but when I first tried this out, if it worked on Synfig, I did it in 5-10 minutes, so if you learn all the stuff you'll be able to do it so fast too.<br /><br />
<br />
== Part 1 - Designing ==<br />
<br />
=== Step 1: ===<br />
<br />
We start by opening Synfig Studio and creating a new document with all the default settings except these:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic1.gif]]<br />
<br />
=== Step 2: ===<br />
<br />
Now we create a new text layer, so in this tutorial I'm going to use 'Ceox'. That's not my real name, but it will have to do. Start by adding the text layer:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic2.gif]]<br />
<br />
=== Step 3: ===<br />
<br />
Now you should see a "Text Layer"- text in the middle of your project. Select the text layer in the layers list, so that its background changes to blue, and you should see its parameters in the "Params" window, which is on the bottom of your workspace, if you haven't placed it somewhere else. (Click on image to enlarge, will open in new window).<br />
<br />
=== [pic3.gif [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic3.gif]]] ===<br />
<br />
=== Step 4: ===<br />
<br />
Now we are going to modify the text in the "Params" window. First double-click on the color in the "Value" cell and choose the color you want, with 100 "Alpha". I chose a darkish blue. Then double-click on the "Text Layer"- text, also in the "Value" cell and enter your name in to the pop-up window. After this, change the size to 50pt and the font to Arial, both by double-clicking the field in the "Value"- cell. Here's a screenshot of all things need to be modified: (I have darkened all values, that should be good to go by default, but you should anyway check out, that you have the same ones)<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic4.gif]]<br />
<br />
=== Step 5: (OPTIONAL) ===<br />
<br />
<span><font color="rgb(65, 65, 65)">If you want some more "fancyness" on your text, create a stroke for the text, like this step tells you. Right click on the text layer in</font></span> <span><font color="rgb(65, 65, 65)">the layers list and choose "Duplicate Layer":<br /></font></span>Â [[Image:pic5.gif]]<br /><span><font color="rgb(76, 76, 75)">Now you should have two</font></span> <span><font color="rgb(76, 76, 75)">"Text"- layers on top of each other. Choose the lower "Text"- layer and</font></span> <span><font color="rgb(76, 76, 75)">change the color to something else what you have on the top "Text"- layer.</font></span> <span><font color="rgb(76, 76, 75)">Im am going to choose a simple green. Now change the size of this layer</font></span> <span><font color="rgb(76, 76, 75)">to about 2-3 pt bigger than the layer on the top, in this case to 52pt.</font></span> <span><font color="rgb(76, 76, 75)">(50pt 2pt, if you didn't get it). Now we have a stroke for our text,</font></span> <span><font color="rgb(76, 76, 75)">though it might not be perfectly around the text. You can fix this, my</font></span> <span><font color="rgb(76, 76, 75)">moving the lower layer a bit.</font></span> <span><font color="rgb(76, 76, 75)">This is how my text looks like now:</font></span><br />[[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic6.gif]]<br />
<br />
=== Step 6: ===<br />
<br />
Now we create the first shiny thing. Add a new layer just like we added the text layer, by clicking on the little black arrow in the corner of our canvas and choosing "Layer &gt; New Layer &gt; Gradients &gt; Linear Gradient. Now your canvas should be filled with a some colored gradient. Don't worry, we will get your text back in the next step. Which actually comes now. Choose the "Linear Gradient"- layer in the layers list and then double-click on the "Gradient"- value in the "Params" window, like we double-clicked in Step 4. Now you should see a window which calls itself the "Gradient Editor". At the bottom of this window you should see two black 'half-arrows', one on the left side and one on the right side. Click on the one, which is on the left side. (When the color of it changes to white, it is selected.) Change the color to white and the "Alpha"- value to 0. Now select the arrow on the right side and do the same thing. Now insert a new arrow (or CPoint, what ever you want to call them) by clicking in the center of the area, which is over the half-arrows with your right mouse button and select "Insert CPoint". Notice that the menu will only appear when you keep the right mouse button pressed down. Now select this arrow and change its color to white and its "Alpha" value to 50. As you may have noticed by now, the alpha amount controls the transparency of an object. Now your Gradient Editor should look like this:<br />  [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic7.gif]]<br /> and your canvas something like this:<br />  [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic8.gif]]<br />
<br />
=== Step 7: ===<br />
<br />
Rotate and scale the "Linear Gradient"- layer using the control points like the video shows. <br />[vid1.swf.html Click here to view video. Opens up in new window.]<br />
<br />
=== Step 8: ===<br />
<br />
Select the "Linear Gradient"- layer in the layers list and set its "Blend Method" to "Onto" in the "Params" window. Now the Gradient layer is visible only on the layers below it. Your gradient should disappear if you placed like the video showed in the previous step. (Not on top of the text)<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic9.gif]]<br />
<br />
=== Step 9: ===<br />
<br />
It's easier to do all the animations afterwards, so now we could make the other shiny effect, which I prefer to call a 'shimmer'. We start by taking the BLine tool ([[Image:draw-path_128sif.png]]) and zooming in 400% into our canvas. You can zoom in and out in the "Navigator":<br />[[Image:pic19.gif]]<br />  Now we have to draw a new object with the BLine tool ([[Image:draw-path_128sif.png]]) in to some sharp corner of our text. I chose the corner of the X, because this effect looks good on the last character(s). So now draw a shape like this one:<br /> (Insert a controller by pressing your left mouse button and close the line by clicking on the first point with your right mouse button and selecting "Loop BLine")<br />[[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic20.gif]]<br />
<br />
=== Step 10: ===<br />
<br />
Now zoom out to 100% again. You should now have a new layer in your layers list:<br /> Â [[Image:pic10.gif]]<br /> Select it by clicking on it. Now we have its parameters in the "Params" window. Change its color to white, if it isn't it aleady. You also have to set its "Feather" to 1pt and the "Type of Feather" to "Box Blur". We don't want it to be visible yet so we also have to set the "Alpha" value to 0 in the color editor. Now everything is ready for the animation. <br />[[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic11.gif]]<br />
<br />
== Part 2 - Animating ==<br />
<br />
=== Step 1: ===<br />
<br />
First we animate the "Linear Gradient"- layer. Select it in the layers list. Now you should have to have two green control points visible in your canvas. Choose the "Normal Tool" ([[Image:normal_icon-full.jpg]]) and select both of those points by drawing an rectangle over them. Open the keyframe- window by clicking on its icon (a golden key) in the same window where the "Params" are. Make sure your timeline indicator is at "0f" (the small orange line on a gray background) and add a new keyframe by pressing on the blue icon. Move the timeline indicator to "2s" and add a new keyframe. Now your window should look like this:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic12.gif]]<br />
<br />
=== Step 2: ===<br />
<br />
Move the time indicator to "0f" and press on the green ball in the lower right corner of your canvas. After pressing on it, its color changes to red, like it is in the screenshot. Now move the control points up a bit (this doesn't affect the animation), just to create a waypoint. Go back to "2s", where we inserted the second keyframe and move the two green control points to the right side of your text. The first animation has been created. You can move your timline indicator around to see it. This should be your timeline and canvas now:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic13.gif]]<br />
<br />
=== Step 3: ===<br />
<br />
Now let's encapsulate our "Linear Gradient"- layer and the two "Text"- layers by selecting them all. (Select multiple layers by holding CTRL down and selecting the layers). Then press on one of the selected layers and choose "Encapsulate". The layers should now be groupped in one layer with a box symbol and labelled "Inline Canvas". You can open all the layers by clicking on the small arrow on the left side of the box- icon.<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic14.gif]]<br />
<br />
=== Step 4: ===<br />
<br />
I just noticed, that I screwed up and we have to make the whole animation a bit longer. Click on the black arrow in the upper left corner of your canvas, select "Edit" and then "Properties". A new window should pop up. Go to the "Time" tab and then set the "End Time" to 4s 2f.<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic15.gif]]<br />
<br />
=== Step 5: ===<br />
<br />
Select the "NewBLine(some number) Region"- layer, place the timeline indicator to "2s" and a add a keyframe, like in Step 2. Now repeat this by adding keyframes also to "3s" and "4s". Move your timeline indicator back to "2s" and press the green ball icon to get into the animate editing mode. Now open the "Colors"- window from the "Params" window and set the "Alpha" value to 1. Close the window. Move the time indicator to "3s" and set the "Alpha"- value to 100 trough the "Colors" window like before. Now move the time indicator to "4s" and set "Alpha" to 0. Now we have the shimmer in the corner of our text fading in and out in 2 seconds. Your timeline should now look like this (without those texts, of course):<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic16.gif]]<br />
<br />
=== Step 6: ===<br />
<br />
Your animation is basicly ready, but that shimmer needs some enchancement. First add a new layer onto the "NewBLine(some number) Region"- layer, by left clicking on it and selecting "New Layer &gt; Transform &gt; Rotate". A new layer named "Rotate" should appear. Now lets encapsulate the "Rotate" and "NewBLine..." layer like in Step 3, but just selecting the "Rotate" and "NewBline..."- layers this time. If we wouldn't do this the rotatation effect would affect our text too, but that's not what we want. Now you should have 2 "Inline Canvas"- layer groups. Open the first one by pressing on the small white arrow next to the [box]- icon. This is what your layers list should look like now:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic17.gif]]<br />
<br />
=== Step 7: ===<br />
<br />
Select both of the layers in the opened "Inline canvas" and you should see the outline of your shimmer and a new line, which has a green dot and a blue dot in both ends. Move the green dot to the center of your shimmer like this:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic18.gif]]<br />
<br />
=== Step 8: ===<br />
<br />
Make sure, you're still in the "Animate Editing Mode" (the ball in the bottom left corner of your canvas is red, if you are), place your timeline indicator to "2s" and select only the "Rotate"- layer. Now you have to set the "Amount" value to 0.01 in the "Params" window, just to set the waypoint. Move the timeline indicator to "3s" and set the "Amount"- value to 180 (for 180 degrees) and then move the timeline indicator to "4s" and the "Amount"- value to 359. <br /> Congratulations, you are done!<br /><br />[Shiny_Effects_Tutorial_1_by_Ceox.sif Heres the .sfz file.]<br /><br /> And here's the final result:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/animation.gif]]<br /> Hope this tutorial helped you with something :)<br /><br /> For further questions, contact me at ceoxmusic (at) gmail (dot) com<br /><br />[http://ceox.urli.net Ceox]<br /><br /></div>Ceoxhttps://wiki.synfig.org/index.php?title=Doc:Shiny_Effects&diff=4196Doc:Shiny Effects2007-10-17T17:26:43Z<p>Ceox: /* Shiny Effects #1 by Ceox */</p>
<hr />
<div>= Shiny Effects #1 by Ceox =<br />
<br />
<span>'''Skill Level:'''</span> Intermediate<span>'''<br /> Lenght:'''</span> ca. 30 minutes<br /><span>'''Version of Synfig Studio:'''</span> 0.61.07<br /><span>''''''</span><br /><br /> In this tutorial we make some shiny/glowy effects on your text.<br /> It might feel long to you, according to all of the text, but when I first tried this out, if it worked on Synfig, I did it in 5-10 minutes, so if you learn all the stuff you'll be able to do it so fast too.<br /><br />
<br />
== Part 1 - Designing ==<br />
<br />
=== Step 1: ===<br />
<br />
We start by opening Synfig Studio and creating a new document with all the default settings except these:<br /> Â [[Image:pic1.gif]]<br />
<br />
=== Step 2: ===<br />
<br />
Now we create a new text layer, so in this tutorial I'm going to use 'Ceox'. That's not my real name, but it will have to do. Start by adding the text layer:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic2.gif]]<br />
<br />
=== Step 3: ===<br />
<br />
Now you should see a "Text Layer"- text in the middle of your project. Select the text layer in the layers list, so that its background changes to blue, and you should see its parameters in the "Params" window, which is on the bottom of your workspace, if you haven't placed it somewhere else. (Click on image to enlarge, will open in new window).<br />
<br />
=== [pic3.gif [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic3.gif]]] ===<br />
<br />
=== Step 4: ===<br />
<br />
Now we are going to modify the text in the "Params" window. First double-click on the color in the "Value" cell and choose the color you want, with 100 "Alpha". I chose a darkish blue. Then double-click on the "Text Layer"- text, also in the "Value" cell and enter your name in to the pop-up window. After this, change the size to 50pt and the font to Arial, both by double-clicking the field in the "Value"- cell. Here's a screenshot of all things need to be modified: (I have darkened all values, that should be good to go by default, but you should anyway check out, that you have the same ones)<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic4.gif]]<br />
<br />
=== Step 5: (OPTIONAL) ===<br />
<br />
<span><font color="rgb(65, 65, 65)">If you want some more "fancyness" on your text, create a stroke for the text, like this step tells you. Right click on the text layer in</font></span> <span><font color="rgb(65, 65, 65)">the layers list and choose "Duplicate Layer":<br /></font></span>Â [[Image:pic5.gif]]<br /><span><font color="rgb(76, 76, 75)">Now you should have two</font></span> <span><font color="rgb(76, 76, 75)">"Text"- layers on top of each other. Choose the lower "Text"- layer and</font></span> <span><font color="rgb(76, 76, 75)">change the color to something else what you have on the top "Text"- layer.</font></span> <span><font color="rgb(76, 76, 75)">Im am going to choose a simple green. Now change the size of this layer</font></span> <span><font color="rgb(76, 76, 75)">to about 2-3 pt bigger than the layer on the top, in this case to 52pt.</font></span> <span><font color="rgb(76, 76, 75)">(50pt 2pt, if you didn't get it). Now we have a stroke for our text,</font></span> <span><font color="rgb(76, 76, 75)">though it might not be perfectly around the text. You can fix this, my</font></span> <span><font color="rgb(76, 76, 75)">moving the lower layer a bit.</font></span> <span><font color="rgb(76, 76, 75)">This is how my text looks like now:</font></span><br />[[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic6.gif]]<br />
<br />
=== Step 6: ===<br />
<br />
Now we create the first shiny thing. Add a new layer just like we added the text layer, by clicking on the little black arrow in the corner of our canvas and choosing "Layer &gt; New Layer &gt; Gradients &gt; Linear Gradient. Now your canvas should be filled with a some colored gradient. Don't worry, we will get your text back in the next step. Which actually comes now. Choose the "Linear Gradient"- layer in the layers list and then double-click on the "Gradient"- value in the "Params" window, like we double-clicked in Step 4. Now you should see a window which calls itself the "Gradient Editor". At the bottom of this window you should see two black 'half-arrows', one on the left side and one on the right side. Click on the one, which is on the left side. (When the color of it changes to white, it is selected.) Change the color to white and the "Alpha"- value to 0. Now select the arrow on the right side and do the same thing. Now insert a new arrow (or CPoint, what ever you want to call them) by clicking in the center of the area, which is over the half-arrows with your right mouse button and select "Insert CPoint". Notice that the menu will only appear when you keep the right mouse button pressed down. Now select this arrow and change its color to white and its "Alpha" value to 50. As you may have noticed by now, the alpha amount controls the transparency of an object. Now your Gradient Editor should look like this:<br />  [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic7.gif]]<br /> and your canvas something like this:<br />  [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic8.gif]]<br />
<br />
=== Step 7: ===<br />
<br />
Rotate and scale the "Linear Gradient"- layer using the control points like the video shows. <br />[vid1.swf.html Click here to view video. Opens up in new window.]<br />
<br />
=== Step 8: ===<br />
<br />
Select the "Linear Gradient"- layer in the layers list and set its "Blend Method" to "Onto" in the "Params" window. Now the Gradient layer is visible only on the layers below it. Your gradient should disappear if you placed like the video showed in the previous step. (Not on top of the text)<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic9.gif]]<br />
<br />
=== Step 9: ===<br />
<br />
It's easier to do all the animations afterwards, so now we could make the other shiny effect, which I prefer to call a 'shimmer'. We start by taking the BLine tool ([[Image:draw-path_128sif.png]]) and zooming in 400% into our canvas. You can zoom in and out in the "Navigator":<br />[[Image:pic19.gif]]<br />  Now we have to draw a new object with the BLine tool ([[Image:draw-path_128sif.png]]) in to some sharp corner of our text. I chose the corner of the X, because this effect looks good on the last character(s). So now draw a shape like this one:<br /> (Insert a controller by pressing your left mouse button and close the line by clicking on the first point with your right mouse button and selecting "Loop BLine")<br />[[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic20.gif]]<br />
<br />
=== Step 10: ===<br />
<br />
Now zoom out to 100% again. You should now have a new layer in your layers list:<br /> Â [[Image:pic10.gif]]<br /> Select it by clicking on it. Now we have its parameters in the "Params" window. Change its color to white, if it isn't it aleady. You also have to set its "Feather" to 1pt and the "Type of Feather" to "Box Blur". We don't want it to be visible yet so we also have to set the "Alpha" value to 0 in the color editor. Now everything is ready for the animation. <br />[[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic11.gif]]<br />
<br />
== Part 2 - Animating ==<br />
<br />
=== Step 1: ===<br />
<br />
First we animate the "Linear Gradient"- layer. Select it in the layers list. Now you should have to have two green control points visible in your canvas. Choose the "Normal Tool" ([[Image:normal_icon-full.jpg]]) and select both of those points by drawing an rectangle over them. Open the keyframe- window by clicking on its icon (a golden key) in the same window where the "Params" are. Make sure your timeline indicator is at "0f" (the small orange line on a gray background) and add a new keyframe by pressing on the blue icon. Move the timeline indicator to "2s" and add a new keyframe. Now your window should look like this:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic12.gif]]<br />
<br />
=== Step 2: ===<br />
<br />
Move the time indicator to "0f" and press on the green ball in the lower right corner of your canvas. After pressing on it, its color changes to red, like it is in the screenshot. Now move the control points up a bit (this doesn't affect the animation), just to create a waypoint. Go back to "2s", where we inserted the second keyframe and move the two green control points to the right side of your text. The first animation has been created. You can move your timline indicator around to see it. This should be your timeline and canvas now:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic13.gif]]<br />
<br />
=== Step 3: ===<br />
<br />
Now let's encapsulate our "Linear Gradient"- layer and the two "Text"- layers by selecting them all. (Select multiple layers by holding CTRL down and selecting the layers). Then press on one of the selected layers and choose "Encapsulate". The layers should now be groupped in one layer with a box symbol and labelled "Inline Canvas". You can open all the layers by clicking on the small arrow on the left side of the box- icon.<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic14.gif]]<br />
<br />
=== Step 4: ===<br />
<br />
I just noticed, that I screwed up and we have to make the whole animation a bit longer. Click on the black arrow in the upper left corner of your canvas, select "Edit" and then "Properties". A new window should pop up. Go to the "Time" tab and then set the "End Time" to 4s 2f.<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic15.gif]]<br />
<br />
=== Step 5: ===<br />
<br />
Select the "NewBLine(some number) Region"- layer, place the timeline indicator to "2s" and a add a keyframe, like in Step 2. Now repeat this by adding keyframes also to "3s" and "4s". Move your timeline indicator back to "2s" and press the green ball icon to get into the animate editing mode. Now open the "Colors"- window from the "Params" window and set the "Alpha" value to 1. Close the window. Move the time indicator to "3s" and set the "Alpha"- value to 100 trough the "Colors" window like before. Now move the time indicator to "4s" and set "Alpha" to 0. Now we have the shimmer in the corner of our text fading in and out in 2 seconds. Your timeline should now look like this (without those texts, of course):<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic16.gif]]<br />
<br />
=== Step 6: ===<br />
<br />
Your animation is basicly ready, but that shimmer needs some enchancement. First add a new layer onto the "NewBLine(some number) Region"- layer, by left clicking on it and selecting "New Layer &gt; Transform &gt; Rotate". A new layer named "Rotate" should appear. Now lets encapsulate the "Rotate" and "NewBLine..." layer like in Step 3, but just selecting the "Rotate" and "NewBline..."- layers this time. If we wouldn't do this the rotatation effect would affect our text too, but that's not what we want. Now you should have 2 "Inline Canvas"- layer groups. Open the first one by pressing on the small white arrow next to the [box]- icon. This is what your layers list should look like now:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic17.gif]]<br />
<br />
=== Step 7: ===<br />
<br />
Select both of the layers in the opened "Inline canvas" and you should see the outline of your shimmer and a new line, which has a green dot and a blue dot in both ends. Move the green dot to the center of your shimmer like this:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic18.gif]]<br />
<br />
=== Step 8: ===<br />
<br />
Make sure, you're still in the "Animate Editing Mode" (the ball in the bottom left corner of your canvas is red, if you are), place your timeline indicator to "2s" and select only the "Rotate"- layer. Now you have to set the "Amount" value to 0.01 in the "Params" window, just to set the waypoint. Move the timeline indicator to "3s" and set the "Amount"- value to 180 (for 180 degrees) and then move the timeline indicator to "4s" and the "Amount"- value to 359. <br /> Congratulations, you are done!<br /><br />[Shiny_Effects_Tutorial_1_by_Ceox.sif Heres the .sfz file.]<br /><br /> And here's the final result:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/animation.gif]]<br /> Hope this tutorial helped you with something :)<br /><br /> For further questions, contact me at ceoxmusic (at) gmail (dot) com<br /><br />[http://ceox.urli.net Ceox]<br /><br /></div>Ceoxhttps://wiki.synfig.org/index.php?title=Doc:Shiny_Effects&diff=4195Doc:Shiny Effects2007-10-17T17:25:28Z<p>Ceox: New page: = Shiny Effects #1 by Ceox = <span>'''Skill Level:'''</span> Intermediate<span>'''<br /> Lenght:'''</span> ca. 30 minutes<br /><span>'''Version of Synfig Studio:'''</span> 0.61.07<br /><s...</p>
<hr />
<div>= Shiny Effects #1 by Ceox =<br />
<br />
<span>'''Skill Level:'''</span> Intermediate<span>'''<br /> Lenght:'''</span> ca. 30 minutes<br /><span>'''Version of Synfig Studio:'''</span> 0.61.07<br /><span>''''''</span><br /><br /> In this tutorial we make some shiny/glowy effects on your text.<br /> It might feel long to you, according to all of the text, but when I first tried this out, if it worked on Synfig, I did it in 5-10 minutes, so if you learn all the stuff you'll be able to do it so fast too.<br /> Here's the <small><small>[indexreal.html#end <big><big>result</big></big>]</small></small> of this.<br />
<br />
== Part 1 - Designing ==<br />
<br />
=== Step 1: ===<br />
<br />
We start by opening Synfig Studio and creating a new document with all the default settings except these:<br /> Â [[Image:pic1.gif]]<br />
<br />
=== Step 2: ===<br />
<br />
Now we create a new text layer, so in this tutorial I'm going to use 'Ceox'. That's not my real name, but it will have to do. Start by adding the text layer:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic2.gif]]<br />
<br />
=== Step 3: ===<br />
<br />
Now you should see a "Text Layer"- text in the middle of your project. Select the text layer in the layers list, so that its background changes to blue, and you should see its parameters in the "Params" window, which is on the bottom of your workspace, if you haven't placed it somewhere else. (Click on image to enlarge, will open in new window).<br />
<br />
=== [pic3.gif [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic3.gif]]] ===<br />
<br />
=== Step 4: ===<br />
<br />
Now we are going to modify the text in the "Params" window. First double-click on the color in the "Value" cell and choose the color you want, with 100 "Alpha". I chose a darkish blue. Then double-click on the "Text Layer"- text, also in the "Value" cell and enter your name in to the pop-up window. After this, change the size to 50pt and the font to Arial, both by double-clicking the field in the "Value"- cell. Here's a screenshot of all things need to be modified: (I have darkened all values, that should be good to go by default, but you should anyway check out, that you have the same ones)<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic4.gif]]<br />
<br />
=== Step 5: (OPTIONAL) ===<br />
<br />
<span><font color="rgb(65, 65, 65)">If you want some more "fancyness" on your text, create a stroke for the text, like this step tells you. Right click on the text layer in</font></span> <span><font color="rgb(65, 65, 65)">the layers list and choose "Duplicate Layer":<br /></font></span>Â [[Image:pic5.gif]]<br /><span><font color="rgb(76, 76, 75)">Now you should have two</font></span> <span><font color="rgb(76, 76, 75)">"Text"- layers on top of each other. Choose the lower "Text"- layer and</font></span> <span><font color="rgb(76, 76, 75)">change the color to something else what you have on the top "Text"- layer.</font></span> <span><font color="rgb(76, 76, 75)">Im am going to choose a simple green. Now change the size of this layer</font></span> <span><font color="rgb(76, 76, 75)">to about 2-3 pt bigger than the layer on the top, in this case to 52pt.</font></span> <span><font color="rgb(76, 76, 75)">(50pt 2pt, if you didn't get it). Now we have a stroke for our text,</font></span> <span><font color="rgb(76, 76, 75)">though it might not be perfectly around the text. You can fix this, my</font></span> <span><font color="rgb(76, 76, 75)">moving the lower layer a bit.</font></span> <span><font color="rgb(76, 76, 75)">This is how my text looks like now:</font></span><br />[[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic6.gif]]<br />
<br />
=== Step 6: ===<br />
<br />
Now we create the first shiny thing. Add a new layer just like we added the text layer, by clicking on the little black arrow in the corner of our canvas and choosing "Layer &gt; New Layer &gt; Gradients &gt; Linear Gradient. Now your canvas should be filled with a some colored gradient. Don't worry, we will get your text back in the next step. Which actually comes now. Choose the "Linear Gradient"- layer in the layers list and then double-click on the "Gradient"- value in the "Params" window, like we double-clicked in Step 4. Now you should see a window which calls itself the "Gradient Editor". At the bottom of this window you should see two black 'half-arrows', one on the left side and one on the right side. Click on the one, which is on the left side. (When the color of it changes to white, it is selected.) Change the color to white and the "Alpha"- value to 0. Now select the arrow on the right side and do the same thing. Now insert a new arrow (or CPoint, what ever you want to call them) by clicking in the center of the area, which is over the half-arrows with your right mouse button and select "Insert CPoint". Notice that the menu will only appear when you keep the right mouse button pressed down. Now select this arrow and change its color to white and its "Alpha" value to 50. As you may have noticed by now, the alpha amount controls the transparency of an object. Now your Gradient Editor should look like this:<br />  [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic7.gif]]<br /> and your canvas something like this:<br />  [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic8.gif]]<br />
<br />
=== Step 7: ===<br />
<br />
Rotate and scale the "Linear Gradient"- layer using the control points like the video shows. <br />[vid1.swf.html Click here to view video. Opens up in new window.]<br />
<br />
=== Step 8: ===<br />
<br />
Select the "Linear Gradient"- layer in the layers list and set its "Blend Method" to "Onto" in the "Params" window. Now the Gradient layer is visible only on the layers below it. Your gradient should disappear if you placed like the video showed in the previous step. (Not on top of the text)<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic9.gif]]<br />
<br />
=== Step 9: ===<br />
<br />
It's easier to do all the animations afterwards, so now we could make the other shiny effect, which I prefer to call a 'shimmer'. We start by taking the BLine tool ([[Image:draw-path_128sif.png]]) and zooming in 400% into our canvas. You can zoom in and out in the "Navigator":<br />[[Image:pic19.gif]]<br />  Now we have to draw a new object with the BLine tool ([[Image:draw-path_128sif.png]]) in to some sharp corner of our text. I chose the corner of the X, because this effect looks good on the last character(s). So now draw a shape like this one:<br /> (Insert a controller by pressing your left mouse button and close the line by clicking on the first point with your right mouse button and selecting "Loop BLine")<br />[[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic20.gif]]<br />
<br />
=== Step 10: ===<br />
<br />
Now zoom out to 100% again. You should now have a new layer in your layers list:<br /> Â [[Image:pic10.gif]]<br /> Select it by clicking on it. Now we have its parameters in the "Params" window. Change its color to white, if it isn't it aleady. You also have to set its "Feather" to 1pt and the "Type of Feather" to "Box Blur". We don't want it to be visible yet so we also have to set the "Alpha" value to 0 in the color editor. Now everything is ready for the animation. <br />[[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic11.gif]]<br />
<br />
== Part 2 - Animating ==<br />
<br />
=== Step 1: ===<br />
<br />
First we animate the "Linear Gradient"- layer. Select it in the layers list. Now you should have to have two green control points visible in your canvas. Choose the "Normal Tool" ([[Image:normal_icon-full.jpg]]) and select both of those points by drawing an rectangle over them. Open the keyframe- window by clicking on its icon (a golden key) in the same window where the "Params" are. Make sure your timeline indicator is at "0f" (the small orange line on a gray background) and add a new keyframe by pressing on the blue icon. Move the timeline indicator to "2s" and add a new keyframe. Now your window should look like this:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic12.gif]]<br />
<br />
=== Step 2: ===<br />
<br />
Move the time indicator to "0f" and press on the green ball in the lower right corner of your canvas. After pressing on it, its color changes to red, like it is in the screenshot. Now move the control points up a bit (this doesn't affect the animation), just to create a waypoint. Go back to "2s", where we inserted the second keyframe and move the two green control points to the right side of your text. The first animation has been created. You can move your timline indicator around to see it. This should be your timeline and canvas now:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic13.gif]]<br />
<br />
=== Step 3: ===<br />
<br />
Now let's encapsulate our "Linear Gradient"- layer and the two "Text"- layers by selecting them all. (Select multiple layers by holding CTRL down and selecting the layers). Then press on one of the selected layers and choose "Encapsulate". The layers should now be groupped in one layer with a box symbol and labelled "Inline Canvas". You can open all the layers by clicking on the small arrow on the left side of the box- icon.<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic14.gif]]<br />
<br />
=== Step 4: ===<br />
<br />
I just noticed, that I screwed up and we have to make the whole animation a bit longer. Click on the black arrow in the upper left corner of your canvas, select "Edit" and then "Properties". A new window should pop up. Go to the "Time" tab and then set the "End Time" to 4s 2f.<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic15.gif]]<br />
<br />
=== Step 5: ===<br />
<br />
Select the "NewBLine(some number) Region"- layer, place the timeline indicator to "2s" and a add a keyframe, like in Step 2. Now repeat this by adding keyframes also to "3s" and "4s". Move your timeline indicator back to "2s" and press the green ball icon to get into the animate editing mode. Now open the "Colors"- window from the "Params" window and set the "Alpha" value to 1. Close the window. Move the time indicator to "3s" and set the "Alpha"- value to 100 trough the "Colors" window like before. Now move the time indicator to "4s" and set "Alpha" to 0. Now we have the shimmer in the corner of our text fading in and out in 2 seconds. Your timeline should now look like this (without those texts, of course):<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic16.gif]]<br />
<br />
=== Step 6: ===<br />
<br />
Your animation is basicly ready, but that shimmer needs some enchancement. First add a new layer onto the "NewBLine(some number) Region"- layer, by left clicking on it and selecting "New Layer &gt; Transform &gt; Rotate". A new layer named "Rotate" should appear. Now lets encapsulate the "Rotate" and "NewBLine..." layer like in Step 3, but just selecting the "Rotate" and "NewBline..."- layers this time. If we wouldn't do this the rotatation effect would affect our text too, but that's not what we want. Now you should have 2 "Inline Canvas"- layer groups. Open the first one by pressing on the small white arrow next to the [box]- icon. This is what your layers list should look like now:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic17.gif]]<br />
<br />
=== Step 7: ===<br />
<br />
Select both of the layers in the opened "Inline canvas" and you should see the outline of your shimmer and a new line, which has a green dot and a blue dot in both ends. Move the green dot to the center of your shimmer like this:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic18.gif]]<br />
<br />
=== Step 8: ===<br />
<br />
Make sure, you're still in the "Animate Editing Mode" (the ball in the bottom left corner of your canvas is red, if you are), place your timeline indicator to "2s" and select only the "Rotate"- layer. Now you have to set the "Amount" value to 0.01 in the "Params" window, just to set the waypoint. Move the timeline indicator to "3s" and set the "Amount"- value to 180 (for 180 degrees) and then move the timeline indicator to "4s" and the "Amount"- value to 359. <br /> Congratulations, you are done!<br /><br />[Shiny_Effects_Tutorial_1_by_Ceox.sif Heres the .sfz file.]<br /><br /> And here's the final result:<br /> Â [[Image:http://personal.inet.fi/musiikki/ceox/synfigtuto1/animation.gif]]<br /> Hope this tutorial helped you with something :)<br /><br /> For further questions, contact me at ceoxmusic (at) gmail (dot) com<br /><br />[http://ceox.urli.net Ceox]<br /><br /> [ [#top TOP] ]</div>Ceoxhttps://wiki.synfig.org/index.php?title=Tutorials&diff=4140Tutorials2007-10-13T07:16:57Z<p>Ceox: </p>
<hr />
<div>This is an index of all of the tutorials for Synfig Studio.<br />
<br />
{| border="1" cellspacing="0" align="center" width="80%"<br />
|'''Tutorial Name'''||'''Description''' || '''Level'''<br />
|-<br />
| [[Getting Started]] [[http://www.synfig.com/synfig_tutorial.pdf PDF]] || New to Synfig Studio? This tutorial will help you get the gist of things || Basic<br />
|-<br />
| [[Animation Basics]] || Introduction to making things move, the timeline, and the [[Keyframes Dialog|keyframes dialog]]. || Basic<br />
|-<br />
| [[Adding Layers]] || Introduction to the Layers palette, and basics of compositing. || Basic<br />
|-<br />
| [[Creating Shapes]] || Introduction to making shapes using the bline and normal tools. || Basic<br />
|-<br />
| [[How do I|How do I...?]] || Quick tutorials, and commonly-needed tasks. || Basic<br />
|-<br />
| [[PictureTutorial|Timonator's newbie tutorial with pictures!]] || a WIP tutorial with lots of screenshots. || Not defined<br />
|-<br />
| [[Flower Animation]] || A beginner tutorial, showing animation with blines. It could be a good tutorial to follow, after the Animations Basics one. || Intermediate<br />
|-<br />
| [[Building a magnifying glass]] [[http://www.musikboden.se/synfigfiles/tutorial_magnifying_glass.pdf PDF]] || A tutorial showing how to build a magnifying glass. || Intermediate<br />
|-<br />
| [[Following a BLine]] || A tutorial showing how to make a layer follow a BLine rotating to face the direction it's moving in. || Advanced<br />
|-<br />
| [[Walk Cycle]] || Tutorial showing import of multiple still frames, and rotoscoping to generate a walk cycle animation || Advanced<br />
|-<br />
| [[Reuse Animations]] || Tutorial that explains how to reuse "poses" of portions of the scene without interfere on the rest of it. || Advanced<br />
|-<br />
| [[Switching Scenes]] || Tutorial that explains how to edit a collection of .sif files together and switch back and forth between them. || Advanced<br />
|-<br />
| [[Requested Tutorials]] || Need a tutorial? Request of someone making it here. || N/A<br />
|}<br />
<br />
== See Also ==<br />
* [[Keyboard Shortcuts]]<br />
<br />
General animation tutorial links:<br />
<br />
[http://www.keithlango.com/tutorials/old/popThru/popThru.html Keith Largo Tutes]<br />
<br />
[http://www.animationarchive.org/2006/05/meta-100000-animation-drawing-course.html The Animation Drawing Course at The Animation Archive] <br />
<br />
[http://www.garycmartin.com/mouth_shapes.html Lip Sync]</div>Ceoxhttps://wiki.synfig.org/index.php?title=Requested_Tutorials&diff=4138Requested Tutorials2007-10-13T05:11:02Z<p>Ceox: </p>
<hr />
<div>== Requested Tutorials ==<br />
<br />
- Explanation for the difference between waypoints and keyframes<br />
- Making a ball bounce- tutorial</div>Ceoxhttps://wiki.synfig.org/index.php?title=Requested_Tutorials&diff=4137Requested Tutorials2007-10-13T05:09:45Z<p>Ceox: </p>
<hr />
<div>== Requested Tutorials ==<br />
<br />
- Explanation for the difference between waypoints and keyframes|-<br />
- Making a ball bounce- tutorial</div>Ceoxhttps://wiki.synfig.org/index.php?title=Requested_Tutorials&diff=4136Requested Tutorials2007-10-13T05:09:19Z<p>Ceox: New page: == Requested Tutorials == - Explanation for the difference between waypoints and keyframes - Making a ball bounce- tutorial</p>
<hr />
<div><br />
== Requested Tutorials ==<br />
<br />
- Explanation for the difference between waypoints and keyframes<br />
- Making a ball bounce- tutorial</div>Ceoxhttps://wiki.synfig.org/index.php?title=Tutorials&diff=4135Tutorials2007-10-13T05:08:22Z<p>Ceox: </p>
<hr />
<div>This is an index of all of the tutorials for Synfig Studio.<br />
<br />
{| border="1" cellspacing="0" align="center" width="80%"<br />
|'''Tutorial Name'''||'''Description''' || '''Level'''<br />
|-<br />
| [[Getting Started]] [[http://www.synfig.com/synfig_tutorial.pdf PDF]] || New to Synfig Studio? This tutorial will help you get the gist of things || Basic<br />
|-<br />
| [[Animation Basics]] || Introduction to making things move, the timeline, and the [[Keyframes Dialog|keyframes dialog]]. || Basic<br />
|-<br />
| [[Adding Layers]] || Introduction to the Layers palette, and basics of compositing. || Basic<br />
|-<br />
| [[Creating Shapes]] || Introduction to making shapes using the bline and normal tools. || Basic<br />
|-<br />
| [[How do I|How do I...?]] || Quick tutorials, and commonly-needed tasks. || Basic<br />
|-<br />
| [[PictureTutorial|Timonator's newbie tutorial with pictures!]] || a WIP tutorial with lots of screenshots. || Not defined<br />
|-<br />
| [[Flower Animation]] || A beginner tutorial, showing animation with blines. It could be a good tutorial to follow, after the Animations Basics one. || Intermediate<br />
|-<br />
| [[Building a magnifying glass]] [[http://www.musikboden.se/synfigfiles/tutorial_magnifying_glass.pdf PDF]] || A tutorial showing how to build a magnifying glass. || Intermediate<br />
|-<br />
| [[Following a BLine]] || A tutorial showing how to make a layer follow a BLine rotating to face the direction it's moving in. || Advanced<br />
|-<br />
| [[Walk Cycle]] || Tutorial showing import of multiple still frames, and rotoscoping to generate a walk cycle animation || Advanced<br />
|-<br />
| [[Reuse Animations]] || Tutorial that explains how to reuse "poses" of portions of the scene without interfere on the rest of it. || Advanced<br />
|-<br />
| [[Switching Scenes]] || Tutorial that explains how to edit a collection of .sif files together and switch back and forth between them. || Advanced<br />
|-<br />
| [[Requested Tutorials]] || Need a tutorial? Request of someone making it here. || Advanced<br />
|}<br />
<br />
== See Also ==<br />
* [[Keyboard Shortcuts]]<br />
<br />
General animation tutorial links:<br />
<br />
[http://www.keithlango.com/tutorials/old/popThru/popThru.html Keith Largo Tutes]<br />
<br />
[http://www.animationarchive.org/2006/05/meta-100000-animation-drawing-course.html The Animation Drawing Course at The Animation Archive] <br />
<br />
[http://www.garycmartin.com/mouth_shapes.html Lip Sync]</div>Ceoxhttps://wiki.synfig.org/index.php?title=Tutorials&diff=4134Tutorials2007-10-13T05:08:02Z<p>Ceox: </p>
<hr />
<div>This is an index of all of the tutorials for Synfig Studio.<br />
<br />
{| border="1" cellspacing="0" align="center" width="80%"<br />
|'''Tutorial Name'''||'''Description''' || '''Level'''<br />
|-<br />
| [[Getting Started]] [[http://www.synfig.com/synfig_tutorial.pdf PDF]] || New to Synfig Studio? This tutorial will help you get the gist of things || Basic<br />
|-<br />
| [[Animation Basics]] || Introduction to making things move, the timeline, and the [[Keyframes Dialog|keyframes dialog]]. || Basic<br />
|-<br />
| [[Adding Layers]] || Introduction to the Layers palette, and basics of compositing. || Basic<br />
|-<br />
| [[Creating Shapes]] || Introduction to making shapes using the bline and normal tools. || Basic<br />
|-<br />
| [[How do I|How do I...?]] || Quick tutorials, and commonly-needed tasks. || Basic<br />
|-<br />
| [[PictureTutorial|Timonator's newbie tutorial with pictures!]] || a WIP tutorial with lots of screenshots. || Not defined<br />
|-<br />
| [[Flower Animation]] || A beginner tutorial, showing animation with blines. It could be a good tutorial to follow, after the Animations Basics one. || Intermediate<br />
|-<br />
| [[Building a magnifying glass]] [[http://www.musikboden.se/synfigfiles/tutorial_magnifying_glass.pdf PDF]] || A tutorial showing how to build a magnifying glass. || Intermediate<br />
|-<br />
| [[Following a BLine]] || A tutorial showing how to make a layer follow a BLine rotating to face the direction it's moving in. || Advanced<br />
|-<br />
| [[Walk Cycle]] || Tutorial showing import of multiple still frames, and rotoscoping to generate a walk cycle animation || Advanced<br />
|-<br />
| [[Reuse Animations]] || Tutorial that explains how to reuse "poses" of portions of the scene without interfere on the rest of it. || Advanced<br />
|-<br />
| [[Switching Scenes]] || Tutorial that explains how to edit a collection of .sif files together and switch back and forth between them. || Advanced<br />
|<br />
| [[Requested Tutorials]] || Need a tutorial? Request of someone making it here. || Advanced<br />
|}<br />
<br />
== See Also ==<br />
* [[Keyboard Shortcuts]]<br />
<br />
General animation tutorial links:<br />
<br />
[http://www.keithlango.com/tutorials/old/popThru/popThru.html Keith Largo Tutes]<br />
<br />
[http://www.animationarchive.org/2006/05/meta-100000-animation-drawing-course.html The Animation Drawing Course at The Animation Archive] <br />
<br />
[http://www.garycmartin.com/mouth_shapes.html Lip Sync]</div>Ceox