Author: randloona
Software: Photoshop & Swish
In this tutorial, you'll learn a few tricks that may help your design by giving it a 3D feel and also a digital look.
Creating desing layouts, animations in Flash or Swish may be easy but if you combine them, the results will be great!
I'm going to show you what you can do if you combine two great design programs like Photoshop and SwishMax.
The only thing you'll need actually in Photoshop is a metal texture.
Again, you'll learn how to simulate 3D rotation in Swish by applying a gradient over a dynamic texture, how to give
certain content areas a digital look by using "scanlines", also known as (interlanced graphics) and how to work with
lights that actually are liniar or radial gradient shapes with transparent edges, in Swish.
I. Creating the button texture.
If you cannot use Adobe Photoshop, just look for a metal texture on the internet and you may skip this part.
We'll create now the texture that will be used for the animated button.
1. Open Adobe Photoshop (7.0 preferable)
2. Start a new blank image by clicking "New" in the upper left (File Menu).
- Set image's Width to 148 pixels
- Set image's Height to 255 pixels
3. Select "New Fill Layer" from the "Layer" menu and pick "Solid Color..." (option). Once you've done this, Photoshop
will ask for a color. Pick any color and click OK. You may now apply effects to this layer as the "Layer Style" option will
become available in the "Layer" menu. Then, click on "Blending Options" as shown above:
A panel will be open and you may now pick the effects to use on the layer.
4. From the "Layer Style" (Blending Options) panel, select "Color Overlay". Then, set "Blend Mode" to "Normal",
use a 45% opacity and color to dark orange, as shown below:
5. Two options below in the same "Layer Style" panel, is the "Pattern Overlay" option. Click on it and look for a
metal texture. I'll use "Stucco 2" that can be located in the "Texture Fill 2" pattern collection. Also set "Blend Mode"
to "Normal", use a 50% opacity and 100% texture scale (the size is 100% by default anyway but it's good to know):
You're done! There is no further need for Photoshop in this tutorial. If you did exactly the way I showed you until now, the
final layer will look like this:
All you have to do now, is save the image in .gif or .png format since the size counts on the internet. Images in
.gif format can have like 256 colors at most, in .jpg, their quality is altered even if saving using "high quality" jpeg
file, so I find .png the best choice since it's actually the same as .bmp and it does not alter image's quality.
Click on "Save As" in the the "File" menu (upper left). Then, you will be asked to select a "Format". Use ".PNG", ".GIF" ,
or ".JPG". If you save as .PNG, you will be asked to specify a method "None" or "Interlanced". Use "None". For further
refference please save it under the name "TEXTURE" because it will be easier for you to understand later when I'll
reffer to it from Swish.
II. Creating the full button graphics.
1. You'll need to open Swish now (SwishMAX preferable).
2. Start a blank movie.
- Set movie's dimensions to 148 (width) and 255 (height) just like the texture created in Photoshop.
- Set movie "Background Color" to black.
3. OK, now we'll insert the "TEXTURE" created before and give it also the same name. Because the image has the
same dimensions (148x255), it will be easy to align so that it covers the whole movie:
4. Create a solid shape (rectangle, W=122, H=28) and place it over the texture at the bottom of the movie
(X=74, Y=231). Use "black" as color. Then, group the "TEXTURE" and the rectangle both, as a shape as shown below:
5. Now, the next things we have to do are: a liniar gradient (reflected), a "scanlines" shape and another gradient (radial this time). Create a shape with the same width as the "TEXTURE", give it a horizontal liniar gradient and place it at the middle.
Having the same width, it will align with the "TEXTURE" in horizontal. The gradient must be black, 100% transparent
in the middle and 0% to its margins.
Why did I create this gradient? It's very simple. 3D rotation is not possible in Swish but there are plenty of ways to
simulate it. For example, this gradient is placed OVER a texture that will move (later in this tutorial). Because of that
and mostly because the gradient does not move but applies to every frame of the moving texture, it will make you
think that it's actually a cilinder moving.
We need a "light" gradient now. Simply create a shape (rectangle) and add a radial gradient similar to a flare.
That means the gradient has to be brighter in the middle and darker (transparent) to its margins, like this one:
Once you've done that, give this shape a name and make it also a target because we'll need it for identification later
in script, for button movement. I'll name it "B1LIGHT". (Why B1? Because it may be possible to create more than one
button and have a menu so this one will be BUTTON1).
As I said before, when I started this tutorial, sometime the so called "SCANLINES" can give your animation a digital
look. We'll create a shape like that. There are actually many ways to create scanlines, for example ACDSee has a
predefined plugin that allows you to add scanlines to an image but I'll just use Windows Standard PaintBrush.
If you don't have it in your Star Menu, just go to Start, Run, type "mspaint" and press "OK" or hit Enter. Now, go to
Image, Attributes (or press CTRL + E), set image width to 120 pixels and height to 25. We intend to manually create
a "scanline" image with the same size of the shape we grouped earlier with the texture. Creating this is easy:
- Use the "Magnifier" and pick 6x zoom option.
- Use the "Line" Tool and draw black horizontal lines separated by an empty line.
Do not get confused, it's really not that hard. Just fill the empty image with black lines (a black line then a space/white
line and so on). Finally, the shape will look like this:
Now, save this image also in a compressed format (I suggest PNG too), import it in your Swish movie and place it OVER
the "TEXTURE", UNDER the light and middle gradient, in the same position where we grouped the earlier black shape.
Yet, this image cannot considered a scanline shape until you make the white lines transparent, so click "Properties" in
the "Shape" menu (right) and, in the "Image Properties" panel, select "Transparent color" (down, right) and pick white:
As you can see, the scanlines look pretty nice there and the "hard" design part is done except for the button's text.
I'll use "Earth" as the font for this button. You can download this font from www.dafont.com or www.fontfreak.com.
Also keep in mind that the order, until now, must be: 1. GRADIENT (the black, transparent in middle one), 2. SCANLINES
(what we just did now), 3. Light Gradient (B1LIGHT) and the "TEXTURE" as shown below:
For the font effect (sprite), we'll need another "light" gradient but a bit smaller this time.
Set this shape over the main black gradient (in the middle of the "TEXTURE"), insert some text using any font you
want but I suggest "Earth", (10, orange with 20% transparency) and group these two objects in a sprite.
Name it "B1TEXT" (sprites can be reffered in script and are always "targets"). And the final graphics should look like:
Did you get tired of drawing shapes here? Don't worry, this will be the last one. Create a small shape 1 by 1 pixels.
Why these dimensions? We'll need an "invisible" shape that will be dragged to the mouse pointer and this way,
the script will know using "IsNearTarget" if the mouse pointer is next to a shape or not. Sure, I could get the
mouse coordinates alone without the need of a shape but seems that it won't work in Swish's player that way,
only if you export it as .swf or test it in your browser. But since we need full functionability, I'll just use a shape
like that. We don't want the user to see this shape so we'll just set a color and give it 100% transparency (0%
oppacity). Warning! Do not set the shape's "Fill" to "None" but to "Solid" because Swish will consider it NULL and
the script won't be able to identify it.
III. Creating the animation.
The whole button movement must be scripted except for the text effects. This way, it will look very realistic.
The scripting part for this may not be easy for some of you but I'll try to explain it as good as I can.
We'll use is "OnEnterFrame" as the main script event but before we do that, let me show you what kind of
movement we need to create.
We'll move the "TEXTURE" up if the "FOLLOWER" (mouse pointer actually) is on the main black gradient (selected)
and also increase the size and oppacity of the "light" gradients positioned at the bottom of the "TEXTURE".
We'll do exactly the opposite if the "FOLLOWER" is NOT on the main black gradient (the one selected above).
Anyway, we'll also set a few conditions to move the "TEXTURE" to a limit (up and down) if the "FOLLOWER" is not
on that gradient. OK, now let's get to work (script) but first, drag the movie margins to match the middle
black gradient because everything that moves out of the gradient should not be seen.
Make sure that all objects except for the text and the "FLASH" gradient included in the "B1TEXT" sprite, have a
name and are marked as "Target".
Open the script window, switch it to "Expert" Mode and let's go!
The first event we'll use is "OnLoad".
onLoad () {
_root.B1TEXT._alpha = 0;
_root.B1LIGHT._alpha = 50;
_root.B1SCANLINE._alpha = 80;
FOLLOWER.startDragLocked();
}
When the movie (button) loads, we really don't need full oppacity for the LIGHT gradient or the SCANLINES and,
of course, we need the "B1TEXT" sprite completely invisible so we'll set its alpha (oppacity) level to 0%, 50%
for the LIGHT gradient and 80% for the SCANLINES.
Also, we need to keep the 1x1 invisible shape always on the mouse pointer so we'll use the "startDragLocked"
function in Swish applied over target "FOLLOWER" (the invisible 1x1 shape). Now, the script can tell if this shape
is over the black middle gradient because it will always follow my mouse pointer and will have the same
coordinates.
onEnterFrame(includingFirstFrame) {
if (FOLLOWER.isNearTarget(GRADIENT._target)) {
if ((_root.TEXTURE._Y - 4) > -80) {
_root.TEXTURE._Y -= 4;
_root.B1SCANLINE._Y -= 4;
_root.B1LIGHT._Y -= 4;
} else {
_root.B1TEXT._alpha = 100;
}
} else if ((_root.TEXTURE._Y - 4) < 20) {
_root.TEXTURE._Y += 4;
_root.B1SCANLINE._Y += 4;
_root.B1LIGHT._Y += 4;
_root.B1TEXT._alpha = 0;
}
}
We're going to use now "OnEnterFrame" including the first frame because we need to validate every frame for
this animation and check if the mouse pointer ("FOLLOWER" shape) is on the button (near the main gradient).
The most important thing (condition) in the above script is to check if the target "FOLLOWER" is near target
"GRADIENT" "if (FOLLOWER.isNearTarget(GRADIENT._target)) {". If it does, we proceed to the next condition:
"if ((_root.TEXTURE._Y - 4) > -80) {" means that if the button "TEXTURE"'s vertical limit ("Y" coordonate) is lower
than -80, then the "TEXTURE", the SCANLINES and the main LIGHT gradient "B1LIGHT", will move UP by 4 pixels
" _root.TEXTURE._Y -= 4;", "_root.TEXTURE._Y -= 4;" and "_root.B1LIGHT._Y -= 4;".
If the button "TEXTURE"'s vertical limit ("Y" coordonate) is higher or equal to -80, "} else {", it means that the
button movement is finished, the "TEXTURE" has reached -80 "Y" coordonate and that we can now show the
button's SPRITE (the text for this button) so we have "_root.B1TEXT._alpha = 100;".
Since the event for this is "OnEnterFrame", all transformations will be evaluated every frame so it will finally
result in a movement.
We now have another "else" that occurs if the mouse pointer ("FOLLOWER" shape) is NOT on the button (near the
black middle gradient). Yet we also have a condition that checks if the "TEXTURE" is not higher or equal to 20. If it is,
then the script will just halt because that means the "TEXTURE" is in its original state and that the mouse pointer
is not over the button. Otherwise, the "TEXTURE", the SCANLINES and the main LIGHT gradient "B1LIGHT", will move
down by 4 pixels "_root.TEXTURE._Y += 4;", "_root.B1SCANLINE._Y += 4;", "_root.B1LIGHT._Y += 4;" until its Y is
higher or equal to 20. Also the TEXT sprite has to be NULL so its opacity will be 0% again "_root.B1TEXT._alpha = 0;"
if the mouse pointer is not over the button.
The button is almost ready. You need to do one more thing anyway. Please open the TEXT sprite and add some
effect to the text (I suggest Wild - Flimmer), and a "Fade In", "Fade Out" for the small light gradient as shown below:
Now, we'll add another event that will make sure the button will "close" back if the mouse pointer is not on the
gradient anymore.
on (rollOut,dragOut,releaseOutside) {
_root.FOLLOWER._Y = 100;
}
What does this mean? If the target "FOLLOWER" (mouse pointer) is moved out of the movie, then this target's Y
coordonate will become 100 "_root.FOLLOWER._Y = 100;" (not near the black gradient) and then, the "OnEnterFrame" event will "close" the button again.
That's it. We made a Photorealistic (based on a texture), 3D (simulated rotation) button. Also you should keep in mind
that animations will always look better with a high framerate and many frames.
To see the results, click here.
The source (*.SWI file including the *.PNG texture and the font) can be found here.
Source at swish-db
|
|
|
