Hello and welcome to our community! Is this your first visit?
Register
Page 1 of 4 1234 LastLast
Results 1 to 10 of 31
  1. #1
    Dedicated Member

    Join Date
    Jun 2008
    Location
    ________________
    Posts
    930

    Stykz Tutorial, Update for Stykz 1.0! (56k warning!)

    What is Stykz?
    According to Stykz.net...
    Stykz is the first multi-platform stick figure animation program in the world (as far as we know!), and it is COMPLETELY FREE!

    If you've ever used Pivot StickFigure Animator, you'll feel right at home and will appreciate the extra features that Stykz has to offer!

    And even if you havenít used Pivot, youíll find Stykz to be a powerful, easy to learn tool for creating great looking stick figure animations quickly and efficiently.
    Basically, it is pivot for Windows, Mac and Linux, completely free, and a ton of great features.

    Where Do I get Stykz?
    Go to the Stykz homepage, at http://www.stykz.net/, and click the download on the right. You can also download the Windows Beta Here.

    Stykz Terminology
    I'll be using a lot of it in this tutorial, so here it is:

    • -Node: One of the red/ blue dots used to move the figure's arms, legs, back, head, etc.

      -Drag Node: Node in the middle, used not to move the separate lines but the whole figure.

      -Polyfill: A fill that can be added to a shape, like a square, that will stay with it as it is moved/ rotated. Useful to fill in shapes.





    Whats with the windows?
    Yes, the many-windowed thing on Stykz does kinda suck. Here's how I lay out stykz though, so it looks like one window:
    [tn=700:zdjhmasg]http://**********.com/img/1251239808.png[/tn:zdjhmasg]


    Yay, lets get started.
    Ok. First, open Stykz. Close all the windows except the main one and the tools, so that you get something like this:
    [tn=500:zdjhmasg]http://**********.com/img/1235319472.png[/tn:zdjhmasg]

    Lets see what all the tools on the left do:
    [img]http://**********.com/img/1235319639.png[/img]

    1: Select tool: Use this to move the figure around, change its entire color, and by pressing different keys, modify the Figure. You can also drag nodes

    2: Sub-Select tool: Use this to select the separate lines and circles in the figure. You can change their color, and select their polyfills.

    3: Polyfill Tool: Use this to add a fill to any shape. Click on the node you wish to start on, then click on the other nodes in order and lastly click the start node again. If you accidentally start a polyfill, press Escape to cancel.

    4: Add Line: Add a line by click on any node. You can then use Ctrl+Drag to change its length and Alt+ click the ending node to delete it. Press escape to cancel in the middle of adding a line.

    5: Add Circle: Click on a node and it will add the circle. Then use Ctrl to adjust the size. Alt+ Clicking on the end node will delete it.

    Basic Commands
    Lets learn some basic commands. Go to the top menu, and click edit.

    [img]http://**********.com/img/1251241137.png[/img]
    Whoa, thats a lot! Here's what they do.

    1: If you change a color accidentally, hit this or Ctrl-Z to undo it.

    2: If you go a little crazy undoing, click here to undo the undo. Undo.

    3: Deletes a figure and places it in the clipboard.

    4: Copies a figure to the clipboard.

    5: Inserts the figure in the clipboard. It will be right over where the cut/copied figure was.

    6: Like copying, but you don't have to paste.

    7: Deletes a figure.

    8: Selects all sticks.

    9: Inserts the selected frame.

    10: Deletes the selected frame.

    11: Opens the preferences menu, where you can turn of reminders, set Stykz to work like pivot and set anti-aliasing, among other things.

    Lets Animate!
    Lets add some frames to the animation. Go to the top menu and click windows, then Frames.
    [img]http://**********.com/img/1235321264.png[/img]

    You should get something like this:

    [tn=700:zdjhmasg]http://**********.com/img/1235321354.png[/tn:zdjhmasg]

    Lets test it out. Move the stickman's arm around a bit, and hit 'Next frame'. Do this a few times, so you get about 4 frames.

    [tn=700:zdjhmasg]http://**********.com/img/1235321704.png[/tn:zdjhmasg]

    To play it, click windows, then Controller.
    [img]http://**********.com/img/1235321834.png[/img]

    Here's what the controller looks like:
    [img]http://**********.com/img/1235328844.png[/img]

    1: Rewinds to the first frame

    2: Plays the animation in a new window

    3: Sets the animation to loop when previewed

    4: Sets the speed of the animation in preview

    5: Use this to quickly jump between the frames

    Set the speed to what you want it to be, set it to loop and play it.

    You should get something like this:
    [img]http://**********.com/img/1235322062.gif[/img]
    Not amazing, but good for a start.

    The Properties Window

    Lets make a stickman with some clothes, lol. Go to windows, then click properties.

    [img]http://**********.com/img/1235323501.png[/img]

    This window should open:
    [img]http://**********.com/img/1251240420.png[/img]
    Lets see what these do.
    1: Changes dimensions of the stage, like Options in Pivot.

    2: Changes the background color of the stage.

    3: Makes the animation web safe, make sure this is checked.

    4: Changes the node size. Not important.

    Ok, so now click the sub-select tool, and holding shift, click on the stykman's back and arms.
    [img]http://**********.com/img/1235323717.png[/img]

    At the properties window, stuff should have changed.
    [img]http://**********.com/img/1235323869.png[/img]

    Click the 'Color' box (highlighted in red on the previous screenshot) and turn it green. Do the same for the legs, but turn them blue, and finally turn the head orange.

    [img]http://**********.com/img/1235324096.png[/img]

    Yay! Its a fullbody default, yet.... its one stick! This is one of the great things in Stykz. Lets see what the other stuff in that screenshot does.

    [img]http://**********.com/img/1235327269.png[/img]

    1: Switches the selections from lines to circles or vice versa.

    2: Makes a line/circle invisible, like if were thickness 0 in pivot

    3: Makes a line/circle static, or un-rotatable

    4: Makes a line/circle thicker or thinner

    5: Makes selected line/circle longer, or with a circle, bigger.

    6: Changes the angle of the selection, as if you were turning it but with degree-by-degree precision

    7: Changes the color of the selection

    8: If you have a circle, you can choose if the inside is opaque (in layman's terms, unable to see through) and if so, its fill color.

    8: If you have a circle, you can set whether it is Opaque or not (in Layman's terms, if it is un-see through), and if so, its fill color.

    Of course, if you use the main cursor (top tool), you get a different properties menu.
    [img]http://**********.com/img/1235328084.png[/img]

    1: Makes all lines/circles in figure thicker, overriding individual settings.

    2: Changes color of all lines/circles in figure, overriding individual settings.

    3: Makes entire figure bigger/smaller.

    4: Rotates entire figure.

    5: Flips figure horizontally, like it does in Pivot.

    6: Turns figure upside-down.

    7: Aligns the figure around the screen. Never seems to work, I wouldn't bother with it :\

    The Library
    This is a rather useful thing in Stkyz, this "Library". Now what is it? Basically, you can load Sticks into it so that you have easy access to them. First, create you stick. I'll be using the fullbody we created earlier.

    [img]http://**********.com/img/1235324096.png[/img]

    Select it with the main cursor (top tool), and press ctrl+L.

    [img]http://**********.com/img/1235335449.png[/img]

    This screen comes up. As you can see, I'm naming my guy 'Fullbody Default'.

    [img]http://**********.com/img/1235335548.png[/img]
    He now appears in the library!

    I can drag him from it....
    [img]http://**********.com/img/1235335759.png[/img]

    And clone him!
    [img]http://**********.com/img/1235335853.png[/img]

    Commands:
    A new feature in Stykz 1.0, Commands allows you to do less clicking and more animating. To start, click "Windows".
    [img]http://**********.com/img/1251241701.png[/img]

    Here's what it looks like.
    [img]http://**********.com/img/1251241960.png[/img]

    1: Plays the animation.

    2: Adds a new default stykz figure.

    3: Adds a new default Pivot 2 figure.

    4: Deletes selected figure.

    5: Switches to sub-select tool on current figure.

    6: Centers figure.

    7: Flips selected figure.

    8: Opens color menu.

    9: Allows you to change size for selected figure.

    10: Sends figure to front.

    11: Sends figure to back.

    12: Adds a new frame, or goes forward one frame.

    But wait! There's even more buttons on the bottom....

    [img]http://**********.com/img/1251242326.png[/img]

    1: Adds a new button, doing almost anything you want. Don't believe me?
    [img]http://**********.com/img/1251242421.png[/img]
    You'll never need a menu again!

    2: Edits a button

    3: Deletes a button

    4: Lets you move and size a button

    5: Lets you either delete all the buttons or set them to look like Pivot 2.

    6: No button? Or a sign of an upcoming update? Only time will tell...




    Stickmaking
    I bet some people are having problems with Stykz in-frame (or whatever it should be called) editing. Where ARE all of those line, circle etc. buttons?

    Adding New Figures
    Unlike Pivot, Stykz has come with several nice default figures to choose from. And, you can add figures to the library that you use all the time, and they'll always be there.

    Here's how to use one of Stykz numerous default figures:
    [img]http://**********.com/img/1235349254.png[/img]
    As you can see, it comes with a number of pre-made figures. Here's what they are:

    Single Node: Exactly what it says it is. An origin with nothing attached, useful to start a new figure or to help with foot placement without onionskin.

    Single line: A line. >_>

    Square: a square. The origin is at the lower left corner, if you cant find it.

    Circle: A basic circle.

    Stykz figure: The original default Stykz figure.

    Pivot 2 Figure: The pivot 2 default. Fun to muck around with in Stykz

    Creating a New Figure:
    Well, you probably want to make a new base to use in Stykz, or just give it a spin, right? Here are the steps to creating a simple base.

    -First, go to Figures> Single Node. This will be the origin of your base. Alternatively, you can just right click and drag to create a line.

    -Next, draw a line of it with the line tool off the toolbar/ right-clicking. Resize it to a good size and make a pair of legs.

    -Proceed to add a back and arms.

    -Use the circle tool and give him a head. Use the sub-select tool to fill it in, if you wish.

    -Hold Ctrl and re-size the limbs and head if they look weird.

    Congratz!

    Importing Pivot 2 Sticks:
    We all have our amazing Pivot 2 sticks, right? Why not draw from that database to create out Stykz animations? Here's how:

    [img]http://**********.com/img/1235349948.png[/img]

    Then find your file and import it.

    Layering:
    I must imagine, that having used Stykz you now wonder where the crude Pivot Back/Front buttons are? Well, here they are, but upgraded nicely.

    [img]http://**********.com/img/1235352148.png[/img]

    Send To Back: Sends the figure behind ALL the other sticks, just like the 'Back' button in Pivot.

    Send Farther: You have to think in layers. Like, if there were three sticks, and you selected the top one, and clicked this, it would be in the middle. The middle one would be at the front, and the back one would stay at the back.

    Bring Closer: The opposite of the earlier one, send Farther. If you used this on the back one of three sticks, it would be sandwiched in the middle, the middle one would go to the back, and the front one would stay in front.

    Bring to Front: Like the 'Front' button in pivot. Sends the figure ALL the way to the front.

    Move to Center Stage: Like the 'center' button in pivot, it drags the figure from wherever its gone off to and sits the origin at the center of the stage.

    Exporting to A .gif
    You want to show your animations on DD, right? Here's how.

    1. First, go to File> Export Animation
    [img]http://**********.com/img/1235759011.png[/img]

    2. Then, choose these settings. The frame rate can be adjusted, but remember that you should subtract one from what you would use in Pivot.
    [img]http://**********.com/img/1235759198.png[/img]

    My Gif is all speckled! D:
    This section only applies to Stykz Beta. For 1.0 and onwards, simply check the check-box "Web" under the "Properties" menu.
    The correct term for it is 'Dithered', and its because the current version of Stykz can only export in web-safe colors. This should be fixed in version 1.0, but until then, follow these instructions to make sure it doesn't happen.

    1. Go to this list of web-safe colors:
    List Of Web-Safe Colors

    2. Start working on your animation. However, when you choose a color, DO NOT pick for the available pallet!

    3. Open up colors, and pick 'Define Custom colors'
    [img]http://**********.com/img/1235759659.png[/img]

    4. Go look at the previously mentioned web page of web-safe colors. Scroll down and pick the color you want.

    5. Check the three numbers and go back to Stykz.

    6. Go to this section of the custom Colors menu.
    [img]http://**********.com/img/1235759997.png[/img]
    In the 'Red' box, put the first number of the color you wanted. In the 'Green' box, put the second number, and in 'Blue' put the third number. so for instance, if earlier I had chosen color '51 - 51 - 204'. In Red, I would put 51, in Green I would put 51, and in Blue I would put 204.



    So, there you have it. Feel free to submit bugs/tips/contact Stykzman simply by:
    [img]http://**********.com/img/1235684862.png[/img]
    Now love Stykz.
    [center:2s1p98zp]|Thread|Hosting Guide|Collab Tips|
    [img]http://**********.com/img/1250795438.png[/img][/center:2s1p98zp]

  2. #2
    Dedicated Member

    Join Date
    Jun 2008
    Location
    ________________
    Posts
    930

    Re: General Stykz Tutorial

    Quote Originally Posted by CodeMachine
    Damn, you beat me to it. I was in the middle of making one but then Firefox prevented me from entering more text into the box. I tried saving it, but it failed to do so. I was sad.

    But good tutorial, did you post it on the forums?
    No, I didnt. No account, you see?
    [center:2s1p98zp]|Thread|Hosting Guide|Collab Tips|
    [img]http://**********.com/img/1250795438.png[/img][/center:2s1p98zp]

  3. #3
    Enthusiast

    Join Date
    Apr 2008
    Location
    Inside your animashunz having fun with Mr. default :D
    Posts
    2,078

    Re: General Stykz Tutorial (56k warning!)

    Thanks man. I was having a hard time figuring out some things.

  4. #4
    Fanatic Enthusiast Stef's Avatar

    Join Date
    May 2008
    Location
    Credits to Osprey for the sig and Underground for avatar
    Posts
    2,504

    Re: General Stykz Tutorial (56k warning!)

    Thanks man nice tut it helped me to understand stykz :P
    Like a rolling stone

  5. #5
    Fanatic Enthusiast Plan B's Avatar


    Join Date
    Apr 2007
    Location
    Bournemouth, UK.
    Posts
    4,611

    Re: General Stykz Tutorial (56k warning!)

    I'll be using this, i could do jack all when i first opened it.

  6. #6
    Dedicated Member Frost's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    984

    Re: General Stykz Tutorial (56k warning!)

    nice rotten it seems like your'e in to this with tutorials nice!
    I will download stykz soon I hope anyways great!
    [center:1n4lo0gx]Animations|Forum Rules
    [img]http://**********.com/img/1243195837.png[/img][/center:1n4lo0gx][center:1n4lo0gx][/center:1n4lo0gx][center:1n4lo0gx]<3 to Sapphire for the Awesome sig[/center:1n4lo0gx]

  7. #7
    Insanity Skype's Avatar



    Join Date
    Apr 2007
    Location
    England
    Posts
    27,397

    Re: General Stykz Tutorial (56k warning!)

    That was brilliant, you really are a great tutorial writer, lol.

  8. #8
    Senior Member
    Join Date
    Jan 2009
    Location
    Alaska
    Posts
    348

    Re: General Stykz Tutorial (56k warning!)

    My friend said that beta could crash my computer if I download something that is a beta version. (please let me know if he is wrong) If my friend is right could you send me a link for stykz that is not a beta version?
    Join my Chat if you want to, just click on the user bar below.
    [img]http://**********.com/img/1269864940.bmp[/img]

  9. #9
    Fanatic Enthusiast Stef's Avatar

    Join Date
    May 2008
    Location
    Credits to Osprey for the sig and Underground for avatar
    Posts
    2,504

    Re: General Stykz Tutorial (56k warning!)

    Quote Originally Posted by Sizzlethehedgehog0
    My friend said that beta could crash my computer if I download something that is a beta version. (please let me know if he is wrong) If my friend is right could you send me a link for stykz that is not a beta version?
    1- Pure B.S. seriously I have 2 betas the one for pivot 3 and the other for stykz and I still have my PC working fine

    2- Stykz is only avaible in beta
    Like a rolling stone

  10. #10
    Fanatic Enthusiast Schizzy's Avatar

    Join Date
    Nov 2008
    Location
    Here, There, and Everywhere.
    Posts
    2,604

    Re: General Stykz Tutorial (56k warning!)

    Quote Originally Posted by Sizzlethehedgehog0
    My friend said that beta could crash my computer if I download something that is a beta version. (please let me know if he is wrong) If my friend is right could you send me a link for stykz that is not a beta version?
    lololololol

    Beta just means it's unfinished, in the beta stage of programming. It won't do anything harmful to your computer.


 
Page 1 of 4 1234 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •