Elasticode helpdesk ( back to site )

How to create "Whats New" template?

We have chosen a few experiences that we wrote a step by step "how-to" to help get you familiarize with our platform.  



Before you begin creating your experiences, you should design an outline of how you want to present the information to your users.  The number of screens depends on how much information you have to update or educate your users. You will create this outline using our screen studio’s platform.

The very first part is to Add a new experience.  Click here for a full step by step on how to create an experience.  The next component will be to edit your screens.  Click on 'Edit' to take you to our studio.



Screen 1:  All the images that we have chosen for this screen we have created.  You should upload your images that best suit your experience.  The first screen has very few elements.  

We will be discussing the elements beginning from the bottom and working our way to the top.  Let's create the first screen.






Uploading Images: Click here for detailed instructions on how to upload an image.



Reordering elements:

If you label all your elements, you will have an easier time making adjustments.  To name the elements, click on 'Reorder' button located on the top right corner of your dashboard.  After you label an element, click on Enter or Return key, so that the name is saved.  You can also rearrange the elements; if you want an element to be in front of another element.  Make sure that once you have labelled all your elements, click the 'Reorder' button again.  To go to the next screen, click on the 'Next screen'  button.  This button is located on the top left corner of your dashboard.











Screen 2: We wanted the second screen to look similar to the first one with the addition of more elements.








Screen 3: The third screen has fairly all the same elements as the second screen.  The difference in the third screen is the wording as well as the length of the new shape.














Screen 4: The fourth screen is a duplicate of the third screen.





Screen 5: On the fifth screen, we used the same image, current balance image.


Note: We left a portion of the image, 'your current balance,' with no element in order for that part to stand out from the rest of the image.  






Screen 6: In the final screen, we decided to have it be similar to the previous one.  








The elements that will be used to set the transitions for all the screens are: 

color overlay • current balance image • new features • updated • we have • changes • cone hate • smallstar.png • bigstar.png • white square • information whats new • thunder transfer • show me • information text • balance ezcheck • information current balance • Here is your current balance • bottom shape • top shape • check mark • easy as that • black overlay


Transitions: When you are satisfied with all your screens, begin to set the transitions, the flow between the screens. You will find these buttons, 'Transition Inbound' and 'Transition Outbound'   , on the top of the screen. By clicking on one of these buttons, you will navigate to our transitions studio's platform. 


Be sure to check out our detailed tutorials about transitions.









 

Lets begin by going over what is happening during this transition.  The background is staying in the same position by switching from the other background image, while the text and the other elements are moving in from the screen.  

Here is how to use the transitions.  Make sure to reorder the elements that all will be under 'Inbound' and the other elements will be in 'Outbound.'  Here is how to transition each element. 


Transitions: Screen 1 and Screen 2

  1. new features (Inbound): Move In: Move In From: Move with screen
  2. updated (Inbound): Move In: Move In From: Move with screen
  3. we have (Inbound): Move In: Move In From: Move with screen
  4. changes (Inbound): Move In: Move In From: Move with screen
  5. cone hat (Inbound): Move In: Move In From: Move with screen
  6. smallstar.png (Inbound): Move In: Move In From: Move with screen
  7. bigstar.png (Inbound): Move In: Move In From: Move with screen
  8. white square (Inbound): Move In: Move In From: Move with screen
  9. color overlay (Inbound): Switch: From Element: color overlay
  10. current balance image (Inbound): Switch: From Element: current balance image
  11. color overlay (Outbound): Switch: To Element: color overlay
  12. current balance image (Outbound): Switch: To Element: current balance image


Note: When you are using transition 'Switch,' make sure to begin in the 'Outbound' and choose which element you want to switch to in the 'Inbound.'










Lets begin by going over what is happening during this transition.  The background is staying in the same position by switching from the other background image, while the text and the other elements are fading in/out and switching.  

Here is how to use the transitions.  Make sure to reorder the elements that all will be under 'Inbound' and the other elements will be in 'Outbound.'  Here is how to transition each element. 


Transitions: Screen 2 and Screen 3 

  1. information whats new (Inbound): Fade In/Move in from position: Stays in position
  2. thunder transfer (Inbound): Fade In/Move in from position: Stays in position
  3. show me (Inbound): Fade In/Move in from position: Bottom
  4. smallstar.png (Inbound): Switch: From Element: smallstar.png
  5. bigstar.png (Inbound): Switch: From Element: bigstar.png
  6. white overlay (Inbound): Switch: From Element: white square
  7. color overlay (Inbound): Switch: From Element: color overlay
  8. current balance image (Inbound): Switch: From Element: current balance image
  9. new features (Outbound): Fade Out/Move out in Direction: Stays in position
  10. updated (Outbound): Fade Out/Move out in Direction: Stays in position
  11. we have (Outbound): Fade Out/Move out in Direction: Stays in position
  12. changes (Outbound): Fade Out/Move out in Direction: Stays in position
  13. cone hat (Outbound): Fade Out/Move out in Direction: Stays in position
  14. smallstar.png (Outbound): Switch: To Element: smallstar.png
  15. bigstar.png (Outbound): Switch: To Element: bigstar.png
  16. white square (Outbound): Switch: To Element: white square
  17. color overlay (Outbound): Switch: To Element: color overlay
  18. current balance image (Outbound): Switch: To Element: current balance image









Lets begin by going over what is happening during this transition.  The background is staying in the same position by switching from the other background image, while the text and the other elements are fading in/out and switching.  

Here is how to use the transitions.  Make sure to reorder the elements that all will be under 'Inbound' and the other elements will be in 'Outbound.'  Here is how to transition each element. 


Transitions: Screen 3 and Screen 4 

  1. information text (Inbound): Fade In/Move in from position: Stays in position
  2. balance ezcheck (Inbound): Fade In/Move in from position: Stays in position
  3. show me (Inbound): Switch: From Element: show me
  4. smallstar.png (Inbound): Switch: From Element: smallstar.png
  5. bigstar.png (Inbound): Switch: From Element: bigstar.png
  6. white overlay (Inbound): Switch: From Element: white square
  7. color overlay (Inbound): Switch: From Element: color overlay
  8. current balance image (Inbound): Switch: From Element: current balance image
  9. information whats new (Outbound): Fade Out/Move out in Direction: Stays in position
  10. thunder transfer (Outbound): Fade Out/Move out in Direction: Stays in position
  11. show me (Outbound): Switch: To Element: show me
  12. smallstar.png (Outbound): Switch: To Element: smallstar.png
  13. bigstar.png (Outbound): Switch: To Element: bigstar.png
  14. white overlay (Outbound): Switch: To Element: white square
  15. color overlay (Outbound): Switch: To Element: color overlay
  16. current balance image (Outbound): Switch: To Element: current balance image










Lets begin by going over what is happening during this transition.  The background is staying in the same position by switching from the other background image, while the other elements are moving in and out with the screen.  

Here is how to use the transitions.  Make sure to reorder the elements that all will be under 'Inbound' and the other elements will be in 'Outbound.'  Here is how to transition each element. 


Transitions: Screen 4 and Screen 5 

  1. information current balance (Inbound): Move In: Move In From: Move with screen
  2. Here is your current balance (Inbound): Move In: Move In From: Move with screen
  3. bottom shape (Inbound): Move In: Move In From: Right
  4. top shape (Inbound): Move In: Move In From: Right 
  5. current balance image (Inbound): Switch: From Element: current balance image
  6. information text (Outbound): Move Out: Move Out To: Move with screen
  7. balance ezcheck (Outbound): Move Out: Move Out To: Move with screen
  8. show me (Outbound): Move Out: Move Out To: Move with screen
  9. smallstar.png (Outbound): Move Out: Move Out To: Move with screen
  10. bigstar.png (Outbound): Move Out: Move Out To: Move with screen
  11. white overlay (Outbound): Move Out: Move Out To: Move with screen
  12. color overlay (Outbound): Switch: Fade Out/Move out in Direction: Stays in position
  13. current balance image (Outbound): Switch: To Element: current balance image










Lets begin by going over what is happening during this transition.  The background is staying in the same position by switching from the other background image, while the other elements are moving in/out with the screen and moving out from the bottom of the screen.  

Here is how to use the transitions.  Make sure to reorder the elements that all will be under 'Inbound' and the other elements will be in 'Outbound.'  Here is how to transition each element. 


Transitions: Screen 5 and Screen 6 

  1. check mark (Inbound): Move In: Move In From: Move with screen
  2. easy as that (Inbound): Move In: Move In From: Move with screen
  3. black overlay (Inbound): Switch: From Element: top shape
  4. current balance image (Inbound): Switch: From Element: current balance image
  5. information current balance (Outbound): Move Out: Move Out To: Bottom
  6. Here is your current balance (Outbound): Move Out: Move Out To: Move with screen
  7. bottom shape (Outbound): Move Out: Move Out To: Bottom
  8. top shape (Outbound): Switch: To Element: black overlay
  9. current balance image (Outbound): Switch: To Element: current balance image




Note: Besides the transitions between screens, you have to set the 'Screen #1 Inbound' and 'Screen #X Outbound' (X=last screen), in our case 'Screen #6 Outbound'. In most cases, you just want to make sure that the main background elements, will be set as 'Move In' & 'Stays in position' | 'Move Out' & 'Stays in position' accordingly, but in this specific case we set these as 'Move In' & 'Move with screen' | 'Move Out' & 'Move with screen'.  When you are in 'Transition Inbound' from screen two, you will see both screen 1 and screen 2.  Here is where you will choose the flow from one screen to the next.  Every element is labeled for you as either inbound or outbound.