Sawfish Media

Color();Color is crucial to an game or website as well as art/graphics. This article/tutorial will talk about colors and color trends as well about programming colors. Hexadecimal Colors Colors that are expressed in websites or in programming are usually expressed as a hexadecimal number, such as #FFFFFF for white. Hexadecimal means that the number has a base of 16. For instance, 0=0, 1=1, 2=2... A=10, B=11, C=12, D=13, E=14, F=15. One hexadecimal value is equal to 4 byte values, F = 1111. So two hexadecimal values are equal to eight byte values which equal a maximum number of 255. A hexadecimal color is basically a RGB value. For instance in #FF4466, red = FF, green = 44 and blue = 66. And as stated in the other paragraph these values are out of 255 just like RGB. Just remember that a hexadecimal color is still a number and it can be used like a number. Color Trends Inverting a color The inverse of a color is the exact opposite of the color. For instance the exact opposite of white is black. An inverted color is surprisingly easy find. All that you have to do is subtract the original color from white. Here's an example: public static function invertColor(color:Number):Number { return 0xFFFFFF - color; } Now remember that a color is just a number so a function would return a number. White is #FFFFFF or in actionscript 0xFFFFFF (0x is the same as # indicating a hexadecimal number). So white - the original color will give you the inverse. Finding another shade of a color Finding the shade of a color is basically finding the ratios of each of the RGB values. First you determine which RGB value is the largest, this will have a ratio of 1. Then you find the ratios of the other values to the largest. Here's a example: public static function getColorShade(shadecolor:Number, percent:Number):Number { var basecolor:Object = ConvertToRGB(shadecolor); var Colorratios:Object = new Object(); var color:Object = new Object(); if (basecolor.r > basecolor.b && basecolor.r > basecolor.g) { Colorratios.r = 1; Colorratios.g = basecolor.g / basecolor.r; Colorratios.b = basecolor.b / basecolor.r; }else if(basecolor.g > basecolor.r && basecolor.g > basecolor.b) { Colorratios.g = 1; Colorratios.r = basecolor.r / basecolor.g; Colorratios.b = basecolor.b / basecolor.g; }else { Colorratios.b = 1; Colorratios.r = basecolor.r / basecolor.b; Colorratios.g = basecolor.g / basecolor.b; } var hexvalue = percent * 255; color.r = hexvalue * Colorratios.r; color.g = hexvalue * Colorratios.g; color.b = hexvalue * Colorratios.b; return ConvertToHEX(color); } public static function ConvertToRGB(hexNum:Number):Object { var rgbObj:Object = new Object(); rgbObj.r = hexNum >> 16; var tmpVal:Number = hexNum ^ rgbObj.r << 16; rgbObj.g = tmpVal >> 8; rgbObj.b = tmpVal ^ rgbObj.g << 8; return rgbObj; } public static function ConvertToHEX(rgb:Object):Number { return rgb.r << 16 ^ rgb.g << 8 ^ rgb.b } What this does is it first has two main functions ConvertToHEX() and ConvertToRGB(). These two functions are able to switch between RGB values (for generating ratios and also the shade of the color) and HEX (for displaying the actual color). Then in the getColorShade function, it recieves a color and a percent (0-1). It then calculates the ratios of the RGB values by first finding the highest value and then dividing the other values by it to get ratios for each RGB value. Then the percent is multplied by the full value of a RGB, 255 to get the starting value for the greatest ratio of the RGB. Then that number is multiplied by the ratios to get the RGB value of the shade, which is then converted to a hexadeciamal value at the end. The source has both examples here as well as CMYK conversions.10/16/2008AS32

AS3 BasicsActionscript is large part of the internet. Every Flash website that you visit or Flash Game that you play is programmed in actionscript. The newest version AS3, which was introduced with Flash CS3 is very similar to other languages such as C# and Javascript. To start programming with AS3 or AS2 buy Adobe Flash CS3/4 or as a free alternative download FlashDevelop. FlashDevelop enables you to program in AS3 and then using the Flex 3 SDK compile it into a .swf file (flash). In this tutorial I'll focus on basics of AS3 and its functions. First, create a new file (.as). You'll get something like this: package { import flash.display.sprite; public class Main extends flash.display.Sprite { public function Main():void { } } }Package means the project or package of classes (.as). Import is used to import classes either that you have made or from Flash itself (flash.display). Each .as file must be a class, this is the main class which extends (or is) a Sprite. In other words this is basically the stage. The main function is what is called or played first (like the first frame), make sure the main.as file is set to "compile first." Importing ClassesTo import classes use "import" outside the class but inside the package. package { import flash.events.*; //Many classes import flash.display.sprite; //One class import ball; //custom class //and so onflash.[classes] are classes that are a part of flash but you need to import them before you use them. You can import just one class by specifying the specific class or you can import many with "*" at the end of the folder. You import your own custom classes by specifying the file. (ball is a class in the same folder as main) FunctionsClasses always include functions. Functions that are either for a certain purpose (such as custom functions) or functions that caused because of events. They can either return a value or just do something. Here is an example: public function main():void{ //actions trace(sum(5,5)); } public static function sum(Number n1, Number n2):Number{ return n1+n2; } The first function Main() (which is the first function called by the main class), which returns nothing or void (the return type of the function). The second function sum() returns a number, and it is also a static (always the same) function which means the function can be called with sum(). The function also accepts 2 parameter, 2 numbers and then returns the sum of the numbers. VariablesA variable in AS3 is the same as in Algebra. But you must define the type of variable in AS3. package{ import flash.display.*; public class Main extends flash.display.Sprite { public var sum:Number = 0; public var title:String = "Blah"; public var circle:Sprite = new Sprite(); public function Main():void{ var helloworld:Boolean = true; } } } Notice that the variables are declared after the class declaration, this way the variables can be accessed anywhere within the class. If they where only in a function, they might still be accessed but not as easily (see Access). Before a variable goes the access-control modifier which tells where the variable can be accessed from (see Access). Then comes "var" for variable, and after that the name of the variable. A colon and then the type name is used to define a specific data type for the variable. Then comes the = sign followed by the value of the variable. For the circle var and Sprite is a display object and also a class. So to create a new instance of a sprite call "new Sprite()" (when I will talk about class structure/custom classes this will further explained). Access (-control modifiers)Access-control modifiers go before a class, function or variable. This is to indicate where the object can be accessed from.9/24/2008AS30

Behind Math.RandomRandom numbers in computers are very mysterious, because computers are logical, so how can they create a random number? Too get more info visit the howstuffworks article. But a random number, like the Math.random() function in AS3/2, is generated through a formula, starting with a "seed." Lets look at a sample random class I built. Creating the SeedThe seed is probably the most important part of the formula because it is the number you start with. If you just have a static number, such as 100 or 24, the formula will always output the same sequence of numbers. But if you have a different seed every time then the output sequence will give a different order. So how do you get a unique number for the seed. One idea is to use the date, taking the current day, week, month, year etc. and adding them together, multiplying them or whatever works best. For this we will use the date. So create a date object and a variable with the seed: public var date:Date = new Date(); public var seed:Number = (date.dayUTC + date.dateUTC) * date.fullYearUTC;This creates a different seed every day! Creating a formulaA good formula will probably multiply and add on to the seed, then finally dividing to get a smaller number. Here's an example (the howstuffworks has a good start point): if ((seed * 13453450 + 124240) == Infinity) { seed = seed/10000000; }else { seed = seed * 13453450 + 124240; } return ((seed/1234544) % 200)/200;This formula multiplies and adds onto the seed then gets a percentage out of 200, giving you the classic long decimal that the Math.random() function returns. Because the number grows so large in flash, it gets too big to where it is considered "infinite," so I had it get decreased when it got to that point. Make it into a function/class and you have your own random function that you can customize!8/17/2008AS30

Basic CSSUsing CSS is probably one of the best ways of designing a website, a good/great web developer should be able to design a website with CSS (no bgcolor, font tags etc). Classes and Ids In a CSS file, there are different ways to reference to a class or id. For a class it is a period (.) followed by the name of the class. And for an id it is a # followed by the name of the id. .cssClass{ /*styles*/ } #cssId{ /*styles*/ }Simple PropertiesProperties are styles in between the class/id beginning and closing tags { }. Some simple properties are: background, border, margin, padding, float and text-align. A great resource for CSS properties/tutorials is w3schools.org. .cssClass{ background: color, image url, repeat, background position; border: style, thickness, color; margin: top, right, bottom, left; padding: top, right, bottom, left; float: style; /* (none, left, right)*/ text-align: position; }Here's an example: .cssClass{ background: #404040, url('../images/blah.jpg'), no-repeat, top, left; border: solid, 2px, #212121; margin: 2px, 4px, 5px, 6px; padding: 2px; float: left; text-align: center; }Accessing Styles from HTMLTo access CSS styles form HTML, simply add a id or class (CssClass if Asp.net) to an element. Example: 7/23/2008CSS1 All SM Tutorials (7)

SM Community

All Community Tutorials (0)

Internet

nettutsA great site for learning about many different web languages. It also has many different tutorials that are very well written.1/4/2009HTML0

jQuery for Absolute Beginners: Video SeriesThis series assumes that you haven’t any Javascript knowledge. If you fit the bill, consider reviewing these spoon-fed videos. 12/15/2008Javascript0

Simplify ASP.NET AJAX client-side initializationA little known fact about jQuery, Ajax and ASP.Net that is very useful when using jQuery/Ajax with ASP.Net.12/13/2008ASP.Net0

Recommendation EngineA recommendation engine based off off "slope-one," which is a recommendation algorithm.11/24/2008C#0 All Internet Tutorials (13)

RSS

Get Rss Feed!

Comments

Darn.
By: Redmage
2 mths. ago...#FFFFFF
By: gabyg63
2 mths. ago...Really useful
By: The Monarch
4 mths. ago...

Sawfish Media

SM Community

Internet

RSS

Tags

Comments

Ad