on the topic of animations part 2
Note: This tutorial is for advanced users. Proceed with caution
This tutorial is going to dabble into the world of shiny things. Again, this trick was completely inspired by the lovely mannequinskin, but I'm writing a tutorial on it. SO MAKE ME PROUD.
For the sake of being lazy using a good example, I'm going to use the same icon from the last tutorial. Again, you will need AS3 for this, so if you don't have it, go grab yourself a trial copy!
Aaaaaaaaand start!
Step One: Making the icon
Please, for the love of god people, do not just crop an icon and call it a day. A base with text does not make a good icon, as a base with an animation does not. Spend some time on it, make it pretty. Make it look good WITHOUT having any animations, so that the effect does what it's supposed to - adds flair.
So here I have my pretty Kikyou icon. It's not the greatest icon I've ever made, but it's pretty, and the shiny effect should add to it quite nicely. It's serve its purpose already, as an icon that looks decent even when it's just sitting there. ....Now that I'm done trying to drill that into your head, I'll proceed.
Please please save a copy of your base as is. You will need it.
Step two: Adding the shiny!
When you've got the icon exactly how you like it, go zoom in so you can have a good look at it. I like it at about 600% because I have a big resolution. When you've got it nice and big, go grab your dodge tool. If you don't know how, this image will help;
Then, in order to gain the proper effect, go up to the menu bar and set the range to Highlights. This will help it get a nice contrasty shine.
Set the exposure to something like 30%, and change the brush size to something rather small, like 3 or 5.
Slowly go over an area you'd like to have illuminate for that frame. Remember to only do a small piece at a time.
When you're done, save the frame as something like Illuminate0001 and the continue repeating this step, gradually working your way down.
Step three: The animation
Once you're done making the frames, go back to AS3, and go to File; New. A window will come up. Set as 100 x 100, and it doesn't matter which canvas type you pick. A blank icon will come up, with the canvas frame you picked selected. DELETE IT. If you don't, it will mess with your animation.
When you've deleted the frame, it should be totally blank Go up to the menu bar, and go to Animation; Insert frames; From File.A pop up will appear with a blank list. Click on the Add File... button, and the file browser will appear. You can select all your frames at once, but you must select backwards, or your animation will run backwards. It other words, since there are 15 frames, select 15 first, hold down your CTRL button, and then select the first one. They will all be selected, and all in their proper order. Click okay to go back to the frame adder window, and click okay when you're done
Then, go grab the original, un-shinied copy of your icon. Put it in front of all your other frames.
If you want to see what your animation looks like, go to the menu bar and click View; Animation. If it's too fast/too slow, you'll have to change the frame rate. Go to Edit; Select all, and then right click in the selected area and choose Frame Properties. A prompt will appear with the Display time variables. For this particular icon, I would suggest setting the shiny part to something somewhat fast. 5 sounds about right.
Then, click on your first frame (the un-shinied one), then right-click on it, and change the frame rate to 100. Only change the frame rate for this ONE frame. It separates the rest of the frames with a nice pause ^^
And then you're done! If your icon is too large, read the bottom of this article.
This tutorial is going to dabble into the world of shiny things. Again, this trick was completely inspired by the lovely mannequinskin, but I'm writing a tutorial on it. SO MAKE ME PROUD.
For the sake of being lazy using a good example, I'm going to use the same icon from the last tutorial. Again, you will need AS3 for this, so if you don't have it, go grab yourself a trial copy!
Aaaaaaaaand start!
Step One: Making the icon
Please, for the love of god people, do not just crop an icon and call it a day. A base with text does not make a good icon, as a base with an animation does not. Spend some time on it, make it pretty. Make it look good WITHOUT having any animations, so that the effect does what it's supposed to - adds flair.
So here I have my pretty Kikyou icon. It's not the greatest icon I've ever made, but it's pretty, and the shiny effect should add to it quite nicely. It's serve its purpose already, as an icon that looks decent even when it's just sitting there. ....Now that I'm done trying to drill that into your head, I'll proceed.
Please please save a copy of your base as is. You will need it.
Step two: Adding the shiny!
When you've got the icon exactly how you like it, go zoom in so you can have a good look at it. I like it at about 600% because I have a big resolution. When you've got it nice and big, go grab your dodge tool. If you don't know how, this image will help;
Then, in order to gain the proper effect, go up to the menu bar and set the range to Highlights. This will help it get a nice contrasty shine.
Set the exposure to something like 30%, and change the brush size to something rather small, like 3 or 5.
Slowly go over an area you'd like to have illuminate for that frame. Remember to only do a small piece at a time.
When you're done, save the frame as something like Illuminate0001 and the continue repeating this step, gradually working your way down.
Step three: The animation
Once you're done making the frames, go back to AS3, and go to File; New. A window will come up. Set as 100 x 100, and it doesn't matter which canvas type you pick. A blank icon will come up, with the canvas frame you picked selected. DELETE IT. If you don't, it will mess with your animation.
When you've deleted the frame, it should be totally blank Go up to the menu bar, and go to Animation; Insert frames; From File.A pop up will appear with a blank list. Click on the Add File... button, and the file browser will appear. You can select all your frames at once, but you must select backwards, or your animation will run backwards. It other words, since there are 15 frames, select 15 first, hold down your CTRL button, and then select the first one. They will all be selected, and all in their proper order. Click okay to go back to the frame adder window, and click okay when you're done
Then, go grab the original, un-shinied copy of your icon. Put it in front of all your other frames.
If you want to see what your animation looks like, go to the menu bar and click View; Animation. If it's too fast/too slow, you'll have to change the frame rate. Go to Edit; Select all, and then right click in the selected area and choose Frame Properties. A prompt will appear with the Display time variables. For this particular icon, I would suggest setting the shiny part to something somewhat fast. 5 sounds about right.
Then, click on your first frame (the un-shinied one), then right-click on it, and change the frame rate to 100. Only change the frame rate for this ONE frame. It separates the rest of the frames with a nice pause ^^
And then you're done! If your icon is too large, read the bottom of this article.