Project

General

Profile

Statistics
| Branch: | Revision:

labi2014-t1g2 / Webpage / documentation.html @ master

History | View | Annotate | Download (6.08 KB)

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2
<html>
3
<head>
4
        <title>Ganimator: Animation Framework</title>
5
    <link rel="shortcut icon" href="assets/ganimator_icon.ico">
6
    <link href="css/style.css" rel="stylesheet" type="text/css">
7
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
8
    
9
    <!--Adobe Edge Web Fonts OpenSans Font-->
10
    <script>var __adobewebfontsappname__="dreamweaver"</script>
11
    <script src="http://use.edgefonts.net/open-sans:n3,i3:default.js" type="text/javascript"></script>
12
</head>
13
    
14
    <body>
15
    <!--Navigation Bar-->
16
    <section id="navigation_bar">
17
      <table width=1000 border="0" align="center">
18
        <tr>
19
          <td width=200 align="left">
20
          <img src="assets/ganimator_logo.png"/>
21
          </td>
22
          <td width=800  align="right">
23
          <a href="index.html"><img src="assets/menu_home.png" onmouseover="this.src='assets/menu_home_pressed.png'" onmouseout="this.src='assets/menu_home.png'" /></a>
24
          <a href="features.html"><img src="assets/menu_features.png" onmouseover="this.src='assets/menu_features_pressed.png'" onmouseout="this.src='assets/menu_features.png'" /></a>
25
                  <!--<a href="news.html"><img src="assets/menu_news.png" onmouseover="this.src='assets/menu_news_pressed.png'" onmouseout="this.src='assets/menu_news.png'" /></a>-->
26
          <img src="assets/menu_documentation_pressed.png"/>
27
          <a href="source.html"><img src="assets/menu_source.png" onmouseover="this.src='assets/menu_source_pressed.png'" onmouseout="this.src='assets/menu_source.png'" /></a>
28
          <a href="about.html"><img src="assets/menu_about.png" onmouseover="this.src='assets/menu_about_pressed.png'" onmouseout="this.src='assets/menu_about.png'" /></a>
29

    
30
          </td>
31
        </tr>
32
      </table>
33
    </section>
34
    
35
    <!--Getting started-->
36
    <section id="getting_started" align="center">
37
        <table width=1000 border="0" align="center">
38
        <tr>
39
            <td width=550 align="left">
40
            <b>Creating the first animation</b>
41
            <p>
42
            The Ganimator studio consists essentially of three sections where the working window and animation shown on the right panel list of all bones (objects) and their key frames, and finally the timeline.
43
The first thing to do when starting a new project is to define a new workplace where they will be stored all the images to be used in the animation to select a new can click File / Settings and choose a directory on the new menu.
44
In order to facilitate the animation process is a set of atralhos on the keyboard that allow you to edit the keyframes in a simpler way, together with the mouse are the simplest way to edit the animations.
45
            </p>
46
            <ul>
47
            <li>CTRL - Move Object Position</li>
48
            <li>SHIFT - Change Object Size</li>
49
            <li>ALT - Set new Origin Point</li>
50
            <li>R - Rotate object (mouse X axis)</li>
51
                        <li>A - Change object alpha</li>
52
            <li>Middle Mouse - Move Camera Around</li>
53
            </ul>
54
            </td>
55
            <td width=450 align="left"><img src="assets/documentation_screen_1.png"/></td>
56
        </tr>
57
        </table>
58
        <table width=1000 border="0" align="center"><tr><td width=1000 align="left">
59
       <b>Add Frames to the animation</b>
60
       <p>To add new Key franes to the animation, we need to create a bone first to create a bone select add in te top box on the right panel, aftar creating a bon a new keyFrame is added to that bone at time 0s, this key frame should be used to sync with the last frame in order to get animations loops to run smooth, to add new frames after create the bone we just need to press the button add in the bottom box in the right panel, a new window will appear asking witch time will be used for the new key frame.</p>
61
       <p>The animation duration shown in ganimator is the one from the bone that was the bigger duration associated to it, but every bone can have its own duration and loop multiples timeson the animation</p>
62
      </td></tr></table>
63
        <br/>
64
    </section>
65
    
66
    <!--iframe with javadocs-->
67
    <section id="javadocs" align="center">
68
           <table width=1000 border="0" align="center"><tr><td width=1000 align="left">
69
       <b>Ganimator Library JavaDocs</b>
70
       <p>Animations created in Ganimator studio can be incorporated into projects created with libGDX (in the future could be added support for alternative frameworks), should be used provided the package along with the program, which contains all the necessary tools for playing and editing animations.</p>
71
      </td></tr></table>
72
      
73
      <iframe src="javadoc/index.html" frameborder=0 width=1000 height=700 align="center"></iframe>
74
      <br/> 
75
    </section>
76
        
77
    <!--Sample Code to use with libgdx-->
78
    <section id="javadocs" align="center">
79
           <table width=1000 border="0" align="center"><tr><td width=1000 align="left">
80
       <b>Creating libGDX project</b>
81
       <p>After creating a new projecto using the setup utility included with libGDX, we need to also import the ganimatior-lib.jar included with ganimator, heres a sample code that loads one of the included sample animation from the root on "internal" storage, and loads textures from folder animation also in the root at "internal" data location. (Exported with<a href="http://notepad-plus-plus.org/"> Notepad++</a>)</p>
82
      
83
      </td></tr></table>
84
      <iframe src="files/java_code_sample.html" frameborder=0 width=1000 height=920 align="center"></iframe>
85
      <br/> 
86
    </section>
87
    
88
    <!--Footer-->
89
    <section id="footer">
90
      <table width="1000" border="0" align="center">
91
        <tr>
92
          <td width=220 align="center"><img src="assets/ganimator_logo_small.png"/>
93
          </td>
94
          <td width=380>
95
              <b>Ganimator Animation Library 2014-2015</b>
96
          </td>
97
          <td width=400 align="right">
98
                  <img src="assets/footer.png"/>
99
          </td>
100
        </tr>
101
      </table>
102
   </section>
103
    
104
    <!--Body End-->
105
    </body>
106
</html>