Recently Posted

advertisement





Macromedia Flash Mapping





Computer graphics fall into two main types: vector
graphics and bitmap images. We'll make a quick
comparison of the two to help you understand which is
more appropriate for your artwork. It boils down to the
kind of artwork you're preparing and what you intend
to do with it.
Vector vs. Bitmap
Vector graphics
are made up of shapes defined by mathematical
expressions. A vector graphic has crisp, smooth
lines and is resolution-independent—that is, it can be
rescaled to any size or displayed onscreen at any
resolution without losing the clarity of its lines.
Bitmap images
(also called raster images) are based on a
grid of small squares known as pixels. Each pixel has a
specific location and color value assigned to it. Bitmap
graphics can represent subtle gradations of shade and
color. A disadvantage of bitmaps is that they represent a
fixed number of pixels, so they can appear jagged and
lose detail if they are rescaled or displayed onscreen at a
higher resolution.
Which graphic type should you use?
So which type do you need? It depends on what you're
trying to do:
• Vector graphics are crisp at any size or resolution, so
they're well suited for line art, type (especially small
type), and graphics that may need to be scaled, such as
logos and maps. Vectors also produce more compact
files than bitmaps, so they're quicker to open or
download on systems with limited memory or lowbandwidth
connections.
• Bitmap images can represent rich and subtle gradations
of shade and color, so they're appropriate for
artwork created in painting programs and for
continuous-tone images such as photographs. You
might also want to convert vectors to bitmaps to apply
distortion filters or other special effects to them.
Drawing programs such as Adobe® Illustrator® are
ideal for creating vector graphics. Bitmap images are
generally created using graphics programs such as
Adobe Photoshop®. Both Illustrator and Photoshop
can rasterize your vectors into bitmaps.
What's next for graphics on the Web?
Most graphics on the Web today are in bitmap formats,
such as GIF, JPEG, and PNG. Up until now, the only
vector formats practical for the Web have been proprietary
standards, such as Flash (SWF)—but a new openstandard
format called Scalable Vector Graphics (SVG)
is emerging.
SVG will let Web developers use high-quality vector
fonts and graphics that look great at any size or
resolution and that incorporate sophisticated elements
such as gradients and animation. Imagine being able to
zoom into a map on the Web! And SVG vector descriptions
are embedded in the HTML code, so developers
can put interactivity, such as rollover highlighting, right
in the artwork.
Illustrator 9.0 exports to both SVG and SWF vector
formats. You can even define SVG interactivity for your
artwork within Illustrator.



Draw a circle (or whatever shape you want), select it and hit F8 to convert
it to a movieclip, name this 'ball'.


Actionscript Breakdown


A break down of how the random motion script will work



  1. Generate a random value for the position
  2. Move the object gradually towards the random position value
  3. Once it reaches the position generate another random value, repeat the
    process


Note: All the actionscript used in the tutorial will be added on frame one of
the movie clips timeline and not the main timeline (for simplicity's sake
)


1. Generating the Random Position


First we need to generate a Random Position, we can generate a position
pretty easily by using

newpos = function () {
ranx = Math.random ()*250)
rany = Math.random ()*250)
}

this.onEnterFrame = function() {
newpos ()
this._x = ranx;
this._y = rany;
}

In the function newpos () Math.Random () generates a random decimal number
between 0 and 1, it is then multiplied by 250 which is the width of the movie.
So in effect ranx and rany the random positions will be set to value


The this.onEnterFrame part calls the function newpos()
continuously and sets the position of the movieclip to a random value



2. Gradually moving towards the random position

acceleration = 10
newpos = function () {
ranx = Math.round((Math.random ()*250));
rany = Math.round ((Math.random ()*250));
}
newpos();
this.onEnterFrame = function() {
this._x += ((ranx-this._x)/ acceleration);
this._y += ((rany-this._y)/ acceleration);
};

newpos() has been moved outside the onEnterFrame event because we
want to move the movieclips gradually not every time the movieclip enters a
frame.

this._y += ((rany-this._y)/ acceleration);
is a shorthand way of
saying
this._y = ((rany-this._y)/ acceleration) + this._y;

The code keeps adding a portion of the difference between the current movie
clip position and the randomly generated position, on enterframe.


This way the the _x and _y values of the movieclip are gradually increased to
match the the values of the randomly generated position.



3. Repeating the process


The process needs keep repeating so we add the following code.

acceleration = 10
newpos = function () {
ranx = Math.round((Math.random ()*250));
rany = Math.round ((Math.random ()*250));
}
newpos();
this.onEnterFrame = function() {
this._x += ((ranx-this._x)/acceleration);
this._y += ((rany-this._y)/acceleration);
if (Math.round(this._x) == ranx || Math.round(this._y) == rany) {
newpos();
}

};

This way once the _x value of the movieclip equals the random position. The
newpos() function is called again to generate a new set of random x and y values
and the whole process repeats itself over and over again.



Download
Source



Source http://www.tutorio.com



Animation is a way of bringing your pictures to life. All film and video is created through a series of pictures spread over time. A camera takes up to 25 pictures to create one second of movement. That means that for some types of animation you would have to create and film 25 drawings for one second
of movement. Don't despair or give up yet! You can create animation without it being so complicated or time consuming.
The first animation and filmmaking exercises in these notes don't even need a camera - there are other ways of creating the illusion of movement.



Apa sih PHP itu ? Mungkin itu pertanyaan yang ada di benak rekan-rekan saat mendengar kata PHP. PHP merupakan script yang menyatu dengan HTML dan berada pada server (server side HTML embedded scripting). Dengan PHP ini Anda dapat membuat beragam aplikasi berbasis web, mulai dari halaman web yang sederhana sampai aplikasi komplek yang membutuhkan koneksi ke database.

Sampai saat ini telah banyak database yang telah didukung oleh PHP dan kemungkinan akan terus bertambah. Database tersebut adalah :

dBase
DBM
FilePro
mSQL
MySQL
ODBC
Oracle
Postgres
Sybase
Velocis
Selain itu PHP juga mendukung koneksi dengan protokol IMAP, SNMP, NNTP dan POP3.




1. Buat file dengan ukuran panjang dan lebar sama, misalnya 150 x 150 pixels. Dengan rectangle marque tool, buat bujur sangkar.
2. Pada linear gradient tool , pilih warna 1 yang terang dan warna ke-2 lebih gelap. Lalu beri warna pada bujur sangkar tersebut.
3. Dari menu Select, pilih All. Dari menu Select pilih Modify - Border.
4. beri Teks




Part 1 - Creating the Base
1. Create a new document in Photoshop, 250×150 in size with a white foreground.
2. Create a new layer. Add a rounded rectangle via the Rounded Rectangle Tool (U) onto the document with these shape settings. After the shape is placed on the document, take out your Move Tool (V) and align it to the bottom-left corner of the document.
3. Black is definitely not a good color for a Web2.0 button, so we’re going to add a color overlay and stroke to the button. You’ll notice why the stroke is the same color in the next couple of steps.
4. Take out your Move Tool (V). Hit the up and left arrow on your keyboard 3 times each. This will allow the bottom-right side of the border to be visible in the document.
5. Take out your Move Tool (V). Hit the up and left arrow on your keyboard 3 times each. This will allow the bottom-right side of the border to be visible in the document.
6. CTRL + Left Mouse click the button layer icon to make a selection out of the button.Take out your Gradient Tool (G). On a new layer, click and drag your mouse from the top-right section of the document all the way to the bottom-left side of it. If you’re having trouble with the gradient, follow this gradient guide. You should now have a nice glossy button base!


Part 2 - Adding the Badge

1. Change your foreground color to #FF7E00 (bright orange color.) Next, take out the Custom Shape Tool (U). Select this badge shape, and then apply these settings in the properties toolbar. Once all the settings are in place, all you have to do is click and drag the badge to the top-left section of the document.
2. Create a new layer. CTRL + Left Mouse click the badge layer to make a selection of it, just like we did to the button in Step 5. Take out your Gradient Tool (G) once more. This time instead of a linear white to transparent gradient, select a radial white to transparent gradient. Now click and drag your mouse from the center of the the badge to below the badge.
3. Change the layer’s blending mode from Normal to Soft Light.
4. Create another new layer. On this one, we’ll be dragging the radial gradient from the top side of the badge to the center of the badge.
5. Change your foreground color to a green color (I used #8EE122.) Next, take out the Horizontal Type Tool (T) and type out something to go with your badge. I simply put “2.0″ in my text layer. Use the font Arial, with a 24pt size and Strong anti-aliasing. Change the opacity of the text layer to 75%.

Source : http://upupmedia.com/?page_id=44



Adobe ® Photoshop® 7.0 opens up a whole new range of possibilities for creating artistic effects. With the new painting engine, you can create imagery that looks as if it was painted using natural media. Follow along and learn a few of the ways you can customize the brush tool.

1. Choose a brush tip.
Select the brush tool and choose Window > Brushes to
display the Brushes palette. Select Brush Tip Shape on
the left side of the palette, and then select a brush tip.
When you’re exploring the options in the Brushes
palette, it’s best to choose a simple tip, such as Hard
Round or Soft Round, so you can clearly see the effects.

2. Fade the size of the brush.
Select Shape Dynamics on the left side of the Brushes
palette. (Click on the words, rather than the check box,
to view the Shape Dynamics options.) Choose Fade
from the Control pop-up menu below the Size Jitter
slider; then enter a number of steps. The more steps you
enter, the longer the stroke. You can view results at the
bottom of the Brushes palette.
Now try adjusting some of the other shape dynamics.
Drag the sliders to add randomness to brush elements.
(At 0%, an element does not change over the course of
a stroke; at 100%, an element has the maximum
amount of randomness.) Choose options from the
Control pop-up menus to control the variance of brush
elements.

3. Add scattering to the brush.
Select Scattering on the left side of the Brushes palette.
The options in this section of the Brushes palette
determine the number and placement of marks in a
stroke. Adjust the Scatter percentage to specify the
maximum percentage of scattering in a stroke. Adjust
the Count value to specify the number of brush marks
applied at each spacing interval. Adjust the Count Jitter
percentage to add variance to the number of brush
marks applied at each spacing interval.

4. Add texture to the brush.
Select Texture on the left side of the Brushes palette.
The options in this section of the Brushes palette let you
make strokes look like they are painted on textured
canvas. First, click on the pattern sample at the top of
the palette, and choose a pattern from the pop-up
palette. (You can load additional patterns by clicking
the triangle at the top right of the pop-up palette, and
choosing a pattern library from the bottom of the
palette menu.) Use the Scale slider to adjust the size of
the pattern.
Now you’re ready to use your brush.

5. Paint in the image.
Choose a color and paint freehand in an image.
Alternately, you can apply the brush stroke to a path.
(For more information on creating paths and using the
Paths palette, see Photoshop online Help.) We used a
work path to create brush strokes on a new layer.
We then used the same method to create additional
fireworks in different colors.

6. Experiment with other brush options.
Now that you know the basics, you can experiment
with some of the other brush options. For example,
we added color dynamics to our brush and painted
freehand to create particle streaks falling from the
fireworks.