- Macromedia Flash - Sunflower presentation (button effects)

Flash can be, among other things, be used for very effective creation of interesting effects, that can be modified in web design. Button effects are among top ones. In this lesson, we will go across few basic ones. They can be used later, as the basic for more complicated animations...

This, very detailed lesson, has many useful "by-the-way" tips, that will give better understanding of todays topic, and is concerning many nice techniques in each step. I also included whole screenshots in this lesson, as to help you not to get lost.
Final result will be mixed presentation of many things you can do with knowledge of todays lesson!

Here's the result:

1. Let me start with saying, that for creating nice buttons you will need some basic knowledge of graphic design... But, as this is only the beginning, let's see what we can do on our own.. First, there is drawing of buttons.
On of easiest ways, and at the same time mostly used ones is separating parts of the picture from it's background on which the button will lay. You can do this part with programs like Photoshop, Gimp, Freehand... just to name a few... You can't do this with success in the Flash itself!
So, for the start, you will need finished graphics!



2. As said, start by separating part of the picture from it's background, and with play a little with the part you cut (separated) from background... (some tips: try changing colors, sharpness...)
All this will change the look of your button-to-be, make it stand out, and that is the first step in creating a button!
(Buttons on this picture are made from two copies of one graphics. To the one on the bottom, i removed all colorit, and the ratio of black and white color is changed! Buttons are cut from original part of picture with color kept, and size changes!)



3. Now, with the graphics in place, we can deal with basics of button interaction in presentation. Small animation of "entering" of buttons can visually enrich the presentation, and it is easy for making. In this case, button is entering from top left corner. Animation is 5 frames long, so it is smooth...
Just for the aesthetics, you can also add the effects that concern colour. In this case, button is on it's first frame completely white, and, while it is set to place, it gradually get's it's own colour. Animation is also 5 frames long. In this step, graphics are converted into movie clip!



4. Button has 4 main states: Up, Over, Down, and Hit! Each responds to the relation of mous and button (the name of the state speaks for itself). It is needed to have graphics for each and every one of four stated states (it is recommanded to have small changing of place [few pixels] for each one, just to have better feeling of control to the button user).
You can also create animation, but if you want to create something functional, it is not recommanded to create buttons that fly around and can't be clicked on!



5. While we are "in" the button, or in "edit" state, graphic can further be converted and animated, so that button get's effects of animation even though there is no interacion to it! The animation mostly used is about colour and effects concerning colour. In this example, button stands still for 48 frames, and then, in next 18 frames, amount of it's colour is increased, so you get effect of periodical shining of button - independently of users interaction with it!


6. One more basic effect frequently used, easy to apply, (and in combination with others gives interesting look to buttons), is Alha feature of converted graphics. Invisible button!
We will add Alpha feature to converted graphics, in Properties, and apply value 0 to it!


7. In edit space, in states Over, Down and Hit, we will import graphics withouth Alpha feature. We will, for now, leave "Up" empty. This will give the apperance of "invisible" button, that visually won't be in presentation, but will be usable for the ones that know it's location! Something like 'secret button'...


8. In this example, we will deal with basic controls of presentation, or clip, with buttons. With the help of one visible button, we will start animation that will show 4 buttons not to be seen in the start.
We will create one simple button with four basic states (right button on the picture). In the bottom rowe, we will put four graphics with feature Alpha set to 0.


9. You need to stop the clip before it ends. On 71st frame, in background layer, Keyframe is set, and in it, with the help of action script, Stop command (from the Movie Control group of command) is set.


10. On the same 71st frame, but in the layer of control button, command " on(release){play();} " is set, again, with the help of action script.


11. Lower row of the button is animated in that way as to gradually become visible in 14 frames, again, by using Alpha feature. On the first frame, it's value is 0, on the last one it is 100. This animation won't start by itself, because of stop command. It will only be started by clicking on the button with command " on(release){play();} ", so you will get effect of graduall appearing of the remaining buttons. This can be usefull in creating Vista-like menus, and similar effects...





With this step I conclude todays lesson...
Again, you can veiw today's lesson's work on the page: http://www.addlimb.org/kovac/cvet.html

Hope you had a good time, and looking forward to feedback!

- Macromedia Flash - Transparent objects

Here is easy way to make transparent object in Flash in two ways!
You can copy final ".fla" file of this lesson from: http://www.addlimb.org/kovac/transparent_santa.fla


1. Group earlyer prepared drawings. Mark all parts of object, in options go to Modify, option Group in drop down menu. (or use shortcut Ctrl+G)



2. You need to convert this group in movie clip. Mark the group, option Insert, then Convert to symbol. (you can use shortcut F8)




3. In options window enter the name for new symbol. In my case: "movie_clip_santa". In option Behaviour choose Movie Clip.



4. Select thus made clip. In Properties click on drop down menu and select Alpha.



5. Transparency level is determined by value 0-100 which is about Alpha feature of Movie Clip. Higher value = higher transparency.



In this way, Flash object is given transparency that can later be modified. But, if you want to achieve effect of gradual transparency, you need to use little animation...


(steps 1-3 are repeated, and then:)

6. With right click we will set frame on timeline, with option from drop down menu Insert Frame/



7. Again, with the right click, now on inserted frame, we will make motion tween with option Create Motion Tween, from drop down menu.



8. While still remaning on the last frame of animation, we will select object and in properties of objects select option Alpha.



9. As earlier statedm values are as on picture in field near options.



Alpha determines level of transparency of object, where o is total transparency (object is not seen), and 100 complete visibility.


There it is! That was easy!

- Photoshop - Create Pineapple

Here's how you can create virtual Pineapple with just few steps...



1. Open up a new image any size and create a black circle;



2. Use the gradient tool, and create circular gradient with the colors #EADF87 and #DBBF43;



3. Create a new layer and fill it with black color.
Now go to "Filter -> Noise -> Add Noise" and put the slider to the maximum (400%)



4. Now add "Filter -> Blur -> Radial Blur" and set it to zoom and 100%;
Set it to overlay and press CTRL+G;




5. Now, delete a circle in the middle;



6. Select the Move-Tool and duplicate the pinapple-layer; Now while holding ALT, move the layer down.



7. Now press CTRL+U to darken, set saturation to about -47, lightness to -32, and it's finished!





There's Pinapple!

- Photoshop - Hitman entering the scene

Here's an easy way to make the "James Bond" effect of Hitman entering the scene...



1. Start of by creating document 500x400px. Now, create triangle using pen, and with the inside color #929292.



2. Contionue creating triangles...



3. Untill you finish full circle of them...



4. We'll use this shape picture of james bond,


which we will transform into this, by simply using black brush on white surfaces, and deleting white surfaces with background eraser tool...


5. Now, create new layer, and import the picture of the man entering the scene...



6. Add also a shadow under the man. We need to copy the background with man's silhouette and use Free Transform (by clicking the right button of the mouse on the background) and display the silhouettes on 180* vertically.Also, change the opacity – 71% on the inverted layer.




There it is!

- Photoshop - Wild Western / Desert Scene (video tutorial)

In this tutorial, you will learn how to create a wild western / desert scene using adobe photoshop.

- Photoshop - Advertisement designing (iPod Style)

This designing technique is very popular among commercials. Most famously iPod uses it all the time. Here's how to do it...



1. Open up any picture in interesting pose.



2. Now, cut the image and type Ctrl+C and Ctrl+V to paste the cuted image to another layer. Then, you erase the background with Background Eraser Tool.



3. Create new background layer with a soft color



4. Add your person to the background, press Ctrl+U, and hange lightness to +100%!



5. Now, duplicate the layer with the person, and press CTRL+I;



6. Place the black layer underneath the white one, and move it a bit, so it resembles a shadow.



7. For the final touch, make the layer which will be under the white layer, but on which you will draw something like this...



8. And for the final picture... Voila!

- Photoshop - Whitening Teeth (video tutorial)

This is a basic photoshop tutorial for whitening teeth. Using the quick mask it only takes about 5 minutes and is very effective.

- Photoshop - Pen Tool is All You Need (video tutorial)

The Photoshop Pen tool strikes terror into the hearts of many a PS user! This video shows some tricks to better understand and master the pen tool.

- Photoshop - Text Picture (Create picture out of text)

You have all probably sometime seen picture that is entirely made of text. Here's how to do it...
For this lesson example, will use the same picture as in one of previous courses...



1. Go to "Image -> Adjustments -> Threshold", and move the slider left or right, untill you get satisfying picture...



2. Open the notepad, and type the words you want ito it like this:




3. Next, copy that text, and paste it in new text layer you have created.
After that, set up style and size of font, and rotate text untill you are satisfied.



4. Next, right click on text layer, and click "Resterise Layer". Select the template layer and with the magic wand at a tolerance of 32 select the white area. Go to select>similar to select all of the light areas and then select the text layer from the layers palette. Next select text layer, and hit delete to clear the excess text and drag the template layer into the bin icon. Back the image up in white by making a new layer (Go to "Layer -> New Fill Layer -> Solid Color") with a white fill and dragging it underneath the text layer.




There it is!
Beautifull!

- Photoshop - Frozen Text (Icy Effect)

This tutorial will show you how to make cool ice/frozen effect on your picture or text!
This example showes you how to do it on example text!



1. Start by opening new document with black bacground. Set white as your foreground colour, and black as your background colour (by hitting 'D', and then 'X' on you'r keyboard). Now, create new layer by hitting Shift+Ctrl+Alt+N. Use text tool, and add your text (it should be in white colour, on black background). I used "Icy Text" as an example.



2. Click on text layer, and then hold Ctrl button, and click the text layer in the Layers palette to make it a selection.
Now, in you'r menu, go to "Filter -> Noise -> Add Noise". (Click OK to the pop-up asking you if you want to rasterize.) Choose 150% and Uniform. Now hit Ctrl+D to deselect.



3. Go to "Filter -> Pixelate -> Crystalize" and choose Cell Size 3. Next, go to "Filter -> Stylize -> Find Edges". Hit Ctrl+I to inverse the colors!



4. Go to "Edit -> ransform -> Rotate 90 CW".
Then, "Filter -> Blur -> Gaussian Blur" and choose 0.8 for the Radius.
Then, go to "Filter ->Stylize -> Wind" and pick Wind and From the Right.
Now, run the same wind filter a second time to get bigger icicles, and then go to "Edit -> Fade Wind". Move the Opacity slider to suite your preference. I decreased the Opacity to 90%, but you can set it to suit you'r needs.



5. Return you'r text in normal position by going yo "Edit -> Transform -> Rotate 90 CCW".
Create a new layer by hitting Shift+Ctrl+Alt+N. Select a light blue color you'd like to accent your ice with as you foreground color (I picked #3366FF). Fill the new layer with that color by hitting Alt+Backspace. Hold Alt and click between the blue layer and the text layer in the Layers Palette. The cursor should turn to into a symbol with two circles when you have it in the right place. With the blue layer still selected, go to the left drop-down menu above and change its Blending Mode to Overlay. Then, decrease the Opacity slider to suite your taste. (I opted for 60% in the example).


There it is! If you want snowy-icy effect, you can add sparkles here and there by using brush with that set as the type of brush (for more details read final step),and that is it!
If you want more blue-icy effect, you should procede reading this tutorial!



6. Create another new layer by hitting Shift+Ctrl+Alt+N. Hold Ctrl and click the layer with your text to load it as a selection. Fill the layer selection with a dark blue (I used #000761). Hit Ctrl+D to deselect. Set white as your background color. Go to "Filter -> Artistic -> Neon Glow". This part varies heavily with what the size and style of your text. Choose a middle blue color (I picked #002BD0). Move the Glow Size to about -8 and Glow Brightness to about 19.



7. Go to "Filter -> Artistic -> Plastic Wrap" and change the settings to your preference (I used Highlight Strength 8, Detail 14, Smoothness 7). In the Layers Palette, change the Blending Mode to Pin Light.



8. Final step is to add sparkles.
Set white as you foreground color and select the Paint Brush tool. In the Brush selector at the top, find the sparkle brushes (like i used on the picture).
Create a new layer on top and apply the brushes to a few areas near the top of your text, or as you prefer.




Finished!
And sooo easy!