tag:blogger.com,1999:blog-14313044540462031912024-03-05T11:11:43.422-08:00Non-GeekNonGeekBookshttp://www.blogger.com/profile/14829341076687504738noreply@blogger.comBlogger8125tag:blogger.com,1999:blog-1431304454046203191.post-46243568382673829362010-04-04T15:43:00.001-07:002010-04-22T08:08:33.033-07:00<table border="0">
<tbody>
<tr>
<td><table align="left" border="0" style="width: 100px;">
<tbody>
<tr>
<th scope="row"><img alt="flash_tutorials" height="282" src="http://adobe-flash-tutorials.info/Reading_code.jpg" width="425" /></th>
</tr>
</tbody></table>
Welcome to Non-Geek Tutorials. We've been creating Flash projects since the 1990s and we're still going strong! Along the way we've mastered a few other programs such as Photoshop and After Effects. We'll be creating great tutorials for all these programs, so keep checking back!<br />
One thing we have learned in our Flash career, is that most people can't wrap their brains around ActionScript. It's a complicated programming language that just became more complicated with the release of 3.0. That's where we come in. We show non-programmers how to create anything they want in Flash without writing one line of code! Everything from banners, to ads, to video games and casino games (that keep track of your winnings). It doesn't matter if your ninety years old, or five years old, we make Flash <span style="font-style: italic;">easy to learn</span>.<br />
Our method is simple and fast. No writing code, no debugging code, just an easy to use method that frees everyone up to be as creative as they want to be without having to worry about programming. We've spent years putting together this <a href="http://nongeekbooks.blogspot.com/p/master-flash-without-writing-code.html">Flash E-Book</a> (over 630 pages with thousands of illustrations!) so we're inviting everyone to check it out! We're only charging a few bucks for it (about the same cost as 5 Lattes); remember, every penny we make from the book helps feed our little workers for another day.
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><a href="http://nongeekbooks.blogspot.com/p/twitter.html"><img alt="Tweet Tutorial" height="157" src="http://adobe-flash-tutorials.info/tweet_panel.jpg" width="525" /></a></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><hr />
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><a href="http://adobe-flash-tutorials.info/"><img alt="Flash tutorial" height="157" src="http://adobe-flash-tutorials.info/master_flash_panel.jpg" width="525" /></a></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><hr />
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td height="21"><a href="http://nongeekbooks.blogspot.com/2010/02/adding-flash-to-blogger-adding-flash.html"><img alt="flash blogger" height="157" src="http://adobe-flash-tutorials.info/add_flash_blogger.jpg" width="525" /></a></td>
</tr>
</tbody></table>NonGeekBookshttp://www.blogger.com/profile/14829341076687504738noreply@blogger.com0tag:blogger.com,1999:blog-1431304454046203191.post-80898606292203227112010-03-15T07:36:00.000-07:002010-04-17T23:43:02.157-07:00Photoshop Mirrored Image<br />
A really cool effect that can be done in a matter of minutes, is the mirrored effect. When it's done correctly it really has a great look. Let's get started! Right-click on the image below and select Save As:
<br />
<img alt="twitter" height="256" src="http://www.adobe-flash-tutorials.info/photo_mirror/twitter_logo.jpg" width="256" /><br />
<br />
Save it to your computer. Next, open this image in Photoshop. The first thing we'll do is remove the background (white part). Before we can remove the white part we need to convert the Twitter logo a layer. We do that by double-clicking the Background layer's thumbnail:<br />
<br />
<img alt="twitter" height="291" src="http://www.adobe-flash-tutorials.info/photo_mirror/twitter_layer.jpg" width="217" /><br />
<br />
<br />
The new Layer window will pop-up. Change the Name to Twitter Logo:<br />
<img height="151" src="http://www.adobe-flash-tutorials.info/photo_mirror/twitterLogo.jpg" width="441" /><br />
<br />
<br />
Hit OK when you are done. So, whenever you want to remove information from the Background layer, you have to perform the previous steps first. Next, click on the Magic Wand (in the latest versions of Photoshop it will be a subselection of the Quick Selection Tool::<br />
<img alt="twitter tutorial" height="161" src="http://www.adobe-flash-tutorials.info/photo_mirror/magic_wand.jpg" width="225" /><br />
<br />
<br />
Using the Magic Wand tool, click on the white background of the Twitter logo:<br />
<img alt="twitter" height="535" src="http://www.adobe-flash-tutorials.info/photo_mirror/select_back.jpg" width="538" /><br />
<br />
<br />
Now, normally you would just hit delete and the background will be gone. I'm going to show you a better way to remove backgrounds. Let's invert the selection so that the logo, and not the background, is selected. We do that by going to Select, and Inverse:<br />
<img alt="twitter" height="109" src="http://www.adobe-flash-tutorials.info/photo_mirror/inverse.jpg" width="243" /><br />
<br />
<br />
The selection should just be around the logo now:<br />
<img height="532" src="http://www.adobe-flash-tutorials.info/photo_mirror/inverse_selectin.jpg" width="531" /><br />
<br />
<br />
Now we can click on the layer mask icon:<br />
<img alt="twitter tutorial" height="126" src="http://www.adobe-flash-tutorials.info/photo_mirror/layer_mask.jpg" width="263" /><br />
<br />
<br />
Now everything that isn't selected on our layer will be gone:<br />
<img alt="twitter" height="296" src="http://www.adobe-flash-tutorials.info/photo_mirror/no_background.jpg" width="293" /><br />
<br />
<br />
We're almost done! Next, go to Image, Canvas Size:<br />
<img alt="twitter tutorials" height="205" src="http://www.adobe-flash-tutorials.info/photo_mirror/canvas-size.jpg" width="231" /><br />
<br />
<br />
When the Canvas Size window opens, select Relative. Next, type 3 in the Width and Height fields: <br />
<img alt="photoshop" height="356" src="http://www.adobe-flash-tutorials.info/photo_mirror/canvas.jpg" width="435" /><br />
<br />
<br />
Relative means that it will make the canvas 3 inches wider and higher than its current size. Hit OK when you are finished. the new canvas should look like this:<br />
<img alt="photoshop" height="508" src="http://www.adobe-flash-tutorials.info/photo_mirror/canvas-large.jpg" width="531" /><br />
<br />
<br />
Next, we'll create a new layer. Click on the New Layer icon:<br />
<img alt="photoshop" height="120" src="http://www.adobe-flash-tutorials.info/photo_mirror/create_layer.jpg" width="268" /><br />
<br />
<br />
We're now going to fill this new layer with black. Go to Edit, and Fill. In the Fill window change Use to Black:<br />
<img alt="photoshop" height="251" src="http://www.adobe-flash-tutorials.info/photo_mirror/black-fill.jpg" width="341" /><br />
<br />
<br />
Hit OK when you are finished. Your canvas should now be black. We now need to drag our new layer below the Logo layer. Click on the new layer and drag it below the logo layer:<br />
<img alt="photoshop" height="240" src="http://www.adobe-flash-tutorials.info/photo_mirror/layer_bottom.jpg" width="216" /><br />
<br />
<br />
Next, select the Twitter Logo layer so it's highlighted:<br />
<img alt="photoshop" height="180" src="http://www.adobe-flash-tutorials.info/photo_mirror/logo_selected.jpg" width="228" /><br />
<br />
<br />
Click on the Selection Tool:<br />
<img height="144" src="http://www.adobe-flash-tutorials.info/photo_mirror/selection-tool.jpg" width="133" /><br />
<br />
<br />
Move the logo image upward just a bit:<br />
<img height="508" src="http://www.adobe-flash-tutorials.info/photo_mirror/twitter_high.jpg" width="513" /><br />
<br />
<br />
So now we'll make the mirrored image. In the Layers palette click on the Twitter Logo layer's thumbnail:<br />
<img height="194" src="http://www.adobe-flash-tutorials.info/photo_mirror/layer_thumb.jpg" width="215" /><br />
<br />
<br />
Now, drag this thumbnail down to the Create a new layer icon:<br />
<img height="164" src="http://www.adobe-flash-tutorials.info/photo_mirror/create_layer_icon.jpg" width="258" /><br />
<br />
<br />
You should now have a copy of the Twitter Logo layer:<br />
<img alt="photoshop" height="213" src="http://www.adobe-flash-tutorials.info/photo_mirror/copy.jpg" width="214" /><br />
<br />
<br />
Next, with this new layer still selected, go to Edit, Transform, and Scale:<br />
<img height="214" src="http://www.adobe-flash-tutorials.info/photo_mirror/scale.jpg" width="476" /><br />
<br />
<br />
Select the top middle transform box:<br />
<img height="333" src="http://www.adobe-flash-tutorials.info/photo_mirror/top_middle.jpg" width="525" /><br />
<br />
<br />
Now, drag this transform box downward until the image is completely below the original logo:<br />
<img height="529" src="http://www.adobe-flash-tutorials.info/photo_mirror/downward.jpg" width="492" /><br />
<br />
<br />
When you're done hit Enter on your keyboard. Next, select the Selection Tool again and drag this copied image upward until it's flush with the top image:<br />
<img height="460" src="http://www.adobe-flash-tutorials.info/photo_mirror/flush.jpg" width="297" /><br />
<br />
<br />
Next, go to Filter, Blur and Gaussian Blur:<br />
<img height="242" src="http://www.adobe-flash-tutorials.info/photo_mirror/blur.jpg" width="365" /><br />
<br />
<br />
In the Gaussian Blur window, change the Radius to 3:<br />
<img height="337" src="http://www.adobe-flash-tutorials.info/photo_mirror/blur_setting.jpg" width="331" /><br />
<br />
<br />
Hit OK when you are done. The copied image will now be slightly blurred. Next, we'll add a new mask to this image. Before we do that, however, we'll apply the existing mask to the layer. We do that by clicking on the mask thumbnail of the copied layer:<br />
<img height="210" src="http://www.adobe-flash-tutorials.info/photo_mirror/layer_mask_logo.jpg" width="228" /><br />
<br />
<br />
Now, click-and-drag this thumbnail to the Delete layer icon:<br />
<img height="161" src="http://www.adobe-flash-tutorials.info/photo_mirror/layer_garbage.jpg" width="237" /><br />
<br />
<br />
Photoshop will ask you if you want to apply the mask before removing. Select Apply:<br />
<img height="121" src="http://www.adobe-flash-tutorials.info/photo_mirror/apply.jpg" width="361" /><br />
<br />
<br />
This layer will no long have a mask. We're now going to add a new mask. Click on the Add layer mask icon:<br />
<img alt="twitter tutorial" height="126" src="http://www.adobe-flash-tutorials.info/photo_mirror/layer_mask.jpg" width="263" /><br />
<br />
<br />
This new layer now has a mask. Next, select the Gradient Tool:<br />
<img height="142" src="http://www.adobe-flash-tutorials.info/photo_mirror/gradient.jpg" width="136" /><br />
<br />
<br />
At the top of the Photoshop screen click on the Gradient Edit button:<br />
<img height="129" src="http://www.adobe-flash-tutorials.info/photo_mirror/edit.jpg" width="294" /><br />
<br />
<br />
The Gradient Editor window will open up. Select the Black, White gradient and click on OK:<br />
<img height="363" src="http://www.adobe-flash-tutorials.info/photo_mirror/black-white.jpg" width="438" /><br />
<br />
<br />
Next, we're going to click on the bottom of the canvas with our Gradient Tool, and click again at the top of the copied image:<br />
<img height="465" src="http://www.adobe-flash-tutorials.info/photo_mirror/drag.jpg" width="356" /><br />
<br />
<br />
Release the mouse button and the copied logo should now fade to black:<br />
<img height="488" src="http://www.adobe-flash-tutorials.info/photo_mirror/fasde.jpg" width="311" /><br />
<br />
<br />
The last thing we'll do is change the transparency of the image. In the Layer's palette, select the Opacity slider and take it down to 36%:<br />
<img height="204" src="http://www.adobe-flash-tutorials.info/photo_mirror/opacity.jpg" width="214" /><br />
<br />
<br />
The final image should look really good now:<br />
<img height="501" src="http://www.adobe-flash-tutorials.info/photo_mirror/ScreenShot182.jpg" width="497" /><br />
<br />
If you want to make it look even better you can add a gradient behind the logos. Maybe a black to blue gradient.NonGeekBookshttp://www.blogger.com/profile/14829341076687504738noreply@blogger.com0tag:blogger.com,1999:blog-1431304454046203191.post-18801946136814129232010-03-12T14:03:00.000-08:002010-04-18T00:24:12.692-07:00Photoshop Masking<br />
In this tutorial we're going to place an image of a girl walking into a beach scene. We'll then remove the background of the girl's picture to make it look like she's actually on the beach. We'll be using a Mask to create this effect.
Before we begin download the files by clicking <a href="http://www.adobe-flash-tutorials.info/ocean.zip">here</a>.
Open both pictures in Photoshop:
<p><img src="http://www.adobe-flash-tutorials.info/mask_tutorial/two_images.jpg" width="540" height="327" /></p>
<p>Next, click on the Selection Tool:</p><p><img src="http://www.adobe-flash-tutorials.info/mask_tutorial/selection_tool.jpg" alt="photoshop tutorial" height="264" width="49" />
</p>
<p>Now, drag the picture of the woman walking, over to the beach picture:
</p><img src="http://www.adobe-flash-tutorials.info/mask_tutorial/walking_beach.jpg" alt="photoshop" height="372" width="540" />
<p> </p>Position the girl walking image so that she's barely in the water:
<p><img src="http://www.adobe-flash-tutorials.info/mask_tutorial/position.jpg" alt="photoshop" height="505" width="428" /></p>
We're now going to remove the background from the girl's picture. Click on the Add vector mask icon at the bottom of the Layers palette:
<p><img src="http://www.adobe-flash-tutorials.info/mask_tutorial/vector_mask.jpg" alt="photoshop" height="247" width="217" />
</p>
You'll now see a second thumbnail on the girl's layer. The girl's picture now has a Mask attached to it. This Mask allows us to paint away the background. Select the Brush Tool:
<p><img src="http://www.adobe-flash-tutorials.info/mask_tutorial/brush_tool;.jpg" alt="photoshop" height="321" width="45" />
</p>
<p>Change the size to 62, and the Hardness should be 50%:
</p><img src="http://www.adobe-flash-tutorials.info/mask_tutorial/brush_settings.jpg" alt="photoshop setting" height="327" width="555" />
<p> </p>Next, make sure black is the foreground color:
<p><img src="http://www.adobe-flash-tutorials.info/mask_tutorial/black_color.jpg" alt="photoshop" height="295" width="47" /></p>
<p> </p>
<p>We can now start paiting away the background. Position the brush tool on the girl's picture and begin painting away the background:</p>
<p><img src="http://www.adobe-flash-tutorials.info/mask_tutorial/mask_paint.jpg" alt="photoshop" height="478" width="382" /></p>
<p> </p>
<p>Keep painting away the background. Don't paint too close to the girl. We'll be fine-tuning our mask in a moment. When you're finished paiting away the majority of the background the girl's image should look like this:</p>
<p><img src="http://www.adobe-flash-tutorials.info/mask_tutorial/mask_finish.jpg" alt="photoshop" height="414" width="266" /></p>
<p> </p>
<p>Before we can paint away the background near the girl's body, we need to change the brush size. In the Brush settings, change the Master diameter to 12, and the Hardness to 90%:</p>
<p><img src="http://www.adobe-flash-tutorials.info/mask_tutorial/mask_smaller.jpg" alt="photoshop" height="329" width="297" /></p>
<p> </p>
<p>The brush size should be much smaller now. If it helps you to Zoom in go ahead and do that (Ctrl + Spacebar). Now, paint away the rest of the background:</p>
<p><img src="http://www.adobe-flash-tutorials.info/mask_tutorial/fine_detail.jpg" alt="photoshop" height="525" width="540" /></p>
<p> </p>
<p>If you accidentally paint away part of the girl don't worry. This is why using a mask is so much better than using the Eraser Tool. When you use a mask to remove a background you're not destroying the image. You can bring back anything you want by simply changing the foreground color. For instance, let's say that we accidentally painted away part of her leg:</p>
<p><img src="http://www.adobe-flash-tutorials.info/mask_tutorial/delete.jpg" alt="photoshop" height="360" width="395" /></p>
<p> </p>
<p>This information isn't really gone. We just need to change our foreground color. Change the foreground color to white:</p>
<p><img src="http://www.adobe-flash-tutorials.info/mask_tutorial/white_color.jpg" alt="photoshop mask" height="177" width="57" /></p>
<p> </p>
<p>Now, paint over the part of the leg that is missing. Keep painting until the leg is back to normal:</p>
<p><img src="http://www.adobe-flash-tutorials.info/mask_tutorial/paint_back.jpg" alt="photoshop mask" height="382" width="453" /></p>
<p> </p>
<p>So, as you can see, when the foreground color is white we can bring back the deleted information, when the foreground color is black we can delete this information. When you're done the girl's background should be completely gone. Next, we'll make it look as if her feet are in the water. We do that by changing the foreground color back to black:</p>
<p><img src="http://www.adobe-flash-tutorials.info/mask_tutorial/black_color.jpg" alt="photoshop" height="295" width="47" /></p>
<p> </p>
<p>Next, change the brush settings. Change the Master Diameter to 14, the Harness to 0%, and the Opacity to 40%:</p>
<p><img src="http://www.adobe-flash-tutorials.info/mask_tutorial/feet_water.jpg" alt="photoshop mask" height="327" width="560" /></p>
<p> </p>
<p>Now, click the paint brush on her feet. When you're clicking the brush tool on her feet make sure you don't completely erase them. For instance, on her left foot you want to barely see it, as if it's under the water:</p>
<p><img src="http://www.adobe-flash-tutorials.info/mask_tutorial/feet_water2.jpg" alt="photoshop mask" height="360" width="436" /></p>
<p> </p>
<p>When you're done you should have a realistic image. In another tutorial I'll show you the keys to matching colors of pictures to add to the realism.</p>NonGeekBookshttp://www.blogger.com/profile/14829341076687504738noreply@blogger.com0tag:blogger.com,1999:blog-1431304454046203191.post-24201771546319172592010-03-09T19:05:00.000-08:002010-04-17T23:47:02.235-07:00Create a Twitter Background<br />
In this tutorial you'll learn how to add images to a background picture, mask images, and change colors of pictures. You'll also learn how to create a sidebar where you can put extra information regarding you or your business. The first step is to open Photoshop. Note: this tutorial can be done in most versions of Photoshop. After you open Photoshop, go to File, New. When the New window pops up, change the Name to Twitter Background, change the width to 2100 pixels, and the height should be 1600 pixels. Color Mode can be RGB. The resolution should be set to 72:<br />
<img alt="photoshop tutorial" height="349" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/size.jpg" width="540" />:<br />
<br />
Hit OK when you are done. Remember, the most common browser sizes are 1024 x 768 (36%), or higher (57%). So we made our image 2100 pixels wide to accommodate all the browser sizes.<br />
Next, thecanvas may be a bit large so we'll need to zoom out a bit. We do that by selecting the Zoom Tool:<br />
<img alt="zoom tools" height="266" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/zoom_too.jpg" width="63" /><br />
<br />
On your keyboard click on Alt and click the Zoom Tool on the canvas. Zoom out to about 25%. The canvas should now look like this:<br />
<img alt="canvas" height="392" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/canvas.jpg" width="540" /><br />
<br />
Now it will be easier to work in. Next, we'll open a picture. For this exercise I'm going to open a nice picture of butterflies and a blue sky. You can open any picture you like that you think would work well as a background picture. Go to File, Open. Next, find your background picture and select it. Your Photoshop work area should now have this picture along with the Twitter Background canvas:<br />
<img alt="photoshop tutorial" height="221" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/photoshop_canvas.jpg" width="540" /><br />
<br />
Select the Selection Tool:<br />
<img alt="photoshop tutorial" height="287" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/selection-tool.jpg" width="64" /><br />
<br />
Now, click on the picture you opened and, without letting go of your mouse button, drag this picture over to the Twitter Background canvas:<br />
<img alt="photoshop tutorial" height="451" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/drag_picture.jpg" width="580" /><br />
<br />
The picture may not be as large as the Twitter Background canvas, so we'll need to enlarge it. We do this by going to Edit, Transform, Scale (<strong>Ctrl + T</strong>):<br />
<img alt="photoshop tutorial" height="146" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/transform.jpg" width="451" /><br />
<br />
You should now see transform boxes around your image. Select a corner box:<br />
<img alt="photoshop tutorial" height="148" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/corner.jpg" width="214" /><br />
<br />
Next, hold down Shift on your keyboard and drag this corner box upward to enlarge the image (you hold down Shift to keep the proportions the same). Keep dragging the corner transform boxes until your picture fills the Twitter Background canvas:<br />
<img alt="Photoshop tutorial" height="409" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/enlarge.jpg" width="560" /><br />
<br />
Now we'll add our logo. If you want to use a sample logo, right-click on the image below and select <em>Save Image as...</em><br />
<img alt="logo" height="481" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/logo.jpg" width="220" /><br />
<br />
Open this logo into our Photoshop program. Then, drag it over to the Twitter Background canvas. Position it so that it's flush with the top left of the canvas:<br />
<img alt="photoshop" height="227" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/logo_top_left.jpg" width="260" /><br />
<br />
This logo's dimensions are 220 pixels wide, and 481 pixels high. When you are creating a Twitter Background you want to target the area at the top left of the image. The target area is within 220 pixels from the left edge and within 500 pixels from the top. This is the area that will probably be seen even on the smallest of monitors. This is a good image to drop into your Photoshop file just to use as a guide for the area you need to target. You can turn the visibility off when you're not using it. The visibility button is the little eye icon to the left of the layers:<br />
<img alt="photoshop" height="175" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/eye.jpg" width="238" /><br />
<br />
The next thing we'll do is add another image to the right side of the Twitter background. This is the image that will show up on most monitors. What we would like to do is to place a photograph into a circle on the right side of the background picture. Let's do that now. Select the Elliptical Tool (it's a sub-selection of the Rectangular Marquee Tool):<br />
<img alt="photoshop" height="175" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/circle.jpg" width="264" /><br />
<br />
Before we create the circle we need to make a new layer. In the Layers panel click on the Create a new layer button:<br />
<img alt="photoshop" height="299" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/newlayer.jpg" width="221" /><br />
<br />
This will create a new layer that we'll place our circle in. With the Elliptical Tool still selected, hold down Shift (to constrain the proportions) and click-and-drag a circle on the right side of the image:<br />
<img alt="photoshop" height="326" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/tool.jpg" width="357" /><br />
<br />
Next, we'll fill this area with color. Go to Edit, Fill. In the Fill window change Use to Black:<br />
<img alt="photoshop" height="250" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/fillBlack.jpg" width="342" /><br />
<br />
Hit OK when you are done. The circle should now be filled with black:<br />
<img alt="photoshop" height="336" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/circle_black.jpg" width="398" /><br />
<br />
You'll see the tiny outline (called dancing ants) around the shape. To get rid of that click on Ctrl + D. Next, we're going to use this shape as a mask for our picture. Next, open a picture that you would like to place inside this shape. For this exercise the picture we'll be placing into the shape is the image below:<br />
<img alt="photoshop" height="282" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/picture_shape.jpg" width="425" /><br />
<br />
Open the above image (or your own) in Photoshop. Next, drag it over to the Twitter Background canvas (remember to use the Selection Tool when dragging), Place it directly over the black circle:<br />
<img alt="photoshop" height="198" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/picture_circle.jpg" width="266" /><br />
<br />
Now we're going to mask the black circle to this picture. We do that by putting our cursor right over the line that separates both layers in the layers panel:<br />
<img alt="photoshop" height="248" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/layer_line.jpg" width="208" /><br />
<br />
Click on Alt and your cursor will change to a different icon:<br />
<img alt="photoshop" height="248" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/mask.jpg" width="214" /><br />
<br />
Click your mouse button and your picture should now be masked within the black shape:<br />
<img alt="photoshop" height="342" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/masked_shape.jpg" width="362" /><br />
<br />
The picture will be indented, which means it's being masked. If your picture is smaller than the circle, you'll need to enlarge it. First, make sure you select the picture's layer:<br />
<img alt="photoshop" height="373" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/layer4.jpg" width="210" /><br />
<br />
Next, go to Edit, Transform, and Scale. You'll see a transform box surrounding your picture:<br />
<img alt="" height="246" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/transform_box.jpg" width="271" /><br />
<br />
Select a corner, hold down Shift (to constrain the proportions), and drag upward to enlarge the picture. Keep enlarging the picture until it fills the black shape:<br />
<img alt="" height="312" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/picture_enlarge.jpg" width="389" /><br />
<br />
Hit Enter when finished. Next, we'll add a little flair to the circle. We do that by double-clicking on the black layer's thumbnail:<br />
<img alt="" height="257" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/black_layer.jpg" width="214" /><br />
<br />
This will open up the Layer Style window. Click on Drop Shadow. Change Opacity to 75%, Angle to 90, Distance to 12, Spread to 14, and Size should be 29:<br />
<img alt="" height="403" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/layer_style.jpg" width="540" /><br />
<br />
Next, click on Stroke. Select the color red. Change size to 3; opacity should be set to 100 and position should be Outside:<br />
<img alt="photoshop" height="446" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/stroke.jpg" width="604" /><br />
<br />
Finally, we'll add a Inner Shadow. A Inner Shadow simple creates a shadow <em>across the image</em> instead of behind the image. Click on Inner Shadow. Opacity should be 75%. Distance is 19, Choke is 0, and the size is 49:<br />
<img alt="photoshop" height="440" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/inner_shadow.jpg" width="598" /><br />
<br />
Hit OK when you are finished. The image should look much better now:<br />
<img alt="" height="299" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/image_shadow.jpg" width="347" /><br />
<br />
If we were to upload this image to Twitter it would look something like this:<br />
<img alt="" height="267" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/wide_iamge.jpg" width="560" /><br />
<br />
You'll notice that on a wide-screen browser you can see the masked picture on the right. Let's see what this image looks like on a smaller browser window:<br />
<img alt="photoshop" height="405" src="http://www.adobe-flash-tutorials.info/photoshop_tutorials/smaller_browser.jpg" width="560" /><br />
<br />
So even on a small browser we can still see the sidebar. When you're creating background images it's sometimes a good idea to scatter images across the background picture. You don't want it to look too busy, but you also want to utilize all the space. It's a sort of balancing act. If you're interested in learning more Photoshop tutorials you can click <a href="http://nongeekbooks.blogspot.com/p/photoshop-tutorials.html">here</a>.NonGeekBookshttp://www.blogger.com/profile/14829341076687504738noreply@blogger.com0tag:blogger.com,1999:blog-1431304454046203191.post-62619852778094726142010-03-08T19:39:00.000-08:002010-04-17T23:49:08.185-07:00Twitter Background<div style="color: red;">
<br />
<span style="font-size: large;"><b>How to create an effective Twitter Background
</b></span></div>
<br />
<b>#1</b><br />
<div style="color: red;">
<b>Create a Custom Design</b></div>
An effective Twitter background should be a reflection of who you are, or what your message is. When a person first goes on your Twitter account, the first thing they'll notice is your background. Before they read any text, they'll form judgements about who you are based on your background image.<br />
<br />
That's why picking a proper background, or creating your own custom background is so important. It's too easy to just use one of the default Twitter backgrounds. Instead, do a little work and custom design your own! There are many resources that have background images you can use.<br />
<br />
For instance, this site: <a href="http://www.sxc.hu/" target="_blank">www.sxc.hu</a> has several photos and illustrations you can use to create your background. Finding a background photo or illustration is just the beginning though. A good size to use for your backgrounds is 2100 x 1800. This size of picture will work well in just about any resolution setting.<br />
<br />
Also, when it comes to exporting your image from your graphics program, you have to remember to keep it under 800kb.<br />
<br />
<b>#2</b><br />
<div style="color: red;">
<b>Create a Sidebar</b></div>
When you start to create your background image for Twitter, you'll want to use the space on the far left to place more information about yourself or business. On many computers, especially laptops, only a thin strip of the backround image will be seen on the left, so you'll want to place your sidebar within this area to make sure it's seen by everybody. A good rule of thumb is to place the most important information within 230 pixels from the left edge, and no more than 500 pixels from the top.<br />
<br />
Below is the background image created for Non-Geek Tutorials Twitter account:<br />
<div style="text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://www.adobe-flash-tutorials.info/twitter_for_post.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.adobe-flash-tutorials.info/twitter_for_post.jpg" /></a></div>
<div style="text-align: left;">
<br /></div>
<br />
<br />
You'll notice that on the far left we have the website address, at the top left we have a sign declaring free tutorials, and below that a little fellow holding several program icons.<br />
<br />
So, by looking at this sidebar, you would be able to deduce that our company creates tutorials for Flash, After Effects, Photoshop and Twitter. Here is what this background looks like on Twitter with a small monitor:<br />
<img alt="Twitter Tutorial" height="313" src="http://www.adobe-flash-tutorials.info/twitter/twitter_sample2.jpg" width="520" /><br />
<br />
<br />
So even on a small monitor our website address is still visible. You'll notice that on smaller windows much of the background image is hidden. That's why the left side of the image is so important.<br />
<br />
<br />
<b>#3</b><br />
<div style="color: red;">
<b>Use All the Space!</b></div>
Some people like to create a small background image and then let it tile (repeat over and over again across the back of their Twitter page). That's probably not the best use of the screen's real estate. Why have just one message on your background image when you can have several? For instance, this is our background image on a 1920 x 1080 setting:<br />
<img height="254" src="http://www.adobe-flash-tutorials.info/twitter/tweet_space2.jpg" width="560" /><br />
<br />
<br />
<br />
If the background image was tiled, then the images on the left of the background would be repeated on the right of the screen. That usually doesn't look too good. So why not just use the right side of the image? Since it's nearly impossible to determine which parts of the background image are going to be covered by the main Twitter window, you need to place images and text in several different locations.<br />
<br />
As you can see in the above image, our website address is visible at the top right of the background image. At the bottom you can make out Non-Geek Tutorials on the golf ball. It's all about being creative and using all the space of your background image. <br />
<br />
<b>#4</b><br />
<div style="color: red;">
<b>Try, Try, and Try Again!</b></div>
The first time you upload your image you'll have to double-check it on at least three computers. Try testing it on a laptop, a desktop, and a wide-screen monitor. The main priority should be that the sidebar at the left is visible on the smallest of monitors.<br />
<br />
You will probably have to tweak your image a few times to get it just right. Once the sidebar is finished, you can then start tweaking the rest of the image. Keep experimenting with the picture until it looks good on even the widest of monitors. When you're finally done it's ready to be uploaded to your Twitter account. Remember to keep the final JPEG size under 800kb.<br />
<br />
If you have Photoshop and you're ready to create your own customized background, we've got a tutorial just for you! This tutorial will walk you through how to create the proper canvas, how to drop images onto it, and how to mask the images. The tutorial will then show you how to optimize the final image. You can click <a href="http://nongeekbooks.blogspot.com/2010/04/create-twitter-background.html">here</a> to go to the tutorial.NonGeekBookshttp://www.blogger.com/profile/14829341076687504738noreply@blogger.com0tag:blogger.com,1999:blog-1431304454046203191.post-66467548772251092772010-03-07T12:07:00.000-08:002010-04-22T08:28:30.339-07:00<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://adobe-flash-tutorials.info/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.adobe-flash-tutorials.info/Flash_ad.jpg" /></a></div>
<br />
<br />
<div style="text-align: center;">
<span style="font-size: large;"><b><span style="color: red;"> <span style="font-size: x-large;">BLOGGER TWEAKS</span></span></b></span><br />
<br />
<img alt="blogger_tweaks" height="278" src="http://www.adobe-flash-tutorials.info/blogger_header/blogger_tweaks.jpg" width="400" /></div>
<br />
<br />
<br />
<br />
<a href="http://nongeekbooks.blogspot.com/2010/03/centering-flash-header-removing.html#center">Centering the Header</a><br />
<a href="http://nongeekbooks.blogspot.com/2010/03/centering-flash-header-removing.html#nav_bar">Removing Navigation bar</a><br />
<a href="http://nongeekbooks.blogspot.com/2010/03/centering-flash-header-removing.html#html_title">Remove HTML title</a><br />
<a href="http://nongeekbooks.blogspot.com/2010/03/centering-flash-header-removing.html#background_color">Changing Background Color</a><br />
<a href="http://nongeekbooks.blogspot.com/2010/03/centering-flash-header-removing.html#back_picture">Adding Background Image</a><br />
<a href="http://nongeekbooks.blogspot.com/2010/03/centering-flash-header-removing.html#border_lines">Remove Border Lines</a><br />
<br />
When you first create your blogger template you'll notice a couple
things. First, the header may not be centered correctly, and there
may be border lines surrounding your site. Also, you may have
to change your background color. So there are a few tweaks you'll
have to take care of before your blog goes live.<br />
If you look below, I just added my Flash header (or JPEG image)
and I notice a few things that have to be tweaked. First, I don't
want the navigation bar at the top; second, I want to remove the
border lines, third, I want to remove the title, and fourth, I
need to change the background color which is white:<br />
<br />
<br />
<h1>
<a href="http://draft.blogger.com/post-edit.g?blogID=1431304454046203191&postID=6646754877225109277" name="background_color"></a><span style="color: black;">Changing the Background Color</span></h1>
First, let's change the background color. Since the background
color of my Flash header is black, then I'll make the blog background the same color. Click on the <b>Fonts and Colors</b> link:<br />
<img alt="blogger_background_color" height="186" src="http://www.adobe-flash-tutorials.info/blogger_header/blog_color.jpg" width="559" /><br />
<br />
Next, click on <b>Page Background Color</b>:<br />
<img height="190" src="http://www.adobe-flash-tutorials.info/blogger_header/blogger_background.jpg" width="587" /><br />
<br />
Select the color you would like for your background color. On
my blog, I chose black:<br />
<img height="145" src="http://www.adobe-flash-tutorials.info/blogger_header/blogger_black.jpg" width="352" /><br />
Next, click on <b>SAVE CHANGES</b>:<br />
<img height="138" src="http://www.adobe-flash-tutorials.info/blogger_header/save_changes.jpg" width="462" /><br />
<br />
<h1>
<a href="http://draft.blogger.com/post-edit.g?blogID=1431304454046203191&postID=6646754877225109277" name="border_lines"></a><span style="color: black;">Removing the Border Lines</span></h1>
Now your blog's background color will be updated. Next, let's
get rid of the border lines. Click on the <b>Edit HTML</b> link:<br />
<img alt="blogger_center_header" height="234" src="http://www.adobe-flash-tutorials.info/blogger_header/edit_html.jpg" width="563" /><br />
If you're working on a new blog (which I recommend so you can
experiment all you want) then you don't have to worry about backing
up your template. If you're working on an existing template you
should back it up first. Click on <b>Download Full Template</b>:<br />
<img alt="flash header blogger, flash blogger" height="116" src="http://www.adobe-flash-tutorials.info/blogger_header/download_blogger.jpg" width="637" /><br />
<br />
Save your template to your hard drive. Next, click on <b>Expand
Widget Template</b>:<br />
<img alt="flash header blogger, flash blogger" height="262" src="http://www.adobe-flash-tutorials.info/blogger_header/widget.jpg" width="736" /><br />
<br />
Now, scroll down until you see this piece of code (Ctrl + F will
bring up the search window. Copy and paste the code below into
the search window):<br />
#header-wrapper<br />
<br />
You should now see the code that we'll have to tweak:<br />
<img alt="blogger_flash" height="463" src="http://www.adobe-flash-tutorials.info/blogger_header/blogger_border.jpg" width="724" /><br />
<br />
Change the border pixel to 0 in both sets of code:<br />
<img alt="blogger_flash" height="463" src="http://www.adobe-flash-tutorials.info/blogger_header/blogger_border_0.jpg" width="724" /><br />
<br />
<h1>
<a href="http://draft.blogger.com/post-edit.g?blogID=1431304454046203191&postID=6646754877225109277" name="center"></a><span style="color: black;">Centering the Header</span></h1>
If you Preview your template the border lines should now be gone.
Keep the HTML window open for now. Next, we're going to center
the Flash header. The first thing we'll do is find the width of
your header. The header I uploaded is 991 px wide. I'm going to
change the #header-wrapper width to <b>991</b> (you'll enter whatever
the width of your header is):<br />
<br />
<img height="463" src="http://www.adobe-flash-tutorials.info/blogger_header/newpic.jpg" width="724" /><br />
Scroll down until you see <b>#outer-wrapper</b>. Change the width
to 991 (or whatever your header width is): <br />
<img alt="blogger_flash" height="431" src="http://www.adobe-flash-tutorials.info/blogger_header/main-wrapper.jpg" width="725" /><br />
Save your Template:<br />
<img alt="blogger_flash" height="138" src="http://www.adobe-flash-tutorials.info/blogger_header/save_changes.jpg" width="462" /><br />
<br />
<br />
<h1>
<a href="http://draft.blogger.com/post-edit.g?blogID=1431304454046203191&postID=6646754877225109277" name="nav_bar"></a><span style="color: black;">Removing the Navbar</span></h1>
Your Flash header should now be centered. Now, let's remove thenavbar at the top. In the HTML window scroll down until you see
<b>]]></b>:<br />
<img alt="blogger_flash" height="390" src="http://www.adobe-flash-tutorials.info/blogger_header/blogger_code.jpg" width="726" /><br />
<br />
Add this code right before <b>]]></b>:<br />
#navbar { display: none; }<br />
<br />
The new code should look like this:<br />
<img alt="blogger_flash" height="390" src="http://www.adobe-flash-tutorials.info/blogger_header/blogger_code2.jpg" width="726" /><br />
<br />
<h1>
<a href="http://draft.blogger.com/post-edit.g?blogID=1431304454046203191&postID=6646754877225109277" name="html_title"></a><span style="color: black;">Remove the Title</span></h1>
Preview your template to make sure the navbar is completely gone.
On my blog everything looks good except I need to remove the title:<br />
<img height="428" src="http://www.adobe-flash-tutorials.info/blogger_header/title_blogger.jpg" width="640" /><br />
<br />
You can either make the title the same color as the background,
which in this case is black, or you can upload an image to replace
the title; this image would be extremely small so the user wouldn't
see it. Let's do that now. Click on the <b>Layout</b> button:<br />
<img alt="flash_header" height="189" src="http://www.adobe-flash-tutorials.info/blogger_header/blogger_layout.jpg" width="549" /><br />
<br />
You should now be in the Layout settings window:<br />
<img alt="flash_header" height="424" src="http://www.adobe-flash-tutorials.info/blogger_header/layout.jpg" width="640" /><br />
<br />
Click on the <b>Edit</b> link of the Header section:<br />
<img height="326" src="http://www.adobe-flash-tutorials.info/blogger_header/blogger_edit.jpg" width="661" /><br />
<br />
The Configure Header window should now be open. Click on <b>Instead
of title and description</b>:<br />
<img height="599" src="http://www.adobe-flash-tutorials.info/blogger_header/header_configure.jpg" width="572" /><br />
<br />
Next, create an image that is 2 x 2 pixels. Make it the same
color as your background color, or make it the same color as the
background image (which we'll add next). Click on Browse and select
this image. The Configure Header window should now look like this:<br />
<img alt="blogger_flash" height="516" src="http://www.adobe-flash-tutorials.info/blogger_header/configure_blogger_2.jpg" width="572" /><br />
<br />
<h1>
<a href="http://draft.blogger.com/post-edit.g?blogID=1431304454046203191&postID=6646754877225109277" name="back_picture"></a><span style="color: black;">Adding a Background Image</span></h1>
Click on SAVE. If you view your blog now, the title should be
gone. Finally, we'll add our background image. If you're going
to add a background image you want to make it at least 2000 px
wide. If you have your own hosting account you simply need to
upload your JPEG image to the server. If you don't have your own
server then you can click <a href="http://freeuploadserver.blogspot.com/" target="_blank">here</a>.
At this link you'll find plenty of free servers where you can
upload your background picture. <br />
After you upload your background picture, take note of it's location
address. For instance, if I uploaded a JPEG named blogger_background.jp
to my nongeekbooks.com server. The web location for this JPEG
is:<br />
http://www.adobe-flash-tutorials.info/blogger_background.jpg<br />
<br />
So now I need to make this image my Blogger background. We do
that by clicking on the <b>Edit HTML</b> link:<br />
<img height="218" src="http://www.adobe-flash-tutorials.info/blogger_header/edit_html.jpg" width="547" /><br />
<br />
Next, click on <b>Expand Widget Templates</b>:<br />
<br />
<br />
Scroll down until you see the body tag:<br />
<img alt="flash_blogger" height="471" src="http://www.adobe-flash-tutorials.info/blogger_header/body_cod.jpg" width="723" /><img height="262" src="http://www.adobe-flash-tutorials.info/blogger_header/widget.jpg" width="736" /><br />
<br />
We're now going to add a snippet of code to this tag. Copy the
code below:<br />
background-image:url("http://www.adobe-flash-tutorials.info/blogger_background.jpg");
background-repeat:no-repeat;<br />
<br />
Next, click inside the code after the <b>$bgcolor</b>; code and
hit Return. There should now be an extra line space after this
code:<br />
<img height="471" src="http://www.adobe-flash-tutorials.info/blogger_header/blogger_space.jpg" width="723" /><br />
<br />
Paste in the JPEG code from above, into this new space:<br />
<img height="471" src="http://www.adobe-flash-tutorials.info/blogger_header/background_code.jpg" width="723" /><br />
<br />
When you're done save your template. View your blog. You should
now be seeing the background image. Remember, if you're not seing
the background image make sure the web location is correct. Here
is my final version with the background:<br />
<img height="440" src="http://www.adobe-flash-tutorials.info/blogger_header/blog_final.jpg" width="680" /><br />
<br />
Your blog should now have an exciting header! <br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">If
you are interested in creating all sorts of Flash files, from headers to
video games (without writing any code at all!) then go to our <a href="http://nongeekbooks.blogspot.com/p/master-flash-without-writing-code.html">E-Book
page</a>. Thousands of illustrations make learning Flash a breeze.</span><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://adobe-flash-tutorials.info/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.adobe-flash-tutorials.info/Flash_ad.jpg" /></a></div>NonGeekBookshttp://www.blogger.com/profile/14829341076687504738noreply@blogger.com0tag:blogger.com,1999:blog-1431304454046203191.post-45701890894069457822010-02-06T15:16:00.000-08:002010-04-18T00:14:01.402-07:00<div class="separator" style="clear: both; text-align: center;">
<a href="http://nongeekbooks.blogspot.com/p/master-flash-without-writing-code.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.adobe-flash-tutorials.info/Flash_ad.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<span style="font-size: large;"><b></b></span><span style="color: red;"><span style="font-size: large;"><b>ADDING FLASH TO BLOGGER</b></span></span><br />
<br />
<br />
A Flash header can really liven up your blog! Flash headers can be exciting, dynamic, full of colors and fun. They really make your blog come to life. An example of this can be found <a href="http://flash-header-example.blogspot.com/" target="_blank">here</a>. If you need help creating a Flash file we have a page (<a href="http://nongeekbooks.blogspot.com/p/master-flash-without-writing-code.html">click here</a>) devoted to learning Flash. Create anything from headers, to banners, to dynamic websites and video games without writing one line of code.<br />
<br />
<b>Note:</b> After finishing this tutorial you may still need to tweak your blog (center header, remove navbar and border lines, and inserting a background picture. You can go to this page by clicking <a href="http://nongeekbooks.blogspot.com/2010/03/centering-flash-header-removing.html">here</a>. <br />
<br />
I'll start with a new Blogger account and walk
you through the steps of adding a Flash header. First, open up Blogger:<br />
<img alt="flash header blogger, flash blogger" height="290" src="http://www.adobe-flash-tutorials.info/blogger_header/bloggerLayout.jpg" width="400" /><br />
<br />
As you can see this is a new account. The first thing we're going
to do is click on the <b>Edit HTML</b> link:<br />
<img alt="flash header blogger, flash blogger" height="166" src="http://www.adobe-flash-tutorials.info/blogger_header/edit_html.jpg" width="400" /><br />
If you're working on a new blog (which I recommend so you can
experiment all you want) then you don't have to worry about backing
up your template. If you're working on an existing template you
should back it up first. Click on <b>Download Full Template</b>:<br />
<img alt="flash header blogger, flash blogger" height="116" src="http://www.adobe-flash-tutorials.info/blogger_header/download_blogger.jpg" width="637" /><br />
<br />
Save your template to your hard drive. Next, click on <b>Expand
Widget Template</b>:<br />
<img alt="flash header blogger, flash blogger" height="262" src="http://www.adobe-flash-tutorials.info/blogger_header/widget.jpg" width="736" /><br />
<br />
<br />
Scroll down until you see this line of code (<b>Tip</b>: if you're
on Firefox hit <b>Ctrl</b> + <b>F</b>; then type in <b>maxwidgets</b>.
Firefox will automatically take you to the code you see below):<br />
<img alt="flash header blogger, flash blogger" height="343" src="http://www.adobe-flash-tutorials.info/blogger_header/maxwidgets.jpg" width="620" /><br />
<br />
Change <b>maxwidgets</b> to '2' and <b>showaddelement</b> to
'yes':<br />
<img alt="flash header blogger, flash blogger" height="343" src="http://www.adobe-flash-tutorials.info/blogger_header/maxwidgets2.jpg" width="620" /><br />
<br />
Save the template:<br />
<img alt="flash header blogger, flash blogger" height="171" src="http://www.adobe-flash-tutorials.info/blogger_header/save_template.jpg" width="620" /><br />
<br />
Next, click on the <b>Page Elements</b> link:<br />
<img alt="flash header blogger, flash blogger" height="155" src="http://www.adobe-flash-tutorials.info/blogger_header/page_elements.jpg" width="489" /><br />
<br />
You should now see <b>Add a Gadget</b> in the Header section:<br />
<br />
<br />
<img alt="flash header blogger, flash blogger" height="489" src="http://www.adobe-flash-tutorials.info/blogger_header/add_gadget.jpg" width="620" /><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://nongeekbooks.blogspot.com/p/master-flash-without-writing-code.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.adobe-flash-tutorials.info/Flash_ad.jpg" /></a></div>
<br />
<br />
<br />
Click this link and you should see the <b>Add a Gadget </b>window:<br />
<img alt="flash header blogger, flash blogger" height="682" src="http://www.adobe-flash-tutorials.info/blogger_header/add_gadget_window%5B.jpg" width="583" /><br />
<br />
Click on <b>HTML/JavaScript</b>:<br />
<img alt="flash header blogger, flash blogger" height="123" src="http://www.adobe-flash-tutorials.info/blogger_header/javascript.jpg" width="442" /><br />
<br />
Copy the following code and paste it into the Content window:<br />
<object width="991" height="708"><br />
<param value="flash_header.swf" name="movie"/><br />
<embed width="991" src="http://nongeekbooks.com/flash_header.swf"
height="708"><br />
</embed><br />
</object><br />
<br />
The Content window should now look like this:<br />
<img alt="flash header blogger, flash blogger" height="683" src="http://www.adobe-flash-tutorials.info/blogger_header/configure.jpg" width="580" /><br />
<br />
On the third line you'll see that the Flash file is located at:
www.nongeektutorials.com/flash_header.swf. So what I have done is
create a Flash file, then I uploaded it to the nongeekbooks.com
server. The name of the flash file is: flash_header.swf. If you
have your own hosting account you simply need to upload your Flash
file to the server. If you don't have your own server then you
can click <a href="http://freeuploadserver.blogspot.com/" target="_blank">here</a>.
At this link you'll find plenty of free servers where you can
upload your Flash file. <br />
Also, when you create your own Flash file, your width and height
will probably be different than mine. So make sure you change
the dimensions on the code:<br />
<img alt="flash header blogger, flash blogger" height="465" src="http://www.adobe-flash-tutorials.info/blogger_header/dimensions.jpg" width="531" /><br />
You'll also have to edit the web address, and name of the Flash
file:<br />
<img alt="flash header blogger, flash blogger" height="465" src="http://www.adobe-flash-tutorials.info/blogger_header/blogger_change_name.jpg" width="531" /><br />
When you're done click on <b>SAVE</b>:<br />
<img alt="flash header blogger, flash blogger" height="150" src="http://www.adobe-flash-tutorials.info/blogger_header/SAVE.jpg" width="531" /><br />
<br />
Now, click on the <b>PREVIEW</b> button so you can view the blog
(if you used the above code you'll be seeing my sample Flash header):<br />
<img height="198" src="http://www.adobe-flash-tutorials.info/blogger_header/blogger_preview.jpg" width="620" /><br />
<br />
You should now see the sample Flash header above your blog:<br />
<img alt="flash header blogger, flash blogger" height="534" src="http://www.adobe-flash-tutorials.info/blogger_header/blogger_sample.jpg" width="640" /><br />
<br />
<b>Note</b>: Your template may need some final tweaking, such
as removing border lines, changing background color, centering
the header, removing the top navigation bar, etc.. To learn how
to do all this click <a href="http://draft.blogger.com/center_http://www.adobe-flash-tutorials.info/blogger_header.htm">here</a>.<br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">If
you are interested in creating all sorts of Flash files, from headers to
video games (without writing any code at all!) then go to our <a href="http://nongeekbooks.blogspot.com/p/master-flash-without-writing-code.html">E-Book
page</a>. Thousands of illustrations make learning Flash a breeze.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://nongeekbooks.blogspot.com/p/master-flash-without-writing-code.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.adobe-flash-tutorials.info/Flash_ad.jpg" /></a></div>
<br />NonGeekBookshttp://www.blogger.com/profile/14829341076687504738noreply@blogger.com0tag:blogger.com,1999:blog-1431304454046203191.post-65325285227473537392010-02-06T13:18:00.000-08:002010-04-22T08:31:40.499-07:00<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://adobe-flash-tutorials.info/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.adobe-flash-tutorials.info/Flash_ad.jpg" /></a></div>
<br />
<br />
<span style="font-size: x-large;"><b style="color: red;">Flash Looping Background </b></span></div>
<br />
<div style="text-align: center;">
<span style="font-size: large;"><span style="font-size: x-small;"><span style="color: red;"><span style="color: black;">download files </span></span></span><b style="color: red;"><br /></b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.adobe-flash-tutorials.info/flash_tutorials/Flash_looping_background.zip" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.adobe-flash-tutorials.info/download_blog.jpg" /></a></div>
<div style="text-align: center;">
<br /></div>
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Have
you ever</span><span style="font-family: "Times New Roman"; font-size: 12pt;"> seen those Flash Ads that have a moving background
that is on a perpetual loop? Like a plane flying through clouds,
where the clouds loop continuously making the plane appear to
be soaring through the sky. In this exercise we'll create a looping
background as a superhero flies through the sky.</span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">After you download the files open the FLA file. In the library we have four images.
A smoke image, the superhero, and two different cloud images.
So the first thing we'll do is create the moving cloud background.
Rename <b>Layer 1</b>: <b>Clouds</b>. Then, drag <span class="SpellE"><b>Clouds.jpg</b></span>
over to the stage. We want the right edge of the Cloud image to
be flush with the right edge of the stage. Open the Align panel
and select <b>Align right edge</b>, <b>Align top edge</b> and
select <span class="GramE"><b>To</b></span><b> stage</b>:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="151" src="http://www.adobe-flash-tutorials.info/flash_looping/image003.jpg" v:shapes="_x0000_i1026" width="304" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">The
cloud image should now be flush with the right edge of the stage.
Select this image and convert it to a <b>Movie clip</b>. Name
it <b>Clouds Movie</b>:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="135" src="http://www.adobe-flash-tutorials.info/flash_looping/image004.jpg" v:shapes="_x0000_i1027" width="414" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Hit
<b>OK</b> and close. Double-click on this new Movie clip to enter
its editing stage. Now we're going to make two copies of the cloud
image for the background animation. Before we copy this cloud
image we need to make it a graphic. Select the cloud image on
the stage and go to <b>Modify</b>, <b>Convert to Symbol</b></span><span style="font-family: "Times New Roman"; font-size: 12pt;">; in the <b>Convert to
Symbol </b>box select <b>Graphic </b>for <b>Type</b> and type
<b>Cloud Symbol </b>for the <b>Name</b>. Hit <b>OK</b> when you're
done.</span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">The
reason you convert images to graphics before you copy them, is
because Flash only has to download the cloud graphic once and
all of its copies will download instantly and won't add to the
overall download size.</span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Select
this cloud graphic and go to <b>Edit</b>, <b>Copy</b>. Select
<b>Edit</b>, and <b>Paste in Place</b>. Click on this new copy
and go to <b>Modify</b>, <b>Transform</b>, <span class="GramE"><b>Flip</b></span><b>
Horizontal</b>.</span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">This
will flip your picture. Drag this new symbol to the left. You'll
want the right side of this copied symbol to <i>line up with the
left side of the original cloud image</i>. Zoom in if you have
to, to make sure all edges line up perfectly:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="216" src="http://www.adobe-flash-tutorials.info/flash_looping/image006.jpg" v:shapes="_x0000_i1028" width="400" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Since
we flipped the image horizontally the two symbols now connect
seamlessly. Select the original cloud symbol and go to <b>Edit</b>,
<b>Copy</b>. Next, go to <b>Edit</b>, <b>Paste in Place</b>. </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Drag
this third symbol all the way left until its right edge lines
up with the second symbol's left edge. You should now have a really
wide cloud image made up of three copies of the <b>Cloud Symbol</b>:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="35" src="http://www.adobe-flash-tutorials.info/flash_looping/image008.jpg" v:shapes="_x0000_i1029" width="663" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">We're
going to mark the right edge of the stage with the Ruler</span><span style="font-family: "Times New Roman"; font-size: 12pt;"> Tool. Go to <b>View</b>, <b>Rulers</b>:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="240" src="http://www.adobe-flash-tutorials.info/flash_looping/image010.jpg" v:shapes="_x0000_i1030" width="327" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">You
should now see rulers at the top and to the left of the stage.
<i>Click-and-hold</i> on the Ruler</span><span style="font-family: "Times New Roman"; font-size: 12pt;"> at the left; <i>click-and-drag</i>
a Ruler line to the right until it's lined up with the right edge
of the stage:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="376" src="http://www.adobe-flash-tutorials.info/flash_looping/image012.jpg" v:shapes="_x0000_i1031" width="387" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Your
line should now be lined up with the right edge of the stage. Create
a new keyframe on frame <b>140</b> of <b>Layer 1</b>; you should
now see the borders of the three images (they'll show up as blue
lines):</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="125" src="http://www.adobe-flash-tutorials.info/flash_looping/image014.jpg" v:shapes="_x0000_i1032" width="663" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">You
may have to zoom out to <b>50%</b>. Hold SHIFT down and <i>click-and-hold</i>
on the right edge of the leftmost cloud; drag the entire cloud
image to the right so that the right edge of the leftmost cloud
image is flush with the ruler</span><span style="font-family: "Times New Roman"; font-size: 12pt;"> line. Your stage should
now look like this:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="192" src="http://www.adobe-flash-tutorials.info/flash_looping/image015.jpg" v:shapes="_x0000_i1033" width="597" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Select
any frame between <b>1</b> and <b>140</b> and insert a Motion
Tween</span><span style="font-family: "Times New Roman"; font-size: 12pt;">. Test your movie by going to <b>Control, Test Movie (Ctrl + Enter)</b>. The
cloud animation should be seamless as it loops continuously. So
now let's add the superhero!</span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Go
back to Scene 1. Create a new layer and name it <b>Superhero</b>.
Turn off the visibility of <b>Layer 1</b> so we can see the stage:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="91" src="http://www.adobe-flash-tutorials.info/flash_looping/image016.jpg" v:shapes="_x0000_i1034" width="233" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Drag
the image <span class="SpellE"><b>flying.png</b></span> to the center
of the stage from the library:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="140" src="http://www.adobe-flash-tutorials.info/flash_looping/image017.jpg" v:shapes="_x0000_i1035" width="201" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Select
this new image and convert it to a Movie clip (<b>Modify, Convert
to Symbol</b></span><span style="font-family: "Times New Roman"; font-size: 12pt;">). Name it <b>Superhero</b>.
Hit <b>OK</b> when you're finished. Double-click on this Movie
clip to enter its editing stage. We're now going to animate the
superhero. Create a keyframe on frame <b>200</b>; now, select
any frame between the two keyframes and insert a Motion Tween</span><span style="font-family: "Times New Roman"; font-size: 12pt;">. Insert a keyframe on frame <b>100</b>. Select the
superhero on the stage and move him to the left side of the stage:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="210" src="http://www.adobe-flash-tutorials.info/flash_looping/image019.jpg" v:shapes="_x0000_i1036" width="320" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">If
you want, you can drag him down slightly. So now we're going to
add the propeller animation and the jetpack smoke. If we add these
elements on this timeline we'll have to animate them so that they
follow the superhero, which probably won't work. So the easy way
to do it is to put these elements <i>within the superhero symbol</i>.
Let's do that now. Go to frame <b>1</b> and double-click on the
superhero symbol on the stage. You should now be in its editing
stage. </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Create
a new layer and name it <b>Propeller</b>. Zoom into the stage
about 800% or until you have a close view of the superhero's propeller:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="248" src="http://www.adobe-flash-tutorials.info/flash_looping/image021.jpg" v:shapes="_x0000_i1037" width="514" /> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Click
on the <b>Eyedropper Tool</b>:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="178" src="http://www.adobe-flash-tutorials.info/flash_looping/image022.jpg" v:shapes="_x0000_i1038" width="65" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Click
on the superhero's propeller:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="231" src="http://www.adobe-flash-tutorials.info/flash_looping/image023.jpg" v:shapes="_x0000_i1039" width="199" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">You
should now have the propeller's color as the <b>Fill color</b>.
Select the <b>Rectangle Tool</b></span><span style="font-family: "Times New Roman"; font-size: 12pt;"> and turn off the <b>Stroke color</b>.
Create a rectangle shape over the superhero's existing propeller:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="251" src="http://www.adobe-flash-tutorials.info/flash_looping/image025.jpg" v:shapes="_x0000_i1040" width="236" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">So
now we're going to animate this propeller. Select this new shape
and convert it to a Movie clip (<b>Modify, Convert to Symbol</b></span><span style="font-family: "Times New Roman"; font-size: 12pt;">). Name it <b>Propeller Movie</b>. When
you're done double-click on this new Movie clip to enter its editing
stage. Create a keyframe on frame <b>20</b>; next, select any
frame between the two keyframes and insert a Motion Tween</span><span style="font-family: "Times New Roman"; font-size: 12pt;">. </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Now,
select the first keyframe. Open the Properties panel</span><span style="font-family: "Times New Roman"; font-size: 12pt;">. Change <b>Rotate</b></span><span style="font-family: "Times New Roman"; font-size: 12pt;"> to <b>CW</b> and type
<b>6</b> for <b>times</b>:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="136" src="http://www.adobe-flash-tutorials.info/flash_looping/image026.jpg" v:shapes="_x0000_i1041" width="383" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">If
you grab your timeline needle and scrub the timeline you'll see
that your propeller is now spinning. It should do 6 full rotations
within the 20 frames. Click on the <b>Back</b> button above the
timeline/stage:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="103" src="http://www.adobe-flash-tutorials.info/flash_looping/image027.jpg" v:shapes="_x0000_i1042" width="113" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">This
will take you back to the superhero image stage. We'll now add
the smoke to the superhero's jetpack. Create a new layer and name
it <b>Smoke</b>. Next, drag <span class="SpellE"><b>smoke.png</b></span>
over to the stage. Position this image over the superhero's jetpack.
Next, convert this image to a Movie clip (<b>Modify, Convert to
Symbol</b></span><span style="font-family: "Times New Roman"; font-size: 12pt;">). Name this new Movie
clip <b>Smoke</b>. Double-click this Movie clip to enter its editing
stage.</span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Select
the smoke image on the stage and convert it to a graphic (<b>Modify,
Convert to <span class="GramE">Symbol<span style="font-weight: normal;"> )</span></span></b>. Name this new symbol <b>Smoke Graphic </b>and hit
<b>OK</b>. We're converting this image to a graphic so we can
add effects to it.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://nongeekbooks.blogspot.com/p/master-flash-without-writing-code.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.adobe-flash-tutorials.info/Flash_ad.jpg" /></a></div>
<br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">With
this new symbol selected, open the Properties panel</span><span style="font-family: "Times New Roman"; font-size: 12pt;">. Change <b>Color</b>
to <b>Brightness</b></span><span style="font-family: "Times New Roman"; font-size: 12pt;"> and the <b>percentage</b>
to <b>-100%:</b></span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="112" src="http://www.adobe-flash-tutorials.info/flash_looping/image028.jpg" v:shapes="_x0000_i1043" width="298" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">The
smoke symbol should now be darker: </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="218" src="http://www.adobe-flash-tutorials.info/flash_looping/image030.jpg" v:shapes="_x0000_i1044" width="325" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Select
the smoke image and grab the <b>Free Transform Tool</b></span><span style="font-family: "Times New Roman"; font-size: 12pt;">:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="157" src="http://www.adobe-flash-tutorials.info/flash_looping/image031.jpg" v:shapes="_x0000_i1045" width="66" /> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">You
should now see a bounding box surrounding your smoke image:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="209" src="http://www.adobe-flash-tutorials.info/flash_looping/image033.jpg" v:shapes="_x0000_i1046" width="274" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Grab
a corner of the bounding box, hold down SHIFT, and push inward
until the smoke shrinks to about 30% of its size:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="158" src="http://www.adobe-flash-tutorials.info/flash_looping/image034.jpg" v:shapes="_x0000_i1047" width="260" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Create
a new keyframe on frame <b>40</b>. Select any frame between 1
and 40 and insert a Motion Tween</span><span style="font-family: "Times New Roman"; font-size: 12pt;">. Select frame <b>40</b>
then select the smoke symbol on the stage. Select the <b>Free
Transform Tool</b></span><span style="font-family: "Times New Roman"; font-size: 12pt;"> and enlarge the smoke
image about 400%:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="289" src="http://www.adobe-flash-tutorials.info/flash_looping/image036.jpg" v:shapes="_x0000_i1048" width="300" /> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Drag
this smoke image so that's completely off the stage on the right
side:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="265" src="http://www.adobe-flash-tutorials.info/flash_looping/image038.jpg" v:shapes="_x0000_i1049" width="663" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">We
now need to take down the alpha of this smoke image. Since we
already have one effect on this smoke image (Brightness -100)
we'll have to use the <span class="GramE"><b>Advanced</b></span> setting to apply another effect. Change <b>Color
</b>to <span class="GramE"><b>Advanced</b></span>. Then, click on
the <b>Settings...</b> button:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="109" src="http://www.adobe-flash-tutorials.info/flash_looping/image039.jpg" v:shapes="_x0000_i1050" width="290" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">In
the <b>Advanced Effect</b></span><span style="font-family: "Times New Roman"; font-size: 12pt;"> box take the <b>Alpha</b>
down to <b>0</b>:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="226" src="http://www.adobe-flash-tutorials.info/flash_looping/image040.jpg" v:shapes="_x0000_i1051" width="261" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Hit
<b>OK</b>. Your smoke image should now be transparent. If you
play the timeline you'll see the smoke gradually get larger until
it fades away. </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Create
a new layer and name it <b>Smoke 2</b>. Create a keyframe on frame
<b>10</b>. Click on the name of the first layer: <b>Layer 1</b>.
This will highlight all the frames of this layer:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="88" src="http://www.adobe-flash-tutorials.info/flash_looping/image041.jpg" v:shapes="_x0000_i1052" width="541" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Next,
go to <b>Edit</b>, <b>Timeline</b>, <span class="GramE"><b>Copy</b></span><b>
Frames</b>. This will copy all the frames of <b>Layer 1</b>. Select
the keyframe on frame <b>10</b> of <b>Smoke 2</b>. Go to <b>Edit</b>,
<b>Timeline</b>, <b>Paste Frames</b>. You should now have a copy
of all the frames of <b>Layer 1</b> on the layer <b>Smoke 2</b>:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="80" src="http://www.adobe-flash-tutorials.info/flash_looping/image043.jpg" v:shapes="_x0000_i1053" width="663" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Create
a new layer and name it <b>Smoke 3</b>. Create a keyframe on frame
<b>15</b>. Select this keyframe and go to <b>Edit</b>, <b>Timeline</b>,
<span class="GramE"><b>Paste</b></span><b> Frames</b>:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="122" src="http://www.adobe-flash-tutorials.info/flash_looping/image044.jpg" v:shapes="_x0000_i1054" width="666" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Test
the movie. The animation looks pretty good but the background
clouds are a bit too dark; it's hard to see the propeller spinning
and the smoke. We need to make the clouds less dark. </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Go
back to Scene 1. Turn on the visibility for <b>Layer 1</b>. Select
the cloud symbol on the stage. Open the Properties panel</span><span style="font-family: "Times New Roman"; font-size: 12pt;"> and change <b>Color</b> to <b>Brightness</b> and
change the <b>percentage</b> to <b>39</b>:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="109" src="http://www.adobe-flash-tutorials.info/flash_looping/image045.jpg" v:shapes="_x0000_i1055" width="281" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">We're
now able to see the superhero much better. So we're almost done.
We just need to add one more cloud element. Before we do that
we need to turn the visibility off for <b>Layer 1</b> so we can
see the stage. </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Create
a new layer and name it <b>Cloud</b>. Make sure this layer is
above the <b>Superhero</b> layer:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="105" src="http://www.adobe-flash-tutorials.info/flash_looping/image046.jpg" v:shapes="_x0000_i1056" width="245" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Drag
the image <span class="SpellE"><b>clouds.png</b></span> from the
library to the left of the stage:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="265" src="http://www.adobe-flash-tutorials.info/flash_looping/image047.jpg" v:shapes="_x0000_i1057" width="558" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">With
this image still selected convert it to a Movie clip. Name it
<b>Cloud Foreground</b>:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="140" src="http://www.adobe-flash-tutorials.info/flash_looping/image048.jpg" v:shapes="_x0000_i1058" width="414" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Hit
<b>OK</b> when you're done. Double-click on this new Movie clip
to enter its editing stage. Grab the <b>Free Transform Tool</b></span><span style="font-family: "Times New Roman"; font-size: 12pt;"> and enlarge your cloud
about 100%:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="239" src="http://www.adobe-flash-tutorials.info/flash_looping/image050.jpg" v:shapes="_x0000_i1059" width="440" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Let's
make this cloud a little <span class="GramE">more blue</span> and
take the alpha down. Remember, if you want to add more than one
effect you have to use the <span class="GramE"><b>Advanced</b></span> setting. Let's do that now. Before we can add
the effects, however, we need to make this cloud a symbol. Convert
this cloud image to a graphic and name it <b>Cloud Graphic</b>.
Hit <b>OK</b> when you're finished.</span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">With
the new symbol still selected open the Properties panel</span><span style="font-family: "Times New Roman"; font-size: 12pt;">. Change <b>Color</b> to
<b>Advanced </b>and click on the <b>Settings...</b> button. Change
the <b>Alpha</b> to <b>60%</b> and increase the <b>Blue</b> to
<b>122</b>:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="216" src="http://www.adobe-flash-tutorials.info/flash_looping/image052.jpg" v:shapes="_x0000_i1060" width="247" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Hit
<b>OK</b> when you're finished. Now we're ready to animate the
cloud. Create a keyframe on frame <b>30</b>. Select any frame
between the keyframes and insert a Motion Tween</span><span style="font-family: "Times New Roman"; font-size: 12pt;">. Next, drag the cloud symbol to the right until
it's completely off the stage:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="184" src="http://www.adobe-flash-tutorials.info/flash_looping/image054.jpg" v:shapes="_x0000_i1061" width="427" /> </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"> </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Create
a new layer and name it <b>Cloud Copy</b>. Create a keyframe on
frame <b>100</b> of this new layer. Click on the <b>Layer 1</b>
name to highlight its frames; go to <b>Edit</b>, <b>Timeline</b>,
<span class="GramE"><b>Copy</b></span><b> Frames</b>. Select frame
<b>100</b> of the <b>Cloud Copy</b> layer and go to <b>Edit</b>,
<b>Timeline</b>, <span class="GramE"><b>Paste</b></span><b> Frames</b>.
Since this is a copy then we should try to alter it slightly. </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Select
the <b>Free Transform</b> <b>Tool</b></span><span style="font-family: "Times New Roman"; font-size: 12pt;"> and enlarge the cloud
about 25%. You may have to drag the cloud to the left to make
sure that parts of the cloud aren't on the stage.</span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Open
the Properties panel</span><span style="font-family: "Times New Roman"; font-size: 12pt;"> and click on the <b>Settings...</b> button. Take
the <b>Alpha</b> down to <b>40%</b>:</span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"></span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"></span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"></span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"></span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"></span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><img alt="flash tutorials, free flash tutorials, photoshop tutorials, flash actionscript, flash actionscript tutorials" height="224" src="http://www.adobe-flash-tutorials.info/flash_looping/image055.jpg" v:shapes="_x0000_i1062" width="261" /></span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Hit
<b>OK</b>. Click on the second keyframe of this layer. Select
the cloud symbol on the stage. Grab the <b>Free Transform Tool</b></span><span style="font-family: "Times New Roman"; font-size: 12pt;"> and enlarge this symbol
also. Drag it slightly right to make sure it's completely off
the stage. </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">With
this symbol selected click on the <b>Settings...</b> button in
the Properties panel</span><span style="font-family: "Times New Roman"; font-size: 12pt;"> and change the <b>Alpha</b>
to <b>40%</b>. Since this cloud is a little larger it should be
moving at a slightly different speed. Click the second keyframe
of this layer; select this keyframe again and drag it to the right
about 10 frames. </span><br />
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"></span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">Insert
a frame on frame <b>200</b> of this layer. Test your movie. Looks
pretty good! You can always tweak this animation by adding more
smoke clouds, slowing down the background cloud animation by
lengthening the animation, and playing around with the superhero's
flight path. Feel free to get creative! </span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><br /></span><br />
<span style="font-family: "Times New Roman"; font-size: 12pt;">If you are interested in creating all sorts of Flash files, from headers to video games (without writing any code at all!) then go to our <a href="http://nongeekbooks.blogspot.com/p/master-flash-without-writing-code.html">E-Book page</a>. Thousands of illustrations make learning Flash a breeze.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://adobe-flash-tutorials.info/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.adobe-flash-tutorials.info/Flash_ad.jpg" /></a></div>
<br />
<span style="font-family: "Times New Roman"; font-size: 12pt;"><br /></span><br />
<br />
<div align="center">
<br /></div>
<div align="center">
</div>NonGeekBookshttp://www.blogger.com/profile/14829341076687504738noreply@blogger.com0