Generation-We

Generation WE: The Movement Begins… from Generation We on Vimeo.

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter

Easy Slider – Powerful and Customizable jQuery Slider Plugin

Recently, I was working on completing my portfolio website. I wanted a slick and impressive way to display my past portfolio work, and I found this little gem known as Easy Slider while surfing the internet.

Easy Slider saved my life. It’s a jQuery image slider that is highly customizable. I recommend it for anyone who needs to create an image gallery or wants to add an interactive element to their website! It was super easy to put up, even for a JavaScript dummy like me. Check out the newer version for added features.
Easy Slider 1.5 – The Easiest jQuery Plugin For Sliding Images and Content
Easy Slider 1.7 – Numeric Navigation jQuery Slider

Check out how I implemented Easy Slider on my portfolio website! :)

If you liked this post, you might also like…
Top 10 Web Design Resources Every Designer Should Know About
Wana Learn jQuery?
Wordpress?

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter

CONGRATS CANADA!!

Congrats To Canada on Winning the Gold In Hockey and many other Olympic Sports!


WE ROOOOCCKKK!!!!!! 14 golds!

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter

Polish People Think We’re Pedophiles

Vancouver 2010's Unofficial MascotIt seems that a Polish newspaper, Gezeta Olysztynska, published a news story a while back about the Vancouver 2010 Olympics. This featured a picture of our mascots, and, it seems, a certain internet meme that involves lolitas. As part of the picture, Pedobear, the deceptively harmless little bear that prefers sexual partners of the underage variety stands opposite the Sasquatch.

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter

OS War: PC or Mac?

Are you a MAC or PC user?

View Results

Loading ... Loading ...

Do you like the polished OS X or the Windows, the stock car of the computer world?

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter

Games soon to increase in price but how?

Its inevitable and gamers should be aware that your typical game could cost more. This coming from Jason Rubin himself, co-founder of Naughty Dog Productions, on Bonus Round. You can watch the Bonus Round Interview at Game Trailers.

In the interview Jason Rubin makes some interesting suggestions about how to strategically gain profit from games without increasing the initial retail cost of the game. He suggests that people can have the option of paying REAL money for items in a game that may take countless hours of gameplay to acquire. I think this is a brilliant idea and I think it is a great way for the gaming industry to gain profit without effecting our wallets unless we choose to of course.

You see it has been proven that some people are willing to pay money to play a game at a certain level without committing a massive amount of hours. World of Warcraft is a great example. This game takes a ton of hours to get to a decent level and from what I hear gets funner when you reach those levels and people have actually payed some serious money for a character with a high level. They average around $100 for a character and Im pretty sure that someone has paid $1000 for one. Jason Rubin makes a point of this by using farmville as an example. Farmville is a Facebook game that is free to play but it makes millions monthly. The reason is because people can get further in the game quicker by forking out cash.

So the question I ask is, which direction is the gaming industry gonna go. Will we see more games with the option of paying real money for quicker access to items inside the game or will the initial retail price of the game just increase?

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter

To IF or not to IF?

One of the most used and important things you can do in PHP is an “if” statement.

if (!$variable1) {
echo “variable1 is NOT set”;
} else {
echo “variable1 is SET”;
}

Your typical IF statement. But if all you’re going to do is use ECHO to write a short string as output, then there’s a shortcut that I don’t see enough these days in people’s source code.

echo (!$variable1) ? “variable1 is NOT set” : “variable1 is SET”;

You’ve just condensed an IF statement into a single line. Obviously there are times when you would use this and times when you shouldn’t. But if you’re simply outputting a one liner like me here in the example code, this code is your friend.

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter

Super Clean and Easy Writing in the Sand Photoshop Tutorial

After searching fruitlessly for a good Photoshop tutorial on creating a “writing in the sand” effect, I ended up making up my own way – and now I’ll share it with all of you! :) It creates a very clean and smooth effect and is super easy and fast to complete.

Final Writing in the Sand preview

The first step is to find an appropriate font that will look like someone has written in the sand with their finger. For the tutorial, I chose to use Handwriting – Dakota since I like the rough quality to it.

After you’ve found a suitable font, create a new canvas in Photoshop. You can also use an existing one if you already have a design started.

Since there can be no writing in the sand without the sand, let’s create a sand background for behind our text. Fill your canvas with an appropriate sandy colour – I am using #f0ebdf. Now go to the top menubar and go to Filter – Noise – Add Noise… Check the Monochromatic box and set it to Uniform Distribution. You can fiddle with the Amount, but remember, you want it to look like sand, not a bunch of noise! I used 1.75% and was quite happy with the subtle texture. Click OK.

Add Noise

The great thing about this method is it will create a perfect tiling background – you don’t have to worry about seams showing up if you use it as a repeating page background for your web design! :) Now we need to add our text. You’ll want to make it a dark brown colour so that it can be read easily against your sand background – I am using #a0894e.

Add text

Next, we’re going to use some Blending Options on our text layer to create the illusion of a build-up of sand around our text, and to give our text some depth. In your menubar, go to Layer – Layer Style – Blending Options. To create the sand build-up, let’s add a stroke. The size of the stroke will depend on the size of your text – it should be in proportion to look realistic. Since I have rather large text, I am going to make my stroke 4 pixels. The position should be on the Outside, and change the blend mode to Overlay. Up the Opacity to 100% and change the colour to black (#000000).

Add stroke

If you click OK, your text should now look something like this:

Stroke Preview

Now, to create some depth, let’s add Bevel and Embossing. We’re going to give our text an Inner Bevel. I changed the depth to 50% and made the size 4 pixels; you can experiment with these values to get your desired effect. The important part is to change the lighting so that the text looks like it is ingrained into the canvas rather than sticking out of it. I changed the Shading Angle to -120 degrees and changed the Altitude to 30 degrees. Change both the Highlight and Shadow Mode to Overlay and lower both Opacity values to 50%. The Highlight colour should be white and the Shadow black. Click OK.

Add Bevel and Emboss

We’re almost done! Your text should now look like it is etched in the sand:

Bevel and Emboss Preview

You can stop at this step if you prefer, but I’m going to add the final touch by giving our text a bit more texture. Make sure your text layer is still selected, and again go to your menubar and go to Filter – Noise – Add Noise… Use the same settings as before, but up the Amount a bit: I made mine 3%. Click OK and now you’re done!

Add Noise to Text

The final product should look something like this:

Final Writing in the Sand preview

Easy right? :) I hope you enjoyed my little tutorial. Comment on this post if you have any issues getting things to work, or if you would like to suggest improvements!

If you liked this post, you might also like…

Pillowed Text Photoshop Tutorial

How to Create a Stylish Pair of Headphones

Create Cool iPhone Icons

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter

Awesome Uses of HTML5’s Canvas Tag

With the development of HTML5 and using the Canvas Tag there are a lot of cool things that can be done. Here I have found some of the coolest things done with the canvas tag.

JSNES


The first one that is pretty impressive is a NES emulator. This was developed by Ben Firshman and is of pretty good quality. The emulator supports a list of games on the website, that can be found here. With a bit of flash there is also support for sound. JSNES is open source and is available on Github. Its best to test the emulator using Google Chrome, but it does run in Safari 4 and Firefox.

Pixastic

Pixastic is an online image editor. It allows you to apply a variety of effects on images and you can save the image to your computer or do whatever you want with it. Pixastic is also a image filter library for JavaScript so the online editor displays the variety of effects you can do with it. You can check out the main page here or play with the image editor here.

Bespin

This is Mozilla’s attempt at an online IDE tool. Bespin allows you to write code for the same platform that made it! (It can be used to write anything I’m pretty sure) You can test it out be registering up on their site using their experimental hosted service and you can even download it and use it own your own website. Bespin is 100% open source. Learn more about Mozilla’s Bespin here.

If you liked this post, you might also like…

HTML5 Local Storage, Session Storage, and Client-Side Database Tutorial

HTML5 Link Element Explained

Sublime HTML5 Video Player

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter

How to embed fonts in Actionscript 3.0 – The easy way

In this tutorial I will teach you how to embed a custom font. Embedding fonts is good practice in case if the person viewing your flash application or website does not have the font installed on their computer.

In your .fla file go to the library menu and select New Font

The library menu

A font properties menu will show up. Here you can edit the font name and the font. As you can see I have named font to be myFont Plain. This is because the font that Iam embedding is not bold nor italic. You can name it whatever you want but be descriptive to avoid confusion. The Font is named myFont. This is your main name for the font. Below are some checkboxes which help identify the style of the Font. If I style text with myFont, because I left the checkboxes blank the system will use myFont Plain. If I had created another font which was myFont, had its name as myFont Bold and then selected the bold style, I would have a Bold style for myFont. Now when I use myFont, I can use a bold tag around it and the myFont Bold will get shown.

After adding the new font you should be able to see it in your library. Right click on it and select Linkage. In the Linkage properties window check the box that says Export for ActionScript. You can name the class anything you want but make sure you don’t change the Base Class name.

Now go into your .as file. You will need to import the following classes to make this work.

import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.AntiAliasType;

Now that we have our classes loaded we will create a text format and a text field and then add the format to the new text field.

var format:TextFormat = new TextFormat();
format.font = ‘myFont’;
format.color = 0×333333;
var myText:TextField = new TextField();
myText.text = ‘Some Filler Text’;
myText.embedFonts = true;
myText.antiAliasType = AntiAliasType.ADVANCED;
myText.setTextFormat(format);

And there you go. You now have textfield using custom font.

Known Problems

-I am using Flash CS3 on my Macbook Pro and I found that if you add a font to your computer in the fonts folder while Flash is open the font may not be displayed. Instead what was happening to me was I was getting a default font. This made me stressed as nobody was having this problem. But all you have to do is close Flash and reopen Flash and your font will work now. There is some refreshing issue that Flash has with this process in CS3.

I will be posting any other issues with possible solutions.

If you liked this post, you might also like…

How to change a textfield’s alpha in Actionscript 3.0

Simple Image Gallery in Flash CS4

Share:
  • Digg
  • del.icio.us
  • Facebook
  • LinkedIn
  • StumbleUpon
  • Technorati
  • Twitter