Doc:Looping Background - Revision history

D.j.a.y: ScreenShot Updated ! (remove screenshot note)

2013-09-04T12:04:39Z

ScreenShot Updated ! (remove screenshot note)

D.j.a.y: /* The animation */ screenshot update + intralink + literal + terminology rewrite

2013-09-04T11:51:56Z

‎The animation: screenshot update + intralink + literal + terminology rewrite

D.j.a.y: screenshot progress + literal + intra link

2013-06-06T07:42:04Z

screenshot progress + literal + intra link

Zelgadis: Text replace - "{{Category|NewTerminology}}" to "{{NewTerminology}}"

2013-05-20T08:12:20Z

Text replace - "{{Category|NewTerminology}}" to "{{NewTerminology}}"

D.j.a.y: Somes of the screenshots needs to be updated with 0.64.0

2013-05-13T07:38:13Z

Somes of the screenshots needs to be updated with 0.64.0

Genete: Updated Terminology

2013-02-12T13:07:17Z

Updated Terminology

Pupazzo: Finished! Yahi!

2012-03-20T17:18:01Z

Finished! Yahi!

Pupazzo: snapshot

2012-03-20T16:46:54Z

snapshot

Pupazzo at 13:51, 20 March 2012

2012-03-20T13:51:49Z

Pupazzo: snapshot

2012-03-20T10:47:10Z

snapshot

@@ Line 5: / Line 5: @@
 {{NewTerminology}}
 <!-- Page info end -->
 == Introduction ==

@@ Line 53: / Line 53: @@
 Move the Origin of layer <tt>[bg 2]</tt> WB pixels in the same direction of the simulated camera panning. So if the camera pans towards the right, in our tutorial example the coordinates of <tt>[bg 2]</tt> Origin would be X = WB = 1200, Y = 0.
-Add on top a Zoom layer with <tt>Amount = -1.5</tt>. When rendering, this layer must be disabled, but it is very useful to see the two background layers at once and validate what one is doing.
+Add on top a {{l|Scale Layer}} with <tt>Amount = -1.5</tt>. When rendering, this layer must be disabled, but it is very useful to see the two background layers at once and validate what one is doing.
-[[File:Loop-bg-2.png]]
+[[File:Looping-background-2 0.63.06.png|frame|none]]
-In the above screenshot, you can see the <tt>[bg 2]</tt> layer selected in the layers panel, its bounding box in the main window and, in the Parameters panel, the coordinates on the Origin (X = 1200, Y = 0). The zoom layer is enabled.
+In the above screenshot, you can see the <tt>[bg 2]</tt> layer selected in the layers panel, its {{l|Bounding box}} in the main window and, in the {{l|Parameters Panel}}, the coordinates on the Origin (X = 1200, Y = 0). The Scale Layer is enabled.
-Add a Translate layer just above the two background layers. Keep it selected. We now need to add two waypoints, on at the beginning of the loop and one at the end. Turn on animate editing mode. The loop will last T = 10 seconds. Move the animation time to 10s. Set the X coordinate of Origin to the opposite of <tt>[bg 2]</tt>, in this case <tt>X = -1200 px</tt>. This will add a waypoint at time 10s.
+Add a {{l|Translate Layer}} just above the two background layers. Keep it selected. We now need to add two {{l|Waypoint|waypoints}}, on at the beginning of the loop and one at the end. Turn on {{l|Animate Editing Mode}}. The loop will last T = 10 seconds. Move the animation time to 10s. Set the X coordinate of Origin to the opposite of <tt>[bg 2]</tt>, in this case <tt>X = -1200 px</tt>. This will add a waypoint at time 10s.
-Set the in/out interpolation of the waypoint to linear (<tt>right-click the waypoint | Both | Linear</tt>).
+Set the in/out interpolation of the waypoint to {{l|Linear}} (<tt>right-click the waypoint | Both | Linear</tt>).
 Move the animation time to 0s. Set the X coordinate of Origin to 0. This will create another waypoint. Set its in/out interpolation to linear.
@@ Line 67: / Line 67: @@
 Turn off Animate editing mode.
-[[File:Loop-bg-3.png]]
+[[File:Looping-background-3 0.63.06.png|frame|none]]
 In the above screenshot, in the layers palette there is the added Translate layer. In the timeline there are the two waypoints, one at 0s and one at 10s, with the icons that represent linear interpolation. The time is now 5s, shown by the small blue vertical line. The X value of Origin is -600, and matches the fact that the value goes from 0 to -1200, that the interpolation is linear, and that 5s is exactly half loop time.
-If you play the animation, the background will move for 10 seconds and then stop. We will now add a Time Loop layer to have the flexibility to ''automatically'' adapt to any total animation duration, as we will see later.
+If you play the animation, the background will move for 10 seconds and then stop. We will now add a {{l|Time Loop Layer}} to have the flexibility to ''automatically'' adapt to any total animation duration, as we will see later.
 Add a Time Loop layer over the Translate layer (<tt>right-click translate layer | New Layer | Other | Time Loop</tt>). Set the Duration to the same duration of the loop, in this case Duration = 10s.
@@ Line 77: / Line 77: @@
 That's it! Click play and enjoy the moving background for the same duration of the animation, in this case 30 seconds!
-Thanks to the looping background, if you change the duration of the canvas animation (<tt>Caret | Edit | Properties</tt>) in the ''Time'' tab, the background animation will adapt automatically.
+Thanks to the looping background, if you change the duration of the canvas animation (<tt>Caret | Edit | Properties</tt>) in the {{Literal|Time}} tab, the background animation will adapt automatically.
 ==  Sample files ==

@@ Line 29: / Line 29: @@
 Since we are creating the background and the animation from scratch, the easiest way is to use the same ''scale'' for the two synfig files.
-In Synfig Studio, create a new canvas with <tt>File | New</tt>. Its height should be the same as the animation (HB = HA = 480), while its width should be bigger than the animation (no need to be a multiple). Say WB = 1200. To be sure to keep the correct background size when importing it into the animation, proceed as follows:
+In Synfig Studio, create a new canvas with {{c|<File>|<New>|}}. Its height should be the same as the animation (HB = HA = 480), while its width should be bigger than the animation (no need to be a multiple). Say WB = 1200. To be sure to keep the correct background size when importing it into the animation, proceed as follows:
-Open the {{l|Canvas_Properties_Dialog}} (<tt>Caret | Edit | Properties</tt>). In the ''Other'' tab, check pixel width, pixel height, image aspect, pixel aspect. Uncheck the other items. In the ''Image'' tab, finally put the size: Width = WB = 1200, Height = HB = 480. All the other values should be automatically updated.
+Open the {{l|Canvas_Properties_Dialog}} ({{c|<Caret>|<Edit>|Properties|}}). In the {{literal|Other}} tab, check {{literal|Pixel Width}}, {{literal|Pixel Height}}, {{literal|Image Aspect}}, {{literal|Pixel Aspect}}. Uncheck the other items. In the {{literal|Image}} tab, finally put the size: {{literal|Width}} = WB = '''1200''', {{literal|Height}} = HB = '''480'''. All the other values should be automatically updated.
-In the ''Time'' tab, set Start time and End time to 0. This tells synfig that the canvas is a still image and the interface becomes simpler.
+In the {{literal|Time}} tab, set  {{literal|Start time}} and  {{literal|End time}} to '''0'''. This tells synfig that the canvas is a still image and the interface becomes simpler.
 Now draw the background :-). This is the one we will be using for the tutorial:
-[[File:Loop-bg-1.png]]
+[[File:Looping-background-1 0.63.06.png|frame|none]]
 It is made of two spline regions. To tile seamlessly, the Y coordinates of the left control points A, B, C must match with the Y coordinates of the right control points A', B', C'. In addition, the tangents should make the lines as smooth as necessary to adapt to the overall image stile.
@@ Line 47: / Line 47: @@
 == The animation ==
-Create a new canvas for the animation. As mentioned previously, in this tutorial we will use WA = 640, HA = 480. See section ''Create background'' for a safe way to set the dimensions of a canvas. In the ''Time'' tab of the canvas properties, set <tt>Start time = 0f</tt>, <tt>End Time = 30s</tt>.
+Create a new canvas for the animation. As mentioned previously, in this tutorial we will use WA = 640, HA = 480. See section ''Create background'' for a safe way to set the dimensions of a canvas. In the {{literal|Time}} tab of the {l|Canvas_Properties_Dialog}}, set <tt>Start time = 0f</tt>, <tt>End Time = 30s</tt>.
-Import the background (<tt>Caret | File | Import</tt>), name it <tt>[bg 1]</tt>. Duplicate it (<tt>Layers palette | right click on background layer | duplicate</tt>), name it <tt>[bg 2]</tt>.
+Import the background ({{c|<Caret>|<File>|Import|}}), name it <tt>[bg 1]</tt>. Duplicate it (<tt>{{l|Layers_Panel}} | right click on background layer | duplicate</tt>), name it <tt>[bg 2]</tt>.
 Move the Origin of layer <tt>[bg 2]</tt> WB pixels in the same direction of the simulated camera panning. So if the camera pans towards the right, in our tutorial example the coordinates of <tt>[bg 2]</tt> Origin would be X = WB = 1200, Y = 0.
@@ Line 81: / Line 81: @@
 ==  Sample files ==
-[[File:Mountain-bg.sifz]]
+{{l|Media:Mountain-bg.sifz|Montain Background Template file}}, {{l|Media:Mountain-looping-tut.sifz|Mountain Looping Tutorial file}}
-[[File:Mountain-looping-tut.sifz]]
 == Credits ==
 Based on posts and sample sif files by [http://www.synfig.org/forums/viewtopic.php?t=2267 Genete] and [http://synfig.org/forums/viewtopic.php?t=257 others] in the Synfig forum, check them out.

@@ Line 3: / Line 3: @@
 {{Category|Tutorials}}
 {{Category|Tutorials Intermediate}}
-{{Category|NewTerminology}}
+{{NewTerminology}}
 <!-- Page info end -->
   Somes of the screenshots needs to be updated with 0.64.0

@@ Line 5: / Line 5: @@
 {{Category|NewTerminology}}
 <!-- Page info end -->
 == Introduction ==

@@ Line 55: / Line 55: @@
 [[File:Loop-bg-2.png]]
-In the screenshot, you can see the <tt>[bg 2]</tt> layer selected in the layers panel, its bounding box in the main window and, in the Params panel, the coordinates on the Origin (X = 1200, Y = 0). The zoom layer is enabled.
+In the above screenshot, you can see the <tt>[bg 2]</tt> layer selected in the layers panel, its bounding box in the main window and, in the Params panel, the coordinates on the Origin (X = 1200, Y = 0). The zoom layer is enabled.
 Add a Translate layer just above the two background layers. Keep it selected. We now need to add two waypoints, on at the beginning of the loop and one at the end. Turn on animate editing mode. The loop will last T = 10 seconds. Move the animation time to 10s. Set the X coordinate of Origin to the opposite of <tt>[bg 2]</tt>, in this case <tt>X = -1200 px</tt>. This will add a waypoint at time 10s.
@@ Line 65: / Line 65: @@
 Turn off Animate editing mode.
-If you play the animation, the background will move for 10 seconds and then stop. We will now add a
+[[File:Loop-bg-3.png]]
-TO BE FINISHED
+In the above screenshot, in the layers palette there is the added Translate layer. In the timeline there are the two waypoints, one at 0s and one at 10s, with the icons that represent linear interpolation. The time is now 5s, shown by the small blue vertical line. The X value of Origin is -600, and matches the fact that the value goes from 0 to -1200, that the interpolation is linear, and that 5s is exactly half loop time.
-== Workflow overview ==
+If you play the animation, the background will move for 10 seconds and then stop. We will now add a Time Loop layer to have the flexibility to ''automatically'' adapt to any total animation duration, as we will see later.
-# Add translation layer.
+Add a Time Loop layer over the Translate layer (<tt>right-click translate layer | New Layer | Other | Time Loop</tt>). Set the Duration to the same duration of the loop, in this case Duration = 10s.
-## Record mode. Move translation layer opposite direction of loop, L pixels. Two waypoints, one at time 0, one at time T. Exit from record mode.
-# Add Timed Loop layer. Set duration to T.
-# Enjoy!
-== Examples ==
+That's it! Click play and enjoy the moving background for the same duration of the animation, in this case 30 seconds!
 == Credits ==
-Based on posts by [http://www.synfig.org/forums/viewtopic.php?t=2267 Genete] and [http://synfig.org/forums/viewtopic.php?t=257 others] in the Synfig forum.
+Based on posts and sample sif files by [http://www.synfig.org/forums/viewtopic.php?t=2267 Genete] and [http://synfig.org/forums/viewtopic.php?t=257 others] in the Synfig forum, check them out.

@@ Line 9: / Line 9: @@
 A looping background is a moving background that simulates camera panning, and that seamlessly repeats itself. It is a standard animation technique.
-There are multiple ways to do looping backgrounds in Synfig. The one presented here is simple, minimizes manual work and repetition, and doesn't use {{l|Keyframe|keyframes}}.
+There are multiple ways to do looping backgrounds in Synfig. The one presented here is simple, minimizes manual work and repetition, and doesn't need {{l|Keyframe|keyframes}}.
 We will be using two files: one for the background and one for the animation.
@@ Line 21: / Line 21: @@
 This tutorial uses a vector graphics background, but the same workflow can be applied for bitmap images.
-If you already have a background, skip to the ''The animation'' section.
+If you already have a background, skip to section ''The animation''.
 === Create background ===
@@ Line 45: / Line 45: @@
 == The animation ==
-writeme :-)
+Create a new canvas for the animation. As mentioned previously, in this tutorial we will use WA = 640, HA = 480. See section ''Create background'' for a safe way to set the dimensions of a canvas.
-== Workflow overview ==
+Import the background (<tt>Caret | File | Import</tt>). Duplicate it (<tt>Layers palette | right click on background layer | duplicate</tt>).
 # Add translation layer.
 ## Record mode. Move translation layer opposite direction of loop, L pixels. Two waypoints, one at time 0, one at time T. Exit from record mode.