Hybrid View

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    409
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default Animator 1.5 Can't get responsiveness to work?

    Animator 1.5 Can't get responsiveness to work?


    Hi,

    I am just checking out the demo to see how it would work for responsive adverts, and I choose a flexible template, set the minimum dimensions and max dimensions. I add a background and another elements to the canvas but when I preview I don't see anything changing at all, the responsive setting doesn't seem to work.

    Am I missing something? I even tried opening an example project and setting the background to flexible but nothing seems to work.

    Thanks,

    :-)

  2. #2
    Sencha - Architect Dev Team
    Join Date
    Apr 2012
    Posts
    287
    Vote Rating
    24
    miro.bojic will become famous soon enough miro.bojic will become famous soon enough

      0  

    Default


    Hi digeridoopoo,

    The flexible layouts that we included in Animator 1.5 is a tool to help make your animations responsive, but just switching the layout on any animation will not automatically make it become responsive.

    When designing animation using flexible design, your canvas inside Animator will preview the minimum size that you set under your flexible layout options. You should arrange the objects and animations on the canvas in such way so that animation works properly in its smallest size first, and then make sure that it looks good when the canvas is stretched as well.

    In order to do this, for all the objects that you include you should set the anchor - you can find this under Base Object -> Dimensions -> Anchor. Anchor sets what side or corner of the canvas is the object position relative to. This way if you want that your objects are positioned on the left no matter how much your animation is stretched, you should anchor them to the left side of the canvas.

    Here is an example project with flexible layout and two objects anchored to left and right side. It scales between 320 and 760 pixels: https://github.com/mbojic/example_flex . If you don't use github, you can click 'Download as ZIP' to download the project files. Simply preview it in the browser and try rescaling the browser window to see the flexible layout behavior.

    Hope it helps!

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    409
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default Thanks...

    Thanks...


    Perfect, thanks for the example. This gives me a few more weeks to experiment before the trial runs out.
    Thanks again,

    :-)

  4. #4
    Sencha - Architect Dev Team
    Join Date
    Apr 2012
    Posts
    287
    Vote Rating
    24
    miro.bojic will become famous soon enough miro.bojic will become famous soon enough

      0  

    Default


    I'm glad it helped. Happy animating!

  5. #5
    Sencha User
    Join Date
    Oct 2013
    Posts
    1
    Vote Rating
    0
    ccowell is on a distinguished road

      0  

    Default Responsive Demo

    Responsive Demo


    Is there anyway I can convert the floating boat demo to a responsive layout?

    http://docs.sencha.com/animator/1.5/...tro_quickstart

    Here's what I did for my first attempt:
    1. Created a "flexible" project and set the canvas to 320x480.
    2. Attempted to resize the assets under "Dimensions". (I think I failed)

    Now the demo is cut-off with no resizing. Any help or pointers or links to a great walkthrough would be very helpful. I am also using the trial version too. Any quick help would be really nice. Thanks.

  6. #6
    Sencha - Architect Dev Team
    Join Date
    Apr 2012
    Posts
    287
    Vote Rating
    24
    miro.bojic will become famous soon enough miro.bojic will become famous soon enough

      0  

    Default


    Hi ccowel,

    If the only thing you are attempting to do is resize the animation in its entirety, you should add a bit of JS that will scale the animation to the size of the screen or container that you are trying to fit it in.

    Flexible design is better suited for cases where assets keep their dimensions, while the canvas dimensions change. To make best use of this, you should use anchor property as described above. Also take a look at the project example in the post above for flexible design demo.