Archive for January, 2010

Flash Tutorial 2

0
2 years ago
by Thomas Palmer in

This tutorial is for actionscript 2.0

commands/statements to be covered:

stop();
gotoAndPlay();
_parent.
gotoAndStop();
if { }
else if { }
else { }

Definitions:

The  stop(); command:
The stop command is used to stop your flash file from moving further in its time-line.

The gotoAndPlay(); command:
The gotoAndPlay command does exactly what it sounds like, it goes to a frame in the time-line, and has the time-line continue playing from there.

The gotoAndStop(); command:
The gotoAndStop command is just like the gotoAndPlay command except once it goes to the designated frame, it stops progressing further in the time-line.

The if(){ } statement:
The if statement is used to restrict a script action from occurring unless a certain requirement or condition is met.

The else if() { } statement:
The else if statement is used after the if statement when the if statements requirement is not met and the programmer wants to check for a different requirement and designate a different response to be taken if the new requirement is met.

The else() { } statement:
The else statement is used after the if statement or else if statement if the programmer wants an action to be executed on the event that none of the requirements listed in the if/else if statement(s) are met.

Usage:

Stop();

The stop command can only be placed as action-script in a frame. Just write “Stop();” anywhere in the action-script of a frame, and the time-line will stop progressing at that frame.

gotoAndPlay();

The gotoAndPlay command can only be placed as action-script in frames or movie-clips. in a frame, all you need to do is place the command in the frame you want to skip from and place the frame number you want to skip to inside the (). for Example: gotoAndPlay(5); placed in a frame will cause the time-line to skip from the frame where the command is written to frame 5 and have the time-line continue to play from there.
If you write this command as action-script in a movie-clip placed in your main time-line, your movie-clip will gotoAndStop(5); instead of your main time-line because movie-clips have time-lines of their own, and the time-line it is placed on is it’s “parent”. to control the main time-line (in this case the movie-clip’s parent) you must access. You can access the parent of a movie-clip simply by typing _parent. before the command. So to control the main time-line from this movie-clip, you can type _parent.gotoAndStop(5); furthermore, if you place yet another movie-clip inside this movie clip, the main time-line becomes the new movie-clip’s parent’s parent. So, to access the main time-line from this movie-clip inside the original movie-clip, just type _parent._parent.gotoAndStop(5); It’s that simple.

if(){ }

To use the if statement, you must first know what requirement or condition you are looking to see is met. You must then know what you want to happen if that condition is met. For example, ill use this script: (to be placed in a frame)
Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var Toms_color = "green";
var Arias_color = "blue";
var Jacksons_color = "red";
var Brians_color = "blue";
var Nicks_color = "red";

if(Toms_color == "red"){
     trace("Toms color is red");
}
if(Toms_color == "blue"){
     trace("Toms color is blue");
}
if(Toms_color == "green"){
     trace("Toms color is green");
}

As you can see, you type:

1
2
3
if(*condition*){
*action if condition is met*
}

I used == instead of = because == is used if you want to compare two variables for equivalence. = is used if you want to make a variable equivalent to a different variable.

you can even make if statements like:
Code:

1
2
3
if(1 + 1 + 1 == 3){
     trace("I can do math!");
}
else if(){ }

The else if statement is written just like the if statement. The difference is that there MUST be an if statement or another else if statement before it, and its condition can only be met if none of the conditions before it are met. For example:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var Toms_color = "green";
var Arias_color = "blue";
var Jacksons_color = "red";
var Brians_color = "blue";
var Nicks_color = "red";

if(Toms_color == "red"){
     trace("Toms color is red");
} else if(Toms_color == "blue"){
     trace("Toms color is blue");
} else if(Toms_color == "green"){
     trace("Toms color is green");
} else if(1 + 1 == 2){
     trace("this condition will not be met");
}

because the condition if(Toms_color == "green") is met, the else if statement if(1 + 1 == 2) will not be checked.
If however you change Toms_color to “purple”, the condition if(Toms_color == "green") will not be met, and if(1 + 1 == 2){ will be met.

else{}

The else statement MUST be used after an if statement or an else if statement. The else statement will only execute if none of the statements before it are met. For example:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var Toms_color = "Purple";
var Arias_color = "blue";
var Jacksons_color = "red";
var Brians_color = "blue";
var Nicks_color = "red";

if(Toms_color == "red"){
     trace("Toms color is red");
} else if(Toms_color == "blue"){
     trace("Toms color is blue");
} else if(Toms_color == "green"){
     trace("Toms color is green");
} else {
     trace("Toms color is not red, green, or blue, it is "+Toms_color);
}

Because Toms_color does not equal red,blue, or green, the else statement is triggered, and the trace command is output.

functions that can be used in these statements:

== (is equivalent to)
!= (is not equivalent to)
> (is greater than)
< (is less than)
>= (is greater than or equal to)
<= (is less than or equal to)

you can also shorten your script by placing multiple conditions in one if/else if statement by using && or ||.

using && is almost like saying “and”.
using || is almost like saying “or”.
in &&, all of the conditions must be met.
in ||, only one of the conditions must be met.
For example:
Code:

1
2
3
4
5
6
7
8
9
10
11
if(1+1==2 && 1+2==3 && 1+3==4){
     trace("this will be displayed because all of the statements are true.");
}

if(1+1==2 && 1+4==3 && 1+3==4){
     trace("this will not be displayed because 1 + 4 != 3.");
}

if(1+1==2 || 1+4==3 || 1+4==4){
     trace("this will be displayed because at least one of the statements is true, 1 + 1 = 2");
}

Convert Between RGB and HEX

7
2 years ago
by Jackson Hines in

Welcome to yet another exciting issue of Tech Tips! I’m taking this week’s tip in a slightly different direction. This week instead of learning how to do something we are going to learn all about something. And that something is two different ways to represent colors: RGB and Hexadecimal. RGB and Hex is decimal are two different ways to name computer colors.

If you have ever used Photoshop or something similar, you are probably used to seeing RGB color representations. RGB stands for Red Green Blue, which are the three colors that when mixed together create all other colors that computers display. RGB colors are shown as three separate values that vary between 0 and 255. These numbers represent how much of each color is used to create the resultant color. The higher the number of color, the more influence that color will have on the final color. So for example, 255, 0, 0 will turn out to be a Red color, because we are mixing 255 units of red, 0 units of green and 0 units of blue. 0,0,0 will turn out to be a black color, because no colors will be represented. If we max out all the colors (255, 255, 255) we will get a white color.

If you have ever created a web site before, or done any web design, you have probably seen colors looking like this: #ffffff. This is called the hexadecimal form of the color. The number sign (#) begins every Hexadecimal color; After that, the 1st and 2nd digits represent the red value; the 3rd and 4th represent the green value; the 5th and 6th represent the Blue. For example, in the color #3366cc, 33 represents the red, 66 represents the green and cc represents the blue. Hex color values can contain any of 16 different digits, they are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F.

Follow the steps outlined below to convert between the color types:

RGB to HEX (ex: 168, 79, 255)

  1. Divide the Red value by 16. (Ex: 168 ÷ 16 = 10.5)
  2. Separate this number into two parts, the part before the decimal point and the part after the decimal point. (Ex: 10 and 0.5)
  3. Multiply the part of the number that was after the decimal point by 16 (Ex: 0.5 × 16 = 8 )
  4. Now you should have the first part of the number that you got in step two and your result from step three. (Ex: 10 and 8 )
  5. If either of these numbers greater than 9 subtract 9 from them and substitute that letter of the alphabet. (Ex: 10 > 9 so 10 – 9 = 1 = A; 8 ≤ 9 so we leave as 8 )
  6. These are the red digits of the hexadecimal color. (Ex: a8 )
  7. Repeat steps 1 through 6 for green and blue values (Ex. 4f, ff)
  8. Put all these values together and put in a number sign in front (Ex: #a84fff)

HEX to RGB (Ex: #a84fff)

  1. Take the first digit of the red part of the hex color. (ex: a)
  2. If this digit is a letter, replace with the letter of the alphabet and add 9. If it is not a letter, leave it. (ex: a = 1; 1 + 9 = 10)
  3. Take the second digit of the red part of the hex color. (ex: 8 )
  4. If this digit is a letter, replace with the letter of the alphabet and add 9. If it is not a letter, leave it. (ex: 8 )
  5. Divide this number by 16. (ex: 8 ÷ 16 = 0.5)
  6. Add the number you got in step two and the number you got in step 5. (ex: 10 + 0.5 = 10.5)
  7. Multiply this number by 16 to get the red value. (ex: 10.5 × 16 = 168)
  8. Repeat steps 1 through 8 with green and blue values. (ex: 168, 79, 255))

There are certain hex colors that are considered “Web Safe”. These colors include all combinations of the follow strings of digits: 00, 33, 66, 99, cc, ff. As you can see there are 6 possible choices here and in order create a hex color out of them, you need 3. Giving 63 which is equal to 216 possibilities.

Control Your Computer from a Remote Location

0
2 years ago
by Jackson Hines in

Welcome to another exciting issue of Tech Tips! In this issue, I’m going to show you how to control your computer from a remote location using a free program called LogMeIn Free. That means you can use a computer that is millions of miles away over the internet of another computer.

The first thing you need to do is visit www.logmein.com and navigate to the LogMeIn Free registration page or just use this direct link: https://secure.logmein.com/products/free/register.asp. Then, just fill in the account info and click Create Account.


Once you are finished registering, Log in to your account on the computer you wish to remotely access. Click Add Computer and then follow the onscreen instructions to add your computer. While you are adding your computer to LogMeIn, you may be asked to enter an access code. This access code will be used to access this computer later. If it does not ask you for an access code your windows User Name and Password will be used. Log In on as many computers as you want and add them to the list.

Now you can remotely access the computer from another computer, just Log in to your account and click on the name of the computer you want to access and follow the onscreen instructions to access it. Once you get into the computer control screen just choose to remote control and you will have full control of your computer remotely.

Flash Tutorial 1

2
2 years ago
by Thomas Palmer in

To make things easier for those who are new to flash, we will be using actionscript 2.0

Before I explain some action-script, I will briefly describe the flash interface. If you are already familiar with it’s basics, you may skip this.

First, we need to start up flash. Once started, you will see the option to make a new flash document, click it. (If you are using flash CS3, choose to use action-script 2.0)
You now have a blank document open. Here are some things you should notice:
At the very top are the basic options (file, edit, view, insert, etc…) I may refer to those options in other tutorials.

Below this is the time-line. the time-line is broken into frames (labeled at the top from 1 to infinite).

You will notice that to the left of the time-line, are the layers. below the layers you see some small buttons to have layers added or deleted.

Below The time-line and layers, is the main window. This is where all images and objects are displayed. You can put images or objects above other images or objects simply by having them placed in a higher layer.

To the left of the main window you see various tools used for objects in the main window such as (select, moves, line creation, rectangle/circle creation, the paint bucket, etc…)

On the very bottom bar (below the main window) you can choose from options such as the main window’s size, the frame rate, and the background color.

Now that you know some of the basics of the interface, I can explain some basic action-script. these are the commands I will cover:

stop();
onClipEvent(enterFrame){ }
trace();
var
_global.

Now, you may ask, where do I type these commands? Well, in action-script 2.0, you can apply script to many objects such as buttons, movie-clips, and frames. to do this, select the object (by clicking it and seeing that it is “highlighted”) and press your F9 key. or right click and select “actions”.
So, to start this off, go to your tools to the left of the main window, select the rectangle tool and draw a rectangle in the main window. then, choose the black arrow tool(selection/normal cursor) and select your rectangle. Then, you can either right click and select “convert to symbol” or you can press F8. In the popup, write a name for you move-clip and make sure the check-box for “movie-clip” is selected. then press “ok”.
you can now add action-script to this movie-clip. left click it once and press F9 or right click it and select “actions”.
in the window that pops up type the following:
Code:

1
2
3
4
5
6
onClipEvent(enterFrame){
     trace("Hello World");
     trace(variable_1);
     trace(_global.variable_1);
     trace(_global.variable_2);
}

now, press CTRL + Enter to preview your flash file. you should notice three things.
1. text keeps popping up non-stop
2. you can see “hello world”
3. you see undefined most of the time.
This can all be explained in the code you put into the movie-clip.
I will explain the code line by line:

onClipEvent(enterFrame){

Because there is only one frame, you will “enterFrame” at whatever speed your frames per second is. (The default is 12, so you whatever you have inside the { } after onClipEvent(enterFrame){ will happen 12 times every second.

trace("Hello World");

The trace command is a useful command for flash developers because it allows us to see when things happen, or what a variable is equal to. It is especially useful because it wont be shown when the document is published. In this case we have (“Hello World”); after it. no matter what you want to output with the trace command, you will always put it in () and end it with ; However, if what you want to output is a string of text, like Hello World, you must put it in double quotes so flash nows that it is just a string of text. hence trace(“Hello World”);.

trace(variable_1);

again the trace command. The difference here however is that there are no double quotes. because of this, flash interprets “variable_1″ as the name of a variable. We have, however, not made a variable so it does not know what value to output. because of this, it will, by default output “undefined”. Meaning that the variables is undefined.

trace(_global.variable_1);

and

trace(_global.variable_2);

This again is the trace command, and again, there are no quotes, so flash will take _global.variable_1 and _global.variable_2 as variable names (that are of course undefined). the difference here though, as I’m sure you have noticed is the “_global.” _global. is placed in front of a variables when it is to be used from any place in your flash document. without it, the variable is restricted to the code where it is defined.

}

this last bracket is used to close off the onClipEvent(enterFrame){ bracket. Everything between those two curly brackets is supposed to happen “onClipEvent(enterFrame)” or, 12 times a second.

Now, lets make this a little more interesting.

Open up the actions for the movie clip you made and add
Code:

var variable_1 = "Hello to you too!";

right below onClipEvent(enterFrame){

If you press CTRL + Enter you will see that Hello World and Hello to you too! are both output by the trace commands.

This is because you designated a value for the variable “variable_1″; by using the var command. you made the variable_1 = a string of text by putting the text in double quotes. If you did not use double quotes, it would think Hello to you too was the name of a variable and try to make variable_1 equal it its value (undefined).

Well, now we should finish this off. Exit the actions window for the movie-clip and open the actions window for frame 1 be either right clicking it and selecting “actions” or left clicking it once and pressing F9.

here type the following code:

Code:

1
2
3
var a_brake = "over the world!"
_global.variable_1 = "watcha "+"wanna"+" do?";
_global.variable_2 = "take "+a_brake;

now, I will explain this line by line:

var a_brake = "over the world!"

the var command states that there is a variable named whatever comes after it (in the case “a_brake”). at the same time, we can put = #/variable/”text”. if you want it to equal a number, do not use double quotes. if you want it to equal a variable, do not use double quotes, but if you want it to equal a string of text, put that string of text in double quotes. You can also split this up. First declare the variable exists by saying “var a_brake” and then latter on in the script you can make it equal to something a_brake = #/variable/”text” .

_global.variable_1 = "watcha "+"wanna"+" do?";

when making a _global. variable, the var command is not needed.
however, everything after it is the same.

here I said it equals “watcha ” (the string of text “watcha “) + “wanna” (the string of text “wanna”) + ” do?” (the string of text ” do?”). when adding string of text together, it appends one after the other, meaning _global.variable_1 will equal “watcha wanna do?”. because this is an _global. variable, it can be accessed by the script in our movie clip.

_global.variable_2 = "take "+a_brake;

Here, we say that _global.variable2 equals the string of text “take ” plus the variable a_brake (it’s a variable because there are no quotes around it). because a_brake is a equal to a string of text, it will append it after “take “.

pressing CTRL + Enter should display this.

Advanced CSS – Part #6

0
2 years ago
by Dennis Thompson in

Pseudo-elements are used to add special effects to some html elements.

Pseudo-elements are very much like pseudo-classes. The syntax for pseudo-elements is like pseudo-classes:

1

selector:pseudo-element {property:value;}

We can also use class selectors with our pseudo-elements:

1

selector.class:pseudo-element {property:value;}

Pseudo-elements

Since pseudo-elements exist to give some html elements some flair, we have a few special pseudo-elements that we need to be familiar with.

:first-line

As the name implies, this pseudo-element adds special styles to the first line of text. We can only use this pseudo-element with block-level elements (see Display Property for more details).

1
2
3
4
5
6
7

p:first-line {
     color:#ff9300;
     font-style:italic;
}

The above code would make the first line of text color turn to atomicpages orange and then change the first line of text to be italic. There are, however, certain properties that are not allowed when using the :first-line property. We can use the following:

  1. all font properties
  2. color
  3. all background properties
  4. text-decoration
  5. clear
  6. text-transform
  7. letter-spacing
  8. word-spacing
  9. vertical-align
  10. line-height

These are the only properties that are valid to use with the :first-line pseudo-element!

:first-letter

This pseudo-element applies unique styles to the first letter of text. Consider the following code:

1
2
3
4
5
6
7
8
9

p.a:first-letter {
     background:#fff url("images/fancy_a.gif") no-repeat;
     border:1px solid #ff9300;
     margin-left:25px;
}

This will load the first image of all p elements with the class “a” so:

1
2
3

<p class="a">very fancy image at the beginning of this makes this
sentence seem much more grandiloquent that it really is!</p>

This fancy_a.gif will also have a border of 1px which is solid and atomicpages orange and will have a left margin of 25px.

Like the :first-line pseudo-element, there are restrictions on which properties can be used with this pseudo-element.

  1. all font properties
  2. color
  3. all background properties
  4. text-decoration
  5. clear
  6. text-transform
  7. letter-spacing
  8. word-spacing
  9. vertical-align
  10. line-height
  11. margin properties
  12. padding properties
  13. float

:before

This pseudo-element is used to insert content before and element is rendered by the browser. Consider the following code:

1

span:before {background:#fff url("images/fancy_a.gif") no-repeat;}

This is saying that before every span element there will be that fancy “A” that we define earlier in this tutorial.

:after

This pseudo-element is used to insert content after and element is rendered by the browser. Consider the following code:

1

h4:after {background:#fff url("images/fancy_b.gif") no-repeat;}

This is saying that after every h4 element there will be that fancy “B”.

Now what does that accomplish? Nothing very significant in this case but you can click on the green download button to see these pseudo-elements in action!

pseudo-elements.zip
pseudo-elements.zip
Size: 7.76 KB
Go to Top