So yeah, all that coming soon.

flame effect

This tutorial will show you how to make the flaming text effect shown here on the right. It’s quite versatile and can be used over any sort of shape/image to create all sorts of different effects.

Ok, well let’s get going…

document settings

1. Setting Flash up
First thing we need to do is set up our document. To match the original I’ve used 300px width and 150px height. I’ve also set the background to black. Make sure to change your fill and ink colours to white before you start.

go crazy

2. Time for some drawing
You can be as random as you like here, but try and keep it in a circlular area (we’re going to rotate it later). There’s no need to copy mine exactly, just a rough estimation should work just as well. Once you’re happy, select the shape and hit F8 to create a new symbol. Make sure it’s set to MovieClip, the registration point is in the middle and call it “theShape”.

rotating

3. Rotation animation
With your shape roughly in the middle of your stage, select it and hit F8 again. This time call it “spinner” and also give it the instance name of “spinner”. Now double click the shape to go back inside the spinner MovieClip. Place a keyframe on frame 300, then go back to frame 1, right click on the frame and choose classic tweening. In the frame properties panel, under tweening set the Rotate property to CW (clock wise) and make sure it’s set to x1. Hit return to test. If it’s working fine and you’re happy then select the 1st frame again, right click and choose “select all frames”, once selected, right click again and choose “copy frames”. Now add a new Layer, right click on the first frame and paste those frames into it. You will have to go to the end of timeline and delete the extra 300 frames that Flash decides to put on. When you’ve done that go back to the 1st frame and select it. In the properties just change the rotation property to CCW (counter clock wise). The last thing to do (just to add a bit of randomness) is to select the shape on frame 1 and 300 and do a modify/transform/flip vertical on it. Test again and if all looks cool then go back to scene 1 with your spinner clip in it.

using the gradient transform tool

4. Adding some masking
Select the spinner clip and hit F8 to make it a movieClip and call it spinMask. Go back into spinMask and create a new layer above your spinner clip. Now we’re going to create a gradient mask. On the new layer draw a big ellipse over the whole stage. You can always adjust this later. Fill it with a radial gradient of white to black (with white in the centre), and make the black transparent using the color panel . Use the fill transform tool to make it look like the image on the right. When you’re happy, select it, hit F8 to create a movieClip and call it gradMask and also give it the instance name of gradMask. Normal masking won’t work with gradient masks so we have to use a bit of code to make the magic happen. Create a new layer above your new gradient mask (gradMask) and label it “actions”. Insert the following code into this 1st frame.

gradMask.cacheAsBitmap=true;
spinner.cacheAsBitmap=true;
gradMask.setMask(spinner);

use these settings

5. Time for some Text
Go back to the main scene. You should have your spinMask on frame 1. Make sure it has the same instance name. Create a new layer and make some text. It can be whatever you like but use a light colour. I’m using white. I also find the narrower fonts tend to look better. With the text still selected add a glow filter using the settings shown on the right. Blur:5, Strength:100%, Color: #FF0000 and Inner glow ticked. Now hit f8 to turn it into a movieClip and call it flameText (instance name as well).

Make sure you’re on scene 1 still and select the new flameText movieClip. We’re going to add a few more glow effects to it.
First off an outerglow using Blur: 14px, Strength: 460%, Quality: High and Color: #FF6600. Finally add an inner glow using Blur: 14px, Strength: 106%, Color: #CC0000 and Inner glow ticked. See image for screenshot.

final text filters

You can of course experiment with different colours and blur amounts, in fact depending on the font used you might have to. Ideally you want the stems of the characters to be glowing white. So, these settings are best for a flame effect but please muck about with them and see what else you can come up with.
Now select your spinMask clip and under the display tab change the Blending mode to Screen. Still with the spinMask selected add a new Blur filter using Blur: 30px. You can play around with the blur to get something that you like. We’re nearly there!

Here is a link to the FLA.

Empire on Patrol

This is a Star Wars inspired desktop wallpaper I made for my dual view set up. It turned out ok so I thought I would share it with the world. The ships are not mine (although I have permission to use them) but everything else is.
The full size image is 3360×1050. If anyone would like different resolutions then let me know and I will recomp/resize.

To see the full size image please click here.

Tie fighter render by Mike Verta – www.mikeverta.com/
Destroyer (I have no idea what it’s real name is) is by Ansel Hsiao – www.fractalsponge.net/

H1 image replacement

First create your H1 tag on your page. Remember to be as descriptive as you can be (this is the one of the main things that search engines pick up on).

<h1>Your site description goes in here</h1>

Let’s say for example that you would like your company logo in here, and you need it to appear on every page. We will need to add the image we want and hide the text using CSS. You will also need to add height and width values to match the size of the image you are using. To hide the text we use a text indent of -9999em which put’s it way off the screen. You’ll notice that if you put 9999em instead your text is still hidden, but your page is now about 6 feet wide.

Here’s the CSS:

h1{
height: 150px; /*change these to match your image size*/
width: 400px;
background-image: url('your_logo_goes_here');
background-repeat: no-repeat;
background-position: left top;
text-indent: -9999em;
}

disable styles

The text is hidden yet the search engines will easily find it at the top of your page (search engines completely disregard all CSS styles). A good way to test this (and other SEO techniques) is to disable all CSS using the web developer toolbar on Firefox. This will give you a visual overview of what the search engine will see, and in what order.

A lot of sites have a link on their logo and header which take you back to the homepage and so it would be nice if we could do that and still use the H1. Adding the link to the H1 is easy enough, but it’s wrapped around the text that is indented off the screen so it can’t be clicked.

Here’s the HTML mark up…

<h1><a href="#">Here is my H1 image and link test</a></h1>


and the CSS…

h1{
background-image:url(images/tile.png);
height: 20px;
width: 200px;
text-indent: -9999em;
margin: 50px;
}
h1 a{
padding-right: 9999em;
display: inline-block;
width: 200px;
height: 20px;
}


That works but it’s got a bit of a problem. The link stretches all the way to the left. If you change the link to display: block; then that stretches all the way to the right. Ok if your logo is right up to one edge but still not a great solution.

This time I will do away with text indents and try a different way of hiding the text. Hiding either the H1 or the link will cause the link to just dissapear. We still want the link, just not the text inside it. Enter our friend <span>. By adding a span around the text in the link we can now hide it without hiding the link.

mark up with span added.


<h1><a href="#"><span>Here is my H1 image and link test</span></a></h1>


the CSS is much cleaner now.

h1{
background-image:url(images/tile.png);
height: 20px;
width: 200px;
margin: 50px;
}
h1 a{
display: inline-block;
height: 20px;
text-decoration: none;
}
h1 a span{
visibility: hidden;
}


The above code and CSS now hides the text but keeps the link and the image in the correct place. Both the HTML and CSS validate and if styles are disabled then your normal H1 text shows up. As far as I can tell, the only downside to this solution is that if images are disabled then you see nothing. However having both images and styles disabled works fine. You could write some javaScript to counter this but would someone with images disabled have javascript on? I doubt it!