29 Replies Latest reply: Aug 4, 2012 3:31 PM by HugoKing321 RSS

    How to put an MSO inside another MSO

    Laubender CommunityMVP

      Hello all!

      An interesting question came up in the following post by Folobo:

       

      http://forums.adobe.com/message/4572897#4572897

       

      "Is it possible to use a slideshow embedded in a big overlay slideshow?"

       

      I'd like to rephrase this question:

       

      "Is it possible to put a MultiStateObject (MSO) inside another MultiStateObject?"

       

      And further: if the answer is "yes", could we put that to use with the DPS?

       

      @Folobo – this is an interesting question. A quick test is showing that you cannot do it in the UI (correct me if I'm wrong).

       

      Let's try it this way:

      If you have two objects:

      1. an MSO #1 (with two rectangles, rectangle #1, rectangle #2)

      2. Another rectangle on the page: rectangle #3

       

      Now select the two objects and make an MSO out of it (using the "Object States" panel).

      You would think, now I get an MSO with two states, state 1 with rectangle #3 together with state 2 with MSO #1.

       

      But not so:

       

      Result: One new MSO with three states (rectangle #1, rectangle #2, rectangle #3)

       

      Hm. I don't give up on that. Let's try it another way:

      Could we select at least two objects inside a state of an MSO and make that a new MSO?

       

      Sure, We could select two objects inside a state, but since we are *inside* an MSO the "Object States" panel does not show the possibility to make a new MSO. You can only add states or add objects to states…

       

      Frustrating. End of story? Maybe…

       

      Be forewarned. The following is highly experimental!

       

      Let's try it by scripting (ExtendScript/JavaScript).

       

      The scripting reference is showing that an MSO "MultiStateObject" object has an add()-method. And further on, that add()-method could be applied to:

       

      Document

      Spread

      MasterSpread

      Page

      Layer

       

      pageItem

       

      And that is the key to a possible solution. We could add a new MSO to a "pageItem" object.

       

      A simple rectangle should be qualify for a "pageItem" object; and that, of course, could reside in a state of an MSO.

      So, we could add a new MSO to a rectangle inside of a MSO!

       

      How can we access a rectangle inside a MSO? Easy: We could select it and work with that selection.

       

      So let's do that: select the rectangle in the first state of an MSO and run this one-line-script (be sure you did select the rectangle and not the MSO or one of its states:

       

      app.selection[0].multiStateObjects.add();
      

       

      We now have an MSO inside another MSO!

       

       

      Explanation:

       

      A "generic MSO" was added with the add()-function to a selection (the container object: in our case the selected rectangle).

      The "generic MSO" is a two state MSO consisting of one rectangle in each state of a very small size (10px x 10px).

      At first it is invisible, because it is very likely that it is positioned outside the geometric bounds of its container object (the rectangle).

       

      But we can customize this!

      Go to the layers palette and select the new MSO, move it inside the geometric bounds of its container object, readjust its size, add states as you wish, populate the states with images, and other objects etc.pp.

       

       

      So, what can we do with an MSO inside another MSO? (As I already said, this is highly experimental.)

       

      My experiments with that are very fresh. I did not try a lot. But it seems that we could at least autoplay this MSO.

       

      I have to test more thoroughly what is possible and what will work with buttons etc.pp…

      I really like to hear from you what you will find out and if you can put it to any use.

       

      Uwe

       

      Message was edited by: Laubender

        • 1. Re: How to put an MSO inside another MSO
          Folobo Community Member

          @ Laubender

           

          Many thanks, you are a great coder! But i have a problem to try this solution:

           

          How can we access a rectangle inside a MSO? Easy: We could select it and work with that selection. So let's do that: select the rectangle in the first state of an MSO and run this one-line-script (be sure you did select the rectangle and not the MSO or one of its states:

          I have a problem to select the object inside a MSO. I select the state but it's not correct!

          So i think to check the layers pane: but here i see only one layer rectangle (but the rectangle are 3)!

          So: how the select my object to run the script?

           

          Many thanks.

          f

          • 2. Re: How to put an MSO inside another MSO
            Laubender CommunityMVP

            @Folobo – You can select every object of the active state of your MSO in the Layers palette. If the object you want to select is in another state, make that state to the active state and then select the object.

             

            See screen grabs of the MSO on the page and the Layers palette.

             

            1. The MSO selected (active state is "State 1"):

             

            MSO_selected.png

             

             

            2. The rectangle in State 1 selected:

             

            Rectangle_in_state1_selected.png

             

            Hope that helps,
            Uwe

            • 3. Re: How to put an MSO inside another MSO
              Folobo Community Member

              Many thanks Uwe. Now i understand how to do and i'm happy. All work. Yes, it's not easy but it can be very useful!  Really thanks. f

              • 4. Re: How to put an MSO inside another MSO
                Laubender CommunityMVP

                Ok. To ease the use of the script snippet I added two features:

                 

                1. Bounding Box of the new MSO is the same as selection

                2. The new MSO is selected after executing the script

                 

                An orderly error message will pop up, if the script could not create a new MultiStateObject…

                 

                //AddGenericMultiStateObjectToSELECTION.jsx
                //Uwe Laubender
                //DESCRIPTION:Adds a generic MultiStateObject to the selection; new MSO will be selected after running the script.
                /**
                * @@@BUILDINFO@@@ AddGenericMultiStateObjectToSELECTION.jsx !Version! Tue Jul 24 2012 19:24:29 GMT+0200
                */
                
                
                try{
                
                    var sel=app.selection[0];
                    var selGB = sel.geometricBounds;
                    var newMSO = app.selection[0].multiStateObjects.add({
                        geometricBounds:selGB
                        });
                
                    alert("Created a new MSO.");
                
                    app.select(newMSO);
                
                }catch(e){alert("ERROR"+"\r"+e.message+"\r\r"+"No new MultiStateObject was created.")};
                

                 

                 

                Hope, that helps…

                 

                Uwe

                • 5. Re: How to put an MSO inside another MSO
                  Folobo Community Member

                  Great Uwe! I try!  f

                  • 6. Re: How to put an MSO inside another MSO
                    Laubender CommunityMVP

                    Just test the results carefully with the Adobe Content Viewer on your device…
                    There could be bad surprises…

                     

                    Hope to hear from you.

                     

                    Uwe

                    • 7. Re: How to put an MSO inside another MSO
                      Felipe - dualpixel Community Member

                      Hi, Very nice

                      I tried that with buttons inside and outside from nested multistate objetcs and works well.

                      Now I can do 2 levels in slideshow

                      Great

                       

                      __Felipe

                      • 8. Re: How to put an MSO inside another MSO
                        Laubender CommunityMVP

                        Hi, Felipe!

                         

                        Thank you for testing. I'd like to hear more examples of usage…
                        (Before marking my own thread as "Correct" ;-) )

                         

                        Uwe

                        • 9. Re: How to put an MSO inside another MSO
                          mobly Community Member

                          Hi Uwe

                          I've been reading the thread, but still don't understand where the script is attached, I'd love to test this out!

                          cheers

                          Alistair

                          • 10. Re: How to put an MSO inside another MSO
                            Laubender CommunityMVP

                            @Mobly –

                            What you need is a selection of a single "graphic frame" like a rectangle, a oval etc..

                            Even a Group object will qualify as a selection.

                             

                            That selection could be inside a MultiStateObject (MSO).

                             

                            The script is adding a new generic MSO to your selected object.

                            That means the new MSO will be "inside" the selection after executing the script.

                             

                            In case you choose a rectangle inside a MSO as your selection, you'll get an nested MSO: a MSO inside an MSO. Impossible to do in the UI.

                             

                             

                            To access the script snippet, copy the code in answer #4 to your text editor, save it as a plain text file with *,jsx suffix to your scripting folder of your InDesign installation:


                            Example path:

                            Applications/Adobe InDesign CS6/Scripts/Scripts Panel

                             

                            To organize your scripts you can put them into subfolders of the Scripts Panel.

                             

                            You now have immediate access to that script in the Scripts panel of InDesign. No need to quit and restart InDesign.

                             

                             

                            Make your selection and double-click the script in the Scripts panel to fire it up. A new generic MSO will reside inside your selection. The new MSO is now selected and you can customize it: adding states, adding images and other objects to states, etc.pp.

                             

                            If you selected an unappropriate page object for adding a new MSO, you will get a warning message. E.g. if you selected an MultiStateObject instead of a rectangle inside a MultiStateObject or if you selected text or a text frame.

                             

                            If all is well, you'll get an alert message "Created a new MSO." and the new MSO is immediately selected ready for customization.

                             

                            Uwe

                             


                            • 11. Re: How to put an MSO inside another MSO
                              Folobo Community Member

                              Work well for me!

                              Many thanks Uwe!

                              Great job!

                              f

                              • 12. Re: How to put an MSO inside another MSO
                                mobly Community Member

                                Hi Uwe

                                You explained the process very well, and I added the script to the panel etc.

                                However, perhaps I don't have such good foresight as you, as I'm a bit lost what to do next.

                                 

                                I created a basic 2 state object, red square; blue square. I double click the MSO to select my first red square, then double click your script, and a message pops up to tell me I have created a new MSO.

                                But all that has happened is the my 2 squares have lost the colour that I gave them, I can go back in and add the colour again, but what am I supposed to be able to do now?

                                Thank you for your generous time, in sharing this with us, I'm very keen to get some realy sexy buttons working with this.

                                Cheers

                                Alistair

                                • 13. Re: How to put an MSO inside another MSO
                                  Laubender CommunityMVP

                                  @Mobly – Try to select a rectangle in your state 1 like in the screen grab #2 of post #2 of this thread.

                                  And then run the script.

                                   

                                  Just a question: after the alert message that you clicked "ok", did you check the Layers panel?
                                  There should be a new MSO visible and it should also be selected.

                                   

                                  Uwe

                                  • 14. Re: How to put an MSO inside another MSO
                                    Laubender CommunityMVP

                                    @Mobly – in case it did not work out for you, here some screen grabs for the different steps:

                                     

                                    1. Select an MSO:

                                     

                                    01-MSO_selected.png

                                     

                                     

                                    2. Select a "graphic frame" inside the MSO; in this case a "<square>"; you can see the big blue dot in the Layers panel behind the generic name "<square>":

                                     

                                    02-Square in MSO_selected.png

                                     

                                     

                                    3. Open the Scripts Panel and select the script:

                                     

                                    03-Using the script_Before.png

                                     

                                     

                                    4. Run the script by double-clicking the script; the generic name of your selected object has changed to "graphic frame", but trust me, it's still a square…

                                     

                                    04-Using the script_ShowingMessage.png

                                     

                                     

                                    5. Click the "Ok" button of the message and InDesign will select the new MSO ("Multi-state 2") as you can see here. It has two states with one rectangle each,  fill and stroke is "None":

                                     

                                    05-Using the script_AfterMessage.png

                                     

                                     

                                    And: you can see that this new MSO is nested inside the MSO ("Multi-state 1").
                                    What you do with that construct is up to you:

                                     

                                    6. Color the "<square>" of state 1 of "Multi-state 2":

                                     

                                    06-ColorSquareOfState1inMSO2.png

                                     

                                     

                                     

                                    7. Resize and change position of "Multi-state 2":

                                     

                                    07-ChangeSizePositionOfMSO2.png

                                     

                                     

                                    8. But remember: "Multi-state 2" is nested in the graphic frame you selected before running the script:

                                     

                                    08-NestedInGraphicFrame.png

                                     

                                     

                                    I hope you get the picture now…

                                     

                                    Uwe

                                    • 15. Re: How to put an MSO inside another MSO
                                      alidabbs Community Member

                                      Uwe, what a star! I've just tried this and it works exactly as described!

                                       

                                      It means I can now create an MSO that calls up an image gallery that lets a user swipe from image to image inside of tapping on NEXT/BACK buttons, safe in the knowledge that when the user closes the gallery, the active swipe area is no longer on the page (which would otherwise interfere with page-turning).

                                       

                                      Oh joy, I've been looking for a non-Web-view solution to large images in swiping galleries for two years!

                                       

                                      Big beer if we ever meet.

                                       

                                      Ali

                                      • 16. Re: How to put an MSO inside another MSO
                                        BobLevine CommunityMVP

                                        I think using the works “safe in the knowledge” is a bit of a stretch.

                                         

                                         

                                         

                                        While I admit this is seriously cool, I have my doubts about doing anything like this without official support.

                                         

                                         

                                         

                                        Bob

                                        • 17. Re: How to put an MSO inside another MSO
                                          alidabbs Community Member

                                          Hmm, official support...

                                          1. "No, you can't do that in DPS"

                                          2. "Oh dear, please file a bug report"

                                          • 18. Re: How to put an MSO inside another MSO
                                            alidabbs Community Member

                                            OK, I'm being less flippant now. This method of nesting one MSO inside another has some notable side-effects.

                                             

                                            First is that selecting a group of objects inside an object state and running the script seems to create a new container frame that is the same size as the group's bounding box, putting the nested MSO inside it. While it's possible to navigate the content of this nested MSO via the Layers panel, it becomes tricky and confusing when trying to drill through the on-screen items with a sequence of double-clicks (or even using the Direct Selection tool). I haven't quite worked out what's going on but I plan to test this more tomorrow.

                                             

                                            The filesize of the folio I created is suspiciously large. I created a two-state MSO: one with a button, the other to fill the screen with a transparent background. I then used the script to create a nested MSO swipable image gallery within this second state. Just four images in a nested MSO... yet the folio is in excess of 20MB. Even accounting for PNGs at iPad 3 resolution, this is much bigger than it ought to be. A web gallery equivalent, albeit with JPGs, would be a tenth of this size.

                                             

                                            Worth further investigation...

                                             

                                            Ali

                                            • 19. Re: How to put an MSO inside another MSO
                                              Laubender CommunityMVP

                                              I can only say: test it thoroughly…

                                               

                                              @Alistair – how is your software/hardware configuration you are testing with?

                                               

                                              I myself had already some issues with Adobe Content Viewer on the Mac. Less issues with the Content Viewer on the iPad3.

                                               

                                              The issue with Content Viewer on the Mac was, that in swiping through a nested slideshow the contents of the current state was slightly scaled smaller when crossfading to the next/previous state. However the next/previous state was rendering very well…

                                               

                                              This flaw did not come up  when testing on the iPad3.

                                               

                                              Another issue was a button, defined to go to the first state of the nested MSO (go to State 1), that always showed its "Click" state when the first state was reached. The same issue with a button, defined to go to the last state of the nested MSO (go to State 5, the last state in the nested MSO), that always showed its "Click" state when the last state was reached.

                                               

                                              That might be a cool feature, but was never intended…

                                               

                                              With/Without using buttons, swiping through the slideshow went without flaws. A PDF folio with the same contents is also working very well.

                                               

                                              All tested locally on Mac OSX 10.6.8 with InDesign CS5.5 v7.5.3 together with the old Folio Builder v20 and Overlay Creator v20 tools and with the iPad3 connected by USB. So it might be a different game with the v21 of ADPS altogether. I will update Folio Builder and Overlay Creator to v21 and test again soon…

                                               

                                              Be cautious when testing…

                                               

                                              Uwe

                                              • 20. Re: How to put an MSO inside another MSO
                                                mobly Community Member

                                                Thanks Uwe, I think I'm getting there! I haven't had any time to create someting to test yet, I'm on CS6 now with 10.7.4

                                                 

                                                @Ali B I might have to buy you a beer, as I'm not sure I still follow how to appy these principles to create someting cool!

                                                 

                                                I was thinking of a family tree style button system, in which you need nested mso's to keep revealing and dismissing more and more levels....

                                                I'll see if a coffee and a few hours quiet thinking helps

                                                 

                                                Cheers

                                                Ali G

                                                • 21. Re: How to put an MSO inside another MSO
                                                  Laubender CommunityMVP

                                                  … seems to create a new container frame that is the same size as the group's bounding box, putting the nested MSO inside it.

                                                   

                                                  @Alistair – you always nest the new generic MSO inside the selection. So, if you select a group, the new MSO is inside the group with the same geometric bounds as the selected object.

                                                   

                                                  Would you think it's easier for you to work on that new MSO, if it's rectangles were filled with a color?
                                                  If yes, try the following variant of the script shown in #4 that will do that for you.

                                                   

                                                  As a bonus feature, you can undo all script actions (generate new generic MSO, fill the rectangles in its  states with color [Paper]) in one go:

                                                   

                                                  //AddGenericMultiStateObjectToSELECTION_v2.jsx
                                                  //Uwe Laubender
                                                  //DESCRIPTION:Adds a generic MultiStateObject to the selection; new MSO will be selected after running the script. States rectangles will be filled with [Paper].
                                                  /**
                                                  * @@@BUILDINFO@@@ AddGenericMultiStateObjectToSELECTION_v2.jsx !Version! Fri Jul 27 2012 08:28:36 GMT+0200
                                                  */
                                                  
                                                  app.scriptPreferences.userInteractionLevel = UserInteractionLevels.interactWithAll;
                                                  
                                                  app.doScript(_AddNewMSO, ScriptLanguage.JAVASCRIPT, [], UndoModes.ENTIRE_SCRIPT, "Add New MSO to SELECTION");
                                                  
                                                  function _AddNewMSO(){
                                                  
                                                  try{
                                                  
                                                      var sel=app.selection[0];
                                                      var selGB = sel.geometricBounds;
                                                      var newMSO = app.selection[0].multiStateObjects.add({
                                                          geometricBounds:selGB
                                                          });
                                                      //FillColor of the generic rectangle of each state:
                                                      newMSO.states[0].pageItems[0].fillColor = "Paper";
                                                      newMSO.states[1].pageItems[0].fillColor = "Paper";
                                                  
                                                      alert("Created a new MSO.");
                                                  
                                                      app.select(newMSO);
                                                  
                                                  }catch(e){alert("ERROR"+"\r"+e.message+"\r\r"+"No new MultiStateObject was created.")};
                                                  
                                                  }; //END function "_AddNewMSO()"
                                                  

                                                   

                                                  Uwe

                                                  • 22. Re: How to put an MSO inside another MSO
                                                    minia92 Community Member

                                                    Hi there

                                                     

                                                    Even with the helpfull screenshot I can't get that DPS folder in the SCRIPT window. Is this only on CS6? I have try to select as explain but can't see that

                                                     

                                                    Can you send me the indd file ?

                                                     

                                                    Really need to create a MSO in MSO

                                                     

                                                    Minia

                                                    • 23. Re: How to put an MSO inside another MSO
                                                      HugoKing321 Community Member

                                                      Wow Uwe, that's something to play with ;]

                                                       

                                                      Many thanks for sharing.

                                                      • 24. Re: How to put an MSO inside another MSO
                                                        Laubender CommunityMVP

                                                        @Minia – what do you mean by that? This script is about generating MSOs (MultiStateObjects) inside of other objects like rectangles etc.
                                                        DPS functionality is not scripted by that.

                                                         

                                                        To make the script work, you need:
                                                        1. The script available in your Scripts Panel (copy the whole code as shown in #21 to your text editor and save it as a text-only file with suffix "*,jsx" to the Scripts Panel folder in your InDesign application folder)
                                                        2. A selection of e.g. a rectangle inside a state of an MSO

                                                        3. Double-Click the script from the Scripts Panel while a rectangle is selected (either on a plain page or inside an MSO)

                                                         

                                                        Please, elaborate what's your exact problem (maybe posting the exact steps with screen grabs)…
                                                        But before, reread the steps shown in #14.

                                                         

                                                        And: MultiStateObjects were initially introduced in InDesign CS5.
                                                        I tested the script in InDesign CS5, CS5.5 and CS6.

                                                         

                                                        Uwe

                                                        • 25. Re: How to put an MSO inside another MSO
                                                          minia92 Community Member

                                                          Hi Uwe

                                                           

                                                          thank you so much it is really helpful and it works really well as describe

                                                           

                                                          I just send you a private message

                                                           

                                                          Because what I am aiming is to have a MSO 2 in MSO 1 as you shown but also that MSO 2 has a "Go to state" button that link to MSO 1 (one of its states)

                                                           

                                                          and it seems quite impossible to have a GO TO button that links out of its own MSO, even if it is embedded

                                                           

                                                          Please let me know if it's need more clarification/screenshot

                                                           

                                                          Again, thank U

                                                           

                                                          Minia

                                                          • 26. Re: How to put an MSO inside another MSO
                                                            Laubender CommunityMVP

                                                            @Minia – yes, that's a bit tricky…

                                                             

                                                            Two rules for buttons that control a MSO:

                                                             

                                                            1. A button on a plain page could control all MSOs on that page (even ALL nested ones! Equal of the active states of all visible MSOs!)

                                                            2. A button inside a MSO could  control all states inside that MSO (PLUS: all MSOs nested inside that MSO, equal of their nested depth and state)

                                                             

                                                            Therefore:

                                                            If a button is placed inside your nested MSO it cannot control the MSO that it is nested in.

                                                             

                                                            For navigation purposes you always need a button that is not nested. At least in a state (or even better: all states) of the MSO that holds the nested MSO. The deeper the nesting goes, the more complicated the task to build a working navigation.

                                                             

                                                            Let me (again) point out: this all is highly experimental. Test it out on your iPad and do not trust the Adobe Content Viewer on your Mac too much…


                                                            Also watch the file size of your folio!

                                                             

                                                            Uwe

                                                            • 27. Re: How to put an MSO inside another MSO
                                                              Laubender CommunityMVP

                                                              I think, I have to be more precise:

                                                               

                                                              A button on a plain page can see all MSOs on that page, even the nested ones.

                                                              If it can control the nested MSOs, is a bit unsure. Maybe one level deep.

                                                               

                                                              While experimenting I had problems with the representation of the buttons. Sometimes if a single button is pressed, all buttons at the same level will suddenly show their "click" states and will not go back to "normal" state…

                                                               

                                                              You have to experiment a lot to make it work, what you like to do.
                                                              Maybe it's not possible by using buttons.

                                                              Alternatively you could use optical hints for the users, that they could swipe between the nested MSOs.


                                                              In every case it means, that you cannot use a full screen representation of a nested state. You have to leave out one or more areas where the users could swipe back and forth between the several nested states.

                                                               

                                                              I know, this is ugly complicated, but maybe there is a chance to achieve what you want.

                                                               

                                                              The big alternative would be to use a web overlay for your task.

                                                              But that means you are limited in typography.

                                                               

                                                              Uwe

                                                              • 28. Re: How to put an MSO inside another MSO
                                                                minia92 Community Member

                                                                Thank U Uwe !!!

                                                                 

                                                                I think I don't have other choices than to change my layout..... as the buttons doesn't works as I wanted to (in nested MSOs)

                                                                 

                                                                 

                                                                Again merci !!!

                                                                 

                                                                still awesome for the script !

                                                                 

                                                                Minia

                                                                • 29. Re: How to put an MSO inside another MSO
                                                                  HugoKing321 Community Member

                                                                  I've been testing a few layouts in CS6 and it all works well on iPad3 via usb. I've only been going one mso deep (so far) and it seems relatively easy once you get your head around how the structure builds.

                                                                   

                                                                  I've built some slide shows within layouts. i.e. tap preview to enlarge, swipe to engage with content, tap (area on each state) to close, with the swipe areas completely free to navigate once closed. Makes me wish this could become a solid feature within DPS, maybe it should be on the wishlist?! I would honestly use this more if I knew it was stable. Swipe (for me) feels a far better experience to navigate content than a tap, and having swipe areas no go for article navigation has been an irritation to design around sometimes.

                                                                   

                                                                  Anyhow's i'm going to do more layouts and test a bit more when the new tools are out too.