Page MenuHomePhabricator

Sketches
Updated 856 Days AgoPublic

Toolbar

    1. I tried out Jason's idea for having drawers for each user group of the software. So there is selection (all users), drawing, animation, and programming. I'm not exactly sure how many tools there will be for each group or what those tools will be, so it's a pretty rough sketch. I want to have them all be viewable, no matter what is expanded, the user shouldn't ever have to scroll through the tools.
    2. This shows what the GUI would look like with a drawer closed.
    3. This shows the GUI with all the drawers closed. Selection should never be closed, so it doesn't even have that option.
    4. I like the single toolbar like what Flash has, so I also sketched that out. Synfig users wanted bigger buttons, so that definitely is something I want to make happen, not sure it actually appears that way on here. I used separator lines to divide out the tools for the different user groups with the exception of the programming tools. (See 5.)
    5. I'm not entirely sure that programming tools belong with the rest of the tools. I don't think programmers would instinctively look for them there, most programs put them at the top. (Visual Studio, CodeBlocks, Eclipse) I sketched out a toolbar, I'm thinking it could be toggleable. That way if we end up making user profiles we could automatically hide it for the users who are only drawing.

    (NOTE: Toolbar is resizeable, so a combo might be desirable.)

    Timeline

    1. This is the layer portion of the timeline.
      • My idea is to have each layer be a different color so you can easily see what type of layer it is. Scripts are purple, image layers are green, and mask layers are blue. Each layer type has its own symbol, scripts are triangles, images are squares, and masks are filled in squares.
      • To add a layer, long press on the plus button and select the type of layer from a dropdown.
      • To delete a layer, select the layer and then click the minus button.
      • Layers can be rearranged by clicking and dragging.
      • The eye and lock icons represent hiding/showing and locking/unlocking the layers. Click on the column in the layer to toggle the black dot.
    1. This is the frame area of the timeline.
      • The red bar represent the current position in time.
      • Time is blocked out in units of 5. (1, 5, 10, 15...)
      • The frame area can be scrolled horizontally to view the future/past. The frame area and layers portion are locked together, so scrolling up/down allows the user to see all of their layers.
      • Please refer to the key for an explanation of the frame symbols.
    1. This is the playback section.
      • The fps may not be an editable field in the final product since we use 24 fps, but for now I drew it as a textbox.
      • Playback buttons from left to right are Go to first frame, Step back one frame, Play, Step forward one frame, and Go to the last frame. (Same as Flash)
    1. These are the onion skinning tools.
      • From left to right the buttons are Onion Skin, Onion Skin Outlines, and Edit Multiple Frames. (Same as Flash)

    KEY
    I'm not sure how many different types of symbols that we'll need. This is less than Flash has.

    • Square with a black dot: Keyframe with content
    • Square with a 'C': Code containing frame
    • Square with a hollow dot: Blank keyframe
    • Empty square: Static frame
    • Arrow between two squares containing black dots: Motion tween

    Timeline With Comments/Notes


  • Note: I realized when writing this up that I had created a bit of confusion by naming this feature comments because I ended up with comments of type comment. I'm going to rename this feature notes. The sketch doesn't reflect this name change.

    Notes can be of warning, comment, and thumbs up type. Warning means that there is something wrong and it needs to be fixed ASAP. Comment is for explanation, discussion, brainstorming, etc. Thumbs up is for saying thanks, showing appreciation, or maybe showing a style to duplicate.

    1. This area shows how many warnings, comments, and thumbs up are present in the timeline. This bar could also be used to display warnings/errors in the code if the user profile is set to programmer.
    1. The notes are displayed on the timeline as filled in overlay squares. I chose brown for this draft, but think it's something to experiment with to get an eye catching, but not overly distracting feel to it. The user also needs to be able to see what type of frame is behind the overlay. For simplicity sake, all types of comments are the same color, I was thinking a mouseover would show the type of note and initials of the person who left the last note. (@jcmcdonald proposed the notes be indicated with a sticky note image.)
    1. This is a context menu. In order to add or delete a note, the user will right click on the frame in the timeline that contains the note. Probably only the person that created the note should be allowed to delete it, although that could cause problems if that person becomes unavailable. We don't want the timeline to become cluttered. (@jcmcdonald suggested that anyone could be allowed to delete a note, but the notes are never really deleted, kind of like how Phabricator works. Delete should probably be renamed to close. There will need to be a notes panel where the user will be able to toggle viewing of open/closed notes.)
    1. This is the pop-up box that would appear when the user chooses to add a note. By default the frame clicked on with show up in the beginning and ending textboxes, but the user can enter a larger range or correct a misinterpreted mouse click. (This pop-up box will probably also be useful when a user chooses to delete a note. It's always good to check that the user is sure of their actions.)
    1. After entering the range, the user would be presented with this pop-up box that allows them to leave a note and view the conversation history. The top part is the conversation history, initials and icon appear next to the text the person sent. It resembles instant messaging or text messaging. The lower part allows the user to check the box for type of note, enter their text, and then click submit.

    (This current design is dependent on the user "owning/registering" the program as there isn't a spot to type initials in. I'm not sure if this is an idea that we want to embrace. Does our target audience share a computer with someone else? Could we grab this info from the OS?)

    Right Side Panels


  • These panels will appear on the right side of the screen.

    1. This is the library where all of the items for reuse will be stored. This is ideal for gameplay pieces. The user will be able to select the item and then click the add button. It may also be a good idea to have a context menu item for adding a item to the library. To delete an item, the user selects the item from the library and then clicks the minus button.
    1. This is the collection panel for all of the character body parts for easy animation. Since the main characters remain the same throughout the Operation Spyrat adventure, it makes sense to be able to add a rig, almost as a separate document from the activity page. I'm not entirely sure what that might look like or if it's what we're going for.

    I thought it'd be useful to be able to name the character parts and hide/show them as you're working. I gave each body part a separate drawer with a label. To prevent errors, I greyed out the parts that don't belong, for this example the animator is working on Scamper's mouth, so the arm shapes are disabled.

    1. To go along with the idea of the separate document idea, I added import/export buttons. The user could export the current collection or import one they have already completed.

    Canvas

  • The canvas will be a drawing area widget from the gtkmm.

    1. Rulers should be present on program startup, but the user may choose to toggle them off. The rulers will measure in pixels as a default. I drew the rulers starting at 0, thinking in terms of cartesian coordinates, but it might be more beneficial to have the 0 points line up with the top left corner of the working document.
    1. Drag out guides are drawn in blue. I chose this color because it's what Adobe uses, it'd probably be a good idea to allow the user to change this color since it could blend into the project.
    1. The program should startup with just the work area present. (No active document.) Most users will probably utilize a transparent background, so I drew what a sample document might look like. (The work area didn't scan in very well, it's a light grey.)
    1. The bottom of the canvas features a zoom level. This is a dropdown box that allows for user input, that way we have quick zoom options as well as custom ones.

    Final GUI

    1. This is where the menubar will go. I ran out of time to complete this.
    1. These are all the options for the selected tool. Selected tools are outlined in black on the toolbar. In this example, the rectangle tool is the one selected.
    1. This is the toolbar, only drawing and selection tools are featured here. I decided to put the programming tools where options for selected tools are displayed (2) when the user is in programming mode and the animation tools are all on the timeline.
    1. This is the canvas area, other than the numbering on the rulers, not much has changed.
    1. The library didn't change at all from the previous draft.
    1. The collection panel also didn't change at all from the previous draft, it did shrink to fit in the available space. This panel will likely change as the team defines what exactly a rig is and how it works behind the scenes.
    1. The onion skinning and playback tools didn't change at all from the previous draft.
    1. The timeline didn't change from the previous draft.
    1. The view information was updated to include toggleable views. The idea is that the user selects the box that they want to see the notes for. For example, all would show active and inactive notes, while active would just show the ones that are active right now. A summary is also displayed to show the count of note type.
    Last Author
    jcmcdonald
    Last Edited
    Apr 10 2020, 2:35 PM