Again, a handy tutorial from our undefeated champ David. Things are really busy here, short of time writing blog posts. Nowadays it's more about nifty messages on Twitter. On the other hand, we rate these posts as the best. It's about simplyfying for our users, and here you get valuable know-how on creating a animated menu in Yooba Studio.

 

Tags: flash creation, yooba studio, animations, web design, flash cms

Just a brief mention and tip on how to work with a loading scene, which sometimes easily can enhance the visual presentation of a project.

On the loading scene you place the objects that you want to be shown while the project is loading. It is desirable for this scene to be displayed to the visitor as quickly as possible. When you save your project a ‘flat’ picture of the loading scene is created, which means that no animations or interactivity can be part of the loading scene.

For more detailed information on how to create a loading scene, please see our video tutorial – ‘Quick Tip #5’ in the help section.

Good luck!

Tags: loading scene, yooba, flash cms, web design

David our graphic maestro, and certainly the World Champ in Yooba Studio has created a tutorial on how to make bouncing effects on assets. This is too good to keep it limited just for certain forums, therefore we like to share with you.

Update: This is what it looks like: Clicky!

Tags: flash tutorial, yooba studio, web design

In this tutorial we will take a look at how to create your own, custom buttons in Yooba Studio.

1. Start by adding a button to the scene. Click on "Add, Objects, Button" in the toolbar:
   
   
   
   
2. The button will appear on the scene, allready selected:
   
   
   
   
3. In the settings panel for the button, click on the "Change Style..." button:
   
    
   
   
4. This will bring up the "Component Styles" dialog. There are many pre-defined styles to choose from, and you can easily change colors, fonts etc.
   For custom buttons, scroll down and select the style called "Custom Skin", as shown in this figure:
   
   
   
   The button will now look like this on the scene:
   
   
   
   
5. Continue by clicking the "Change Skin..." button in the panel:
   
   
   
   
6. This will bring up the "Button Skin Settings" dialog. In this dialog you specify which images to use for the your button. A custom button have three states: UP (normal), OVER (mouse cursor is over the button) and DOWN (mouse button is pressed), and you can specify a different image for each of these states. If you like, you can use the same image for more than one state. Click each "Select..." button to choose an image from the Library to use.
   
   
   
   You can also specify a "Scale Grid" for the button. As shown in the figure above, only the area inside of the green grid will be scaled when the button is resized. This can be very useful when you have a buttons with a border that you don't want to affect by scaling the button. The grid is specified by setting the values for each respective side, left, right, top and bottom.
   You can skip this part for now if you like, it's not neccessary for the button to work.
   
   You can test the button directly in this dialog by simply clicking on it. After you have selected images for each state, click the "Close" button.
   
   
7. The button will now show the image selected for the UP state:
   
   
   
   Test-run the project by clicking "Preview" in the Toolbar and try out your new, custom button out!

 

I hope you enjoyed this tutorial, see you again next time!

Tags: yooba studio, studio, buttons, custom, tutorial, step-by-step

As stated in the previous post, sub scenes is a new feature in Yooba Studio. A sub scene is displayed on top of another scene, and can be very useful when making content that require multiple similar pages. In this tutorial, we will make a simple gallery to get you started with sub scenes. The tutorial is intended for users who are already familiar with Yooba Studio.

1. Open a blank project in Yooba Studio. In the scene manager, select the first scene. Click the 'plus' sign at the bottom of the scene manager and choose 'Sub Scene' from the menu.

2. A sub scene is added to the list of scenes. A regular scene can have multiple sub scenes, so go ahead and add a few more sub scenes to the scene.

3. In 'Scene 1', add some graphical elements that will be used as a background in your gallery. Also, add the two buttons that will be used for navigation.

4. Select the first sub scene, and add an image from the library to the scene. As you'll notice, the underlying regular scene is still shown beneath the sub scene. This makes it easy to put the image in the right position on top of your background. Add an image to each of the remaining sub scenes as well. Tip: A sub scene can have its own transition and in- and out-animations, and it can also contain form objects.

5. To make a sub scene appear, and to navigate between sub scenes, you use actions. There are two types of actions that can be used to reveal sub scenes: Scene Actions and Sub Scene Actions.

On 'Scene 1', select one of the buttons you've added. On the actions panel, choose Sub Scene Actions. In the list below, you can now choose between the avilable actions: You can navigate to the next or previus sub scene, you can hide the current sub scene, or you can choose a specific sub scene to show. Choose 'Show Next' for one of the buttons, and 'Show Previous' for the other.

6. When you navigate to a regular scene, by default no sub scene is shown. Therefore, if you preview your project now, only the background and no image will be displayed.To make the first image show when the project starts, we'll use an action on the scene. Select 'Scene 1', and look on the 'Action Settings' panel. This action is executed when the scene is shown. Choose 'Sub Scene Actions', and select 'Sub Scene 1'.

7. Preview the project. Now the first image will show up, and by clicking on the buttons you can navigate to the other images. Feel free to add animations and transitions as you wish.

 

Keep in mind that this was only a simple demonstration of sub scenes - it can be used for much more advanced projects as well. Good luck!

Tags: tutorial, sub scenes, features