PiticStyle

Reducing your Flash Player file sizes is no longer so important because many people now have high-speed Internet connections. But not everyone does. So it still isn’t a bad idea to spend a little time thinking about shrinking the size
of your Flash movies.

Simplifying artwork

By simplifying the artwork in your movie, you can greatly reduce the size of a Flash movie, thereby increasing its speed. Here are the most important techniques:

• (more…)

Today we learn how to create play on click button in Flash CS3! Here is the final result!

To add some great sound to your Flash movie, you must first import the sound. You can import AIFF, WAV, and MP3 sounds. Flash places these sounds in your Library.

Sounds vary in sample rate, bit rate, and channels. These statistics are important because they affect the quality and size of the sound file. Of course, the length of the sound also affects its size. Here’s what you need to know:

• Sample rate: The number of times the recorder samples an audio signal when it’s recorded in digital form. Measured in kilohertz (kHz). Try not to use more than 22 kHz unless you want CD-quality music.
• Bit rate: The number of bits used for each audio sample. Sometimes called bit resolution. A 16-bit sound file is clearer with less background noise, but use 8-bit sound if you need to reduce file size.
• Channels: Typically one channel of sound (monophonic) or two channels (stereophonic). In most cases, mono is fine for Flash files and uses half the amount of data that stereo uses.

Often, you need to take a sound as you find it unless you have software that can manipulate sounds. Luckily, you can set the specs of sounds when you publish your movie to an .swf file. You generally get the best results by
starting with high-quality sounds and compressing during publishing ( Information from Flash CS3 for Dummies ebook)

(more…)

Today we learn how to Create Motion Tween Animation in Flash CS3. Here is the final
result!

The Animation Tween

If your animation follows some simple guidelines, you can save yourself lots of work (and reduce your file size, too) by using Flash to calculate the in-between frames for you automatically. You create just the first and last keyframes, and Flash figures out what should go in between. In animation technobabble, that’s called tweening — a quick, fun way to create great animations.

You can do a lot with Flash’s tweening capabilities, including:

• Motion tweening: This is definitely the most common type of tweening. With simple motion tweening, you can move your objects in a straight line from here to there. You can use motion tweening also to animate an object along any path that you create, even one with lots of curves.
• Shape tweening: This type of tweening gradually changes any shape to another shape. You create the first and last shapes. These days, kids call it morphing. The results may be quite unpredictable and require a lot of computer processing but are usually interesting. You can add shape hints to try to tell Flash exactly how you want your shape to morph.

And with both motion tweening and shape tweening, you can:

• Change an object’s size: For example, if you make an object smaller as you move it, the object often appears to be moving away from the viewer.
• Rotate an object: You specify the amount of the rotation. Flash combines the motion or shape tweening with the rotation so that you get both effects at one time.
• Change color or transparency or both: Flash creates a gradual change in color based on your starting and ending colors.

Note: Information from Flash CS3 for Dummies ebook. Let’s start the tutorial!

[1] Open Flash and create a new Flash File (ActionScript 3.0)

(more…)

Today we learn together how to create a simple effect in Flash. You can buy or download (trial version) the software from here. Here is the final result!

Who Framed the Animation?

The secret of animation in Flash, as in the movies, is that nothing ever really moves. A Flash movie creates the illusion of movement by quickly displaying a sequence of still images. Each still image is slightly different. Your brain fills in the gaps to give you the impression of movement.

One of the great things about Flash is that you can easily create complicated, spectacular extravaganzas of animation. And Flash stores lots of information in the super-compact vector format. Because the files can be small, they can be transmitted over the Web quickly. That’s good for your Web site viewers.

(more…)

An action is a way of automatically applying a technique to an image using a prerecorded series of commands. Actions are triggered either by pressing one or a combination of keys or selecting the action from the Actions palette (1). Many actions
are already supplied with Photoshop and can be found at the bottom of the Actions menu (2) by clicking on the side-arrow at the top right of the Actions palette.

An action can be as simple as opening a new canvas or as advanced as creating a drop shadow on an existing picture or, as
in our example, making snow.

Ready-made actions can be downloaded from the internet, saved to your hard drive and then installed in Photoshop. Use the Load Actions command (3) in the Actions menu to search for and install the downloaded ATN or Photoshop Actions fi le.
(more…)

Today we learn how to create animations in Photoshop! My example is with text because i don’t have photos for this kind of tutorial! Let’s start!

[1] Open Adobe Photoshop and create a new page with the size 350px x 150px!

(more…)

Today we learn how to create a search form in HTML! You have all files here and the
final result here!

[1] Open Notepad and type the next code.

<html>
<head>
<title>PiticStyle - Create a Search Form</title>
<style type=”text/css”>
body {
background-image: url(”bg.gif”);
}
img {
float: left;
}
</style>
</head>
<body><br>
<form action=”http://www.google.com/search” method=”get”><img src=”search.gif” mce_src=”search.gif”>
<input type=”text” name=”q”>
<input type=”submit” value=”Search”>
</form>
</body>
</html>

(more…)

Before

After

[1] Open the photo in Adobe Photoshop, click here (right click -> save target as) to download!

[2] Select Polygonal Lasso Tool and select the DJ place

(more…)

Today we learn about opacity in CSS! I made an example here and here you have the files.

Information about opacity in CSS:

The opacity property takes a value of the amount of transparency from 0.0 to 1.0. 0.0 is 100% transparent - anything below that element will show completely through. 1.0 is 100% opaque - nothing below the element will show through.

So to set an element to 50% transparent, you would write: opacity:0.5;

Neither IE 6 nor 7 support the CSS 3 opacity property. But you’re not out of luck. Instead, IE supports a Microsoft-only property “alpha filter”. Alpha filters in IE accept values from 0 (completely transparent) to 100 (completely opaque). So, to get your transparency in IE, you should multiply your opacity by 100 and add an alpha filter to your styles:

Alpha filter for IE: filter: alpha(opacity=50);
Alpha filter for Mozilla: -moz-opacity:0.5;

(more…)

Hy! Today we learn how to validate HTML and CSS from your page. This tip is usefull if you have a website about webdesign where you have tools for development! Here is the final result
with a design what i made, you have all files in the archive HERE. Let’s Start.

[1] Open your text editor and type the next HTML code

<html>
<head>
<title>Validate CSS, HTML, XHTML from your page</title>
</head>
<body>
<div>
<form method=”get” action=”http://jigsaw.w3.org/css-validator/validator” target=”_blank”>
<input name=”uri” id=”uri” size=”30″ value=”http://” /></p><br><br>
<label title=”Submit file for validation”><input type=”submit” value=”Validate CSS” /></label>
<label title=”Clear HTML data”><input type=”reset” value=”Clear” /></label>
</form>
</div>
<br>
<div>
<form method=”get” action=”http://validator.w3.org/check” target=”_blank”>
<input name=”uri” id=”uri” size=”30″ value=”http://” /></p><br><br>
<label title=”Submit”><input type=”submit” value=”Validate HTML” /></label>
<label title=”Clear”><input type=”reset” value=”Clear” /></label>
</form>
</div>
</body>
</html>

(more…)