none
How do I indicate a page is a popup in the SketchFlow Map?

    Question

  • I've shown the users my 2 prototypes and have gotten their feedback.  I'm making changes they've requested and want to show them the prototype again.  In this case they want to have me eliminate a button and have a page only appear as a popup, when certain criteria are met.  Right now I have all of the pages connected to at least one other page using the blue arrows in SketchFlow Map.  So, I guess what I would do is eliminate the blue arrows?  Or is there another way?

     


    Rod
    Tuesday, April 06, 2010 8:02 PM

Answers

  • Do you mean a popup in another screen?  You could convert that screen into a component screen, instantiate it into the desired screen, and use VSM to hide/show it,
    • Marked as answer by Rod at Work Thursday, April 08, 2010 8:57 PM
    Tuesday, April 06, 2010 8:36 PM
  • To convert a navigation screen into a composition screen - Just right click on the screen in the SketchFlow Map and choose the option to make into a component screen.

    To instantiate your newly created composition screen inside of another screen - Just drag the composition screen in the Map and drop it onto the screen where you'd like it to be instantiated.  You can then go into that screen and move it around to place it where you'd like it to be. 

    To use VSM to hide/show it - You'll most likely want it hidden by default, so while on the screen where you've instantiated it, select the copy of the composition screen on the artboard or in the Objects and Timeline panel.  In the properties panel, set opacity to 0%.  Next, open the States panel and create a new state group as well as a new state.  While recording for the newly created state (you should see a red recording bar at the top of the artboard), set the opacity to 100%. 

    You can activate this state using a button, or if it's a SketchFlow project you can also view this "visible" state by selecting the state in the Navigate panel.

    Hope that helps.  Let me know if you have any questions,
    Kelly

    • Marked as answer by Rod at Work Thursday, April 08, 2010 8:57 PM
    Wednesday, April 07, 2010 9:17 PM
  • The navigation connections (blue arrows) pointing to it should go away automatically since you can't navigate to a component.  The navigation connections (blue arrows) pointing from it will remain.  If that screen does in fact allow you to navigate to the other screens still, I'd recommend leaving them as it will give users the opportunity to navigate to those screens at runtime.  If that's no longer the case, simply right click on the arrows and select Remove. 

    You can have any screen be any size.  By default, navigation screens are 640 x 480 and newly created (not converted) component screens are 200 x 200.  You can change this in the SketchFlow Tab of the Options panel so that in the future, all screens will be created the same size.  If you'd just like to change the size of a single screen, that's easy as well.  While viewing the screen, select the top level element in the objects and timeline panel (most likely named <YOUR SCREEN NAME>_Name).  Then, in the properties panel, just change the height and width.  This will scale everything within the screen (hopefully to your liking), but you may have to do some adjustments of course. 

    Hope that helps.  Feel free to send any additional questions. :)
    Kelly

    • Marked as answer by Rod at Work Friday, April 09, 2010 2:48 PM
    Thursday, April 08, 2010 9:58 PM

All replies

  • Do you mean a popup in another screen?  You could convert that screen into a component screen, instantiate it into the desired screen, and use VSM to hide/show it,
    • Marked as answer by Rod at Work Thursday, April 08, 2010 8:57 PM
    Tuesday, April 06, 2010 8:36 PM
  • While I'm a big fan of Chuck's answer as being the best solution, if you truly just want an indication that the screen is unlike the other screens, you could also edit the visual tag associated with the screen.  Right click on the screen and choose any of the colors under Visual Tag.  You can even edit the visual tag properties (colors/names) by going into the SketchFlow Project Settings dialog under the Project menu. 
    Tuesday, April 06, 2010 10:14 PM
  • Do you mean a popup in another screen?  You could convert that screen into a component screen, instantiate it into the desired screen, and use VSM to hide/show it,


    Yes, Chuck, if I'm understanding you correctly, then that is what I mean.  This other screen will be a separate screen, where the user will enter up to 3 different elements in a grid of data.  They may optionally delete a row out of the grid, etc, so I want it to be a separate screen, rather than a simple Windows MessageBox type of screen.

    I seem to remember that Jeremy Osburn (?sp) did something like that in his tutorial, where he simulated an instant messaging screen.  That's not quite what I had in mind, but perhaps its a better solution anyway.  I'll review Jeremy's tutorial on that.


    Rod
    Wednesday, April 07, 2010 7:30 PM
  • To convert a navigation screen into a composition screen - Just right click on the screen in the SketchFlow Map and choose the option to make into a component screen.

    To instantiate your newly created composition screen inside of another screen - Just drag the composition screen in the Map and drop it onto the screen where you'd like it to be instantiated.  You can then go into that screen and move it around to place it where you'd like it to be. 

    To use VSM to hide/show it - You'll most likely want it hidden by default, so while on the screen where you've instantiated it, select the copy of the composition screen on the artboard or in the Objects and Timeline panel.  In the properties panel, set opacity to 0%.  Next, open the States panel and create a new state group as well as a new state.  While recording for the newly created state (you should see a red recording bar at the top of the artboard), set the opacity to 100%. 

    You can activate this state using a button, or if it's a SketchFlow project you can also view this "visible" state by selecting the state in the Navigate panel.

    Hope that helps.  Let me know if you have any questions,
    Kelly

    • Marked as answer by Rod at Work Thursday, April 08, 2010 8:57 PM
    Wednesday, April 07, 2010 9:17 PM
  • Kelly, quick question.  I'm about to change the navigation screen into a component screen, per your recommendation.  Do I get rid of the blue arrows pointing to it and from it, from the other navigation screens?

    And how about the size of the component screen?  I want it to be smaller than the screen it will pop-up over.  At this point all of my screens are the same size, only because I thought it was supposed to be that way.  I know this is going to make me sound like a noob, but can I make the component screen smaller?

     


    Rod
    • Edited by Rod at Work Thursday, April 08, 2010 9:20 PM I forgot something
    Thursday, April 08, 2010 9:13 PM
  • The navigation connections (blue arrows) pointing to it should go away automatically since you can't navigate to a component.  The navigation connections (blue arrows) pointing from it will remain.  If that screen does in fact allow you to navigate to the other screens still, I'd recommend leaving them as it will give users the opportunity to navigate to those screens at runtime.  If that's no longer the case, simply right click on the arrows and select Remove. 

    You can have any screen be any size.  By default, navigation screens are 640 x 480 and newly created (not converted) component screens are 200 x 200.  You can change this in the SketchFlow Tab of the Options panel so that in the future, all screens will be created the same size.  If you'd just like to change the size of a single screen, that's easy as well.  While viewing the screen, select the top level element in the objects and timeline panel (most likely named <YOUR SCREEN NAME>_Name).  Then, in the properties panel, just change the height and width.  This will scale everything within the screen (hopefully to your liking), but you may have to do some adjustments of course. 

    Hope that helps.  Feel free to send any additional questions. :)
    Kelly

    • Marked as answer by Rod at Work Friday, April 09, 2010 2:48 PM
    Thursday, April 08, 2010 9:58 PM
  • OK, I got that working, but I messed it up.  (My bad.)  What I did, initially, was associated the fade in (using Jeremy Osburn's tutorial as an example) of the component and associated it with a combobox.  Frankly, I did that only because that's the way the anciety of days VB6 app does it.  However, I hate that and would rather associate it with a save button, which I then did.  But something is wrong with the animation because now when I click on the combobox, instead of its opening it fades in the component screen.  (The component screen fades in properly when I click on the save button.)

    So, bottom line, how do I disassociate an animation from one control on the screen?

     


    Rod
    Friday, April 09, 2010 8:56 PM