Home‎ > ‎

Cards, Cards and More Cards

Cards, Cards and More Cards - adding more screens (levels, cards)
We started out with a mainstack. Remember, LiveCode uses the idea of a stack of cards where each card is a different screen. Each card can be a new page in your book, a new level in your game or a new screen for your program. It can be many things.

To create a new card, do one of the following:
  • On the LiveCode Editbar, click "Object" then click on "New Card"
  • Right-click on the card, select "New Card" 
Name the card:
On the LiveCode Menubar, click on "Object" , then click on "Card Inspector"
        give the card a name like "Main"
Right click on the card and select "Card Inspector"
       give the card a name like "Main"

1. Start with a new 'Mainstack"
2. Name the card: Do one of the following:
    A. On the LiveCode Menubar, click on "Object" , then click on "Card Inspector"
        give the card a name like "Main" 

    or

    B. Right click on the card and select "Card Inspector"
       give the card a name like "Main" 

    Add a button with the following code on it

on mouseUp
   go to card "level2" 
end mouseUp


3. Add a new card:

    On the LiveCode Menubar, click "Object" then click on "New Card"
    Name it "level2" (see step 2 above)
    while you are in the Property Inspector, go to "Colors and Patterns" and make it a color so that we can tell it from the first card

 Add a button with the following code on it

on mouseUp
   go to card "main" 
end mouseUp

You should now be able to go back and forth between the cards

 
Alternate Way to move between cards:

    You can also refer to the cards as "next" and "prev" or "previous"

    Change the buttons to read::

on mouseUp
   go to next   
end mouseUp


    Aton to:

on mouseUp
   go to prev   
end mouseUp

 to go to the previous card (with visual effects)


Another way is to name the cards and use the names in the go to's. If you name the cards "home" and "card 2", you could do it this way:

    On the first card ("Home")  you would put the code:

on mouseUp
   visual  effect wipe up
   go to card "card 2"   
end mouseUp

 to go to the next card  which you named "card 2" (with visual effects)


      On that card, to go back to the "home" card, the code would be

on mouseUp
   visual  effect wipe up
   go to card "Home"   
end mouseUp

 to go back to the "Home" card

  How-To:

    To add a new card: 
        On the top menubar, click on "Object", "Add new card"

    To switch between cards:
        Open the "Project Browser"  - on the menubar: click on "Tools", "Project Browser"
        Expand your project by clicking on the little triangles
        Click on either card to go to it.


   Visual Effects:

  These are some of the effects you can use:
• plain
• checkerboard - Desktop / Web
• venetian blinds - Desktop / Web
• iris close | iris open - Desktop / Web
• zoom close | zoom in | zoom open | zoom out - Desktop / Web
• wipe up | wipe down | wipe right | wipe left - Desktop / Web
• dissolve
• push up | push down | push right | push left
• reveal up | reveal down | reveal right | reveal left - Desktop / Web / iOS / Android
• shrink to bottom | shrink to center | shrink to top - Desktop / Web
• stretch from bottom | stretch from center | stretch from top - Desktop / Web
• scroll up | scroll left | scroll down | scroll right - iOS / Android
• curl up | curl down - iOS
• flip left | flip right - iOS. The background behind the flip is taken from the background color of the current stack - i.e. the card is cut out and flipped over the stack.
  
    Click on the Dictionary icon, do a search on "visual" and see all the other neat stuff you can do...

note: If you are going to put this on a Android phone, you need to add code so it will auto-size to the size of the phone's screen.

Add the following code to the "Stack" script:

on preOpenStack 
   if the environment is "mobile" then 
      set the fullscreenmode of me to "exactFit" 
   end if 
end preOpenStack

That is it. Generate the executable for the platform you want (PC/Mac/Linux/Android) and email it to your mother

Graphics, Photos - 
    - Free Photos
Comments