 Door Swing Animation in Composer
I was asked by a few people to reveal my magic trick that is my Door animation on a bunch of my requested themes, so without further adu(?).
First, start with the basics. Open Composer, go to file, then New. When the dialog box opens, select 8350i(320x240) with transparent background. Your stage opens.
There is only 1 important thing that you will need to import, everything else can be done inside Composer. You will need to find a pic that you would like to use as the doors. I find it best to use a basic pic, just a logo that is on top of a darker background. Use whatever Image Editing program that suits you best, and open the pic. If it is not already, resize the image to 320 x 240 then save the image as a .png file.
We will be doing work on the file, but it is best to have that full image in case something gets messed up with the modified versions.
ok...
1. using marquee or cropping tool, select the left half of the image. The dimensions will be 160x240 for this image. It is exactly half.
2. Do crop document. once it is done, save this file as WHATEVER_left_door.png (whatever generally being the name of your theme).
3. now do the same for the right door.
Now we will be back into Composer. I will do all the animations first, then go back through and tell you how to setup the TimeLine Actions.
1. in the top left of the screen, you will see Layer_1. Right above that there is what looks like a white page. Click this twice to open up 2 more layers. Right click the mouse, and rename each layer. 1 will be Doors, 1 will be Enter_Skip_Resume, and the last will be Icons. We will come back to this. Make sure that The Doors layer is highlighted for this section.
2. Go File, then import and import the left image and line it up on the left half of the stage. Then do the same to the right half (on the right of course)
Now for some animations:
Click on the left door, in the bottom, you, will see the pre-determined name for that image highlighted. make sure that the purple box is currently on the first frame.
NOTE - I would suggest that after every item you create, Go into the Top right where it says Objects, and rename the item to something appropriate. Such as - for Animations - do Left_Door_Animation. ETC..
3. Click on frame 15, right click in the box corresponding to the left door image and click on ADD KEY.
4. Next, click and hold on the right middle transformation box that hightlights the image on the stage and drag it all the way to the left, so that it seems like the image disappears.
5. Then, click into frame 16 on the bottom, right click on the box corresponding to the left image and click ADD KEY.
6. Click on Frame 30, then right click on the corresponding box and click ADD KEY.
7. Now, take the same right edge that you dragged before, and put it back into the original position half way across the screen, lining it up next to the right image.
(if the image appears to be backwards, just move the side transform cursors around to right the image)
8. After this is done, right click on the image, and then click on CONVERT TO ANIMATION.
9. Double click on the door, this will take you into the Animation Editor. In the bottom right, just above the Time Line, there is a check box that says Real Time. Check that and in the box next to it, make sure it says 4.
This is the speed at which the animation plays. After words, click on the Scene button at the top and do the same thing on the Time line for the main stage.
At this point, the animation is done for the Left door. Go back and do steps 3-9 for the right door.
The doors are now done.
Onto the really tricky parts
We are going to add icons, make sure to click on the Icons Layer before proceeding.
To add a theme button to the Home Page, just click on the icon that looks like a finger clicking a button. We will add 3 in this exercise, then with that knowledge, you can add as many as you want.
1. At the top, now click on the Icons layer, then click on the Theme button and click on the stage. Repeat this for three icons
**note** to make it easier to see, next to the Doors layer, there is a pair of eyes. If you click on this, the doors layer disappears, making it easier to see the rest of the stage.
2. If you cannot see the icons all that well, it's OK. click each icon individually, then to the right side of the screen and options box opens up. In this box, you can select what you want the Theme button to be associated with. If you click on Use Device Application Order button, you will see the icon, and it will be set for you in Theme builder.
3. Place the Icons where you would like them to be visible at when the doors open up.
4. If you background image in Theme Builder for the Home Page is light in color, we will have to make a background for the icons. Select the Rectangle tool (just looks like a rectangle to the left).
5. Below that, you will see 2 colors, the top color is for the border of your rectangle, the one below it is for the color that will go inside the rectangle. Select your colors now.
6. Then draw the rectangle around your icons.
At this point, it looks like the Rectangle blocks the icons, it is ok, we will remedy that now.
7. Click on the transformation arrow in the top left, then right click on your rectangle, go to Order, then Send to Back. This will put the Rectangle behind the icons.
8. Right click on the rectangle and click on Convert to Animation.
9. Then double click on the rectangle. This opens up the Animation Editor.
10. click on the Rectangle, on the right in the Inspector, there is a tab that looks like a square with circles in the corner, click that. There is an option for Opacity. This is basically Transparent properties. The lower the number the more transparent, pick a setting for your liking.
11. At the top, click on a button that says Scene. This will take you back to the main page.
Remember to Save OFTEN throughout this. I have had a few instances that Composer has shut down on me for no reason at all, and I had lost about 30 minutes of work.
We are now done with the Icons layer. Lastly is the Enter_Skip_Resume layer. This is the one that requires a TON of attention to detail.
1. To create the buttons, I just use the text setting. Click on the "A" button at the left (not the one with the wavey line). In the Inspector on the right, you can change Border Colors, Font, Inside Colors, Size, etc.. Do this to your liking then click on the stage and type ENTER.
2. right click the text and click on Convert to BUTTON. This turns the text into a button.
3. Now Double click on the button and you are taken into the Button Edit screen. At the bottom, you will see 4 seperate sections in the Timeline. These are: Normal, Focus In, Focus Out and Activate. you can change the different Opacity(transpaency) settings and more for each "state" so that the button is faded until it is highlighted, then it is BOLD.
4. When done editing, again click on the Scene button at the top.
Repeat Steps 1-4 with the Skip and Resume Buttons and place them wherever it suits you best on the stage.
And the Actions...
Frame 1:
1. Click on Frame 1 in the Time Line at the bottom, If the Time Line Actions box did not pop up, click on the small yellow clock just to the left of the time line.
In this you will add many action that will play out as soon as the application starts.There are many buttons in the middle of the box, you will really only use the first 4, they are: Play Animation, Stop Animation, Show, and Hide.
2. Click on the Play Animation button, in the drop down box at the bottom, click the XXX_left_door_animation, in the bottom left, click the Start check box and in the 2 boxes next to it, make sure that they both say 1. Do the same thing for the Right door animation.
3. click the Hide Button and in the drop down box, go to your first theme button and click it. Repeat this Step for all the Theme buttons, the Resume button, and the rectangle animation.
4. Click on the Show Button and in the drop down box, click on the Left_door_animation. Repeat this step for the Right Door, Enter, and Skip buttons.
After this is done, you can click OK and close the Box. Now we are on to setting actions for the buttons. I will start with the Resume button. Right now, make sure you have the Enter_Skip_Resume layer highlighted. You can only play around with the items in a layer that is currently active (highlighted).
1. Click on the resume button. On the right you will see 3 option: Activate, Focus In, Focus Out. Click on Activate.
2. Click the Hide Button, In the Drop Down box select the first Theme button. Repeat this step for each Theme button and the rectangle animation and Resume button.
3. Then, Click the Show button, and in the Drop down box, select the Left Door, do this again and select the right door.
4. next, click the Play button, in the drop down box select the Left door and in the bottom left, click on the Start check box and the 2 boxes beside it should read 16 and 30. Do the same thing for the Right Door.
This is telling the program that when the Resume button is pressed, everything disapears and it plays the second part (closing) of the animations.
5. Lastly, click on the Show button, in the drop down, select Enter, then at the top, click on activate and in the box to the right put 4. This allows a 4 second delay before the button will show up. Do the same thing for the Skip button.
Resume is Done, now onto Skip. This one also is not that bad.
Skip:
1. Click on the Skip button, and in the right, click on Activate.
2, Click on Hide button, and in the drop down, select the left door animation. Do the same thing for the right door, Enter and Skip buttons.
3. Click on the Show button, in the drop down, click on the first Theme button. Repeat this for each theme button and the Rectangle animation.
4. Click on the Show Button, in the drop down, select the Resume button and at the top click on activate. In the box next to it type 3.
This will delay the resume button from showing up for 3 seconds.
Finally, The Enter Button:
1. Click on the Enter Button, and on the right, click Activate.
2. click on the Play button, and in the drop down, click on the Left door, click on the Start check box and in the boxes they should read, 1 and 15.
3. click on Hide button, and in the drop down, select Enter. Repeat for the Skip button.
4. click on the Show button, in the drop down, select the first Theme button, then at the top, select Activate and in the box next to it, type in 4. Repeat this for all: Theme buttons and the rectangle background.
5. click on the Play button, in the drop down, select the Left Door, and click the Start check box. In the boxes next to it, it should read, 16 and 30, then click on Activate at the top and in the box next to it, type 15. Repeat this for the Right Door.
6. Click on Hide Button, in the drop down, select the First Theme button, then click on Activate and in the box next to it type 15. Repeat this for all Theme buttons and rectangle animation.
7. Click on Show button, in the drop down, select Enter button, then click on Activate and in the box next to it, type 20. Repeat this for the Skip button.
Remember to save often. You are now ready to export. Go to file, the export, and finally SVG. Don't change any options, just select where to save the file and what name and hit OK.
After it is done, go into Theme Builder, on the Home Screen Tab, there is a box that says SVG File. On the right, click the folder and search to where you saved the file. Click on the file and Click OK. It is now loading the animations and everything into Theme Builder. It will pop up an "error" stating that Frames are too close together and may not function properly. Just click OK. I have not had an issue with one not working yet.
Once it loads, you need to mess with the Navigation settings. You can do almost anything with them, but I would lay out a suggestion. Go:
Enter --- Theme button 1
Skip ---- Theme button 1
Resume
Then do Down from each Theme button to the Resume button. If there is not a way to get to the Resume button or Enter button, you will get stuck in some of the screens for the animations.
Well, it has been a long journey, it actually took me twice as long to do this than to just make the animation. I may have holes in this Tutorial, this is the first time making a tutorial, and unfortunately, it was a very intricate and difficult one to do. If you have issues with it, just let me know, and I will help out as best I can.
I know that this has been a little boring for some, no pictures and all, but to convey everything that I would need to in the pictures, This would have been much longer that it is.
  |
Thread Author
#
Linear Mode
