Programming and Web Development Tutorials

Simple Method of Loading Dynamic Text from a Text File in Flash Tutorials

BenignDesign — Wed, 07 May 2008 09:54:56 -0600

The premise of this tutorial is to show you how to use ActionScript and a text file to create dynamic text in a Flash presentation as seen here.

Flash can be used to create some unique and amazing websites and presentations. However, changing text within a Flash presentation can be an aggravation. In this tutorial, I will outline one method of simplifying this process.

Step 1: Creating the Buttons

Use the dynamic text option over a button shape to create your links. In the example site shown above, I have used green rectangles for my buttons with a dynamic text area over top.

Set the button shapes go to frame[x], where x is the frame number corresponding to the text to be used in that particular frame. In my example, the frames linked to are consectutive (ie, Button1 links to frame1, etc).

Set each dynamic text box a unique variable name. Keep these variable names in mind as you will need them later. In my example, I have used &t_var1, &t_var2, etc.

Step 2: Starting the Text File

Next, create a new text file. In my example, I have named mine "text.txt". We will be listing the text for the dynamic text areas over the button shapes.

Please bear in mind you will need to set fonts, font sizes and text colors for these text areas in your properties tab in Flash. And remember to use the variable names designated to each text area in the previous step!

CODE

&t_var1=Link 1
&t_var2=Link 2
&t_var3=Link 3
&t_var4=Link 4

Step 3: Creating the Text Area in Flash

Now you can add the following ActionScript to each Flash frame affected by the dynamic text. Feel free to play around with the specific settings to suit your needs. The ActionScript below merely shows the settings used in my example.

In the loadVariable command, be sure to change "text.txt" to the name of your text file. The line "_root" indicates the text file is located in the same directory as your swf.

In the createTextField command, you will have to adjust the numeric values to indicate the desired size and position of your dynamic text area. Hint: It may be easier to set frmInfo.border to "true" until the size and position are adjusted to suit your needs. In my example, my text area location remains the same across all frames, though the size and location used could be varied from one frame to another.

The variable name declared in the frmInfo.variable command MUST be the same variable name used in your text file in the next step. Change this variable name for each frame affected by the dynamic text. For my example, I have used "text1", "text2", "text3" and "text4".

CODE

loadVariables("text.txt",_root);
_root.createTextField("frmInfo",1,169,60,362,361);
frmInfo.multiline = true;
frmInfo.wordWrap = true;
frmInfo.border = false;
frmInfo.html = true;
frmInfo.type = dynamic;
frmInfo.selectable = false;
frmInfo.background = false;
frmInfo.variable = "text1";
stop();

Step 4: Adding the Text to the Text File

Now back to our text file. On a new line below your link names, add the code shown below. Remember to change the variable names to match the variables used in your ActionScript in the previous step! Notice also that you will change fonts, font sizes and text colors for the text area inside the text file.

CODE

&text1=<font face="Arial"><font size="15"><font color="#003060">
Add text here. With wordwrap and multiline functions enabled in the ActionScript, this text should wrap around the text area as it would in a CSS container on an HTML page. With HTML set to True, the bracketed information on font sizes and colors should also work in your Flash presentation.

&text2=<font face="Tahoma Bold"><font size="25"><font color="#ff0000">
Add a bunch of junk related to your second link here.

&text3=<font face="Impact"><font size="15"><font color="#ff00ff">
Add more junk related to your third link here.

&text4=<font face="Arial"><font size="12"><font color="#003060">
Add junk related to your fourth link here. And so on and so forth.....

You can now easily make changes to your site's or presentation's text by simply accessing your text file and avoid the hassle of modifying the actual Flash source!

Hidden DIVs for interactive content in CSS Tutorials

BenignDesign — Mon, 05 May 2008 06:31:04 -0600

The premise of this tutorial is to show you how to create the interactive content seen here.

This project originally started using a map of the United States in an attempt to create an interactive study guide for my daughter using state names and capitals.

However, I opted to start on a smaller scale (ie, less than 50 options) for my initial design. I found an image of 8 US Presidents via Google image search, seen below:

Step 1: Setting up the image

I set the image as the body background, though it could be set as background for a particular division if needed.

CODE

body {
background-color:#ffffff;
color:#000000;
background-image:url(img/presidents.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:top center;
}

Step 2: Setting up the basic page layout

I then set up a wrapper and an inner division called "details" to hold a simple instruction line and set both divisions to the same width as the image.

CODE

#wrapper {
margin:0 auto;
width:497px;
}

#details {
position:absolute;
width:497px;
height:25px;
margin-top:50px;
}

I'm using an external stylesheet, so thus far, the HTML looks like this:

HTML

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="details">
<h3>Roll over a President in the image above.</h3>
<h5>Image from Stamp-Search.com</h5>
</div>
</div>
</body>
</html>

Step 3: Setting up transparent divisions

From here, I set up divisions around the individual images of the Presidents. For the initial setup, I used a border around each division until I had them positioned where I wanted them, then removed the border. The transparent background allows you to have hoverable divisions without obstructing the image behind them.

CODE

#truman {width:75px;height:115px;background:transparent;margin-left:101px;margin-top:72px;}
#eisenhower {width:75px;height:115px;background:transparent;margin-left:194px;margin-top:-117px;}
#kennedy {width:75px;height:115px;background:transparent;margin-left:287px;margin-top:-117px;}
#johnson {width:75px;height:115px;background:transparent;margin-left:381px;margin-top:-117px;}
#nixon {width:75px;height:115px;background:transparent;margin-left:101px;margin-top:21px;}
#ford {width:75px;height:115px;background:transparent;margin-left:194px;margin-top:-117px;}
#carter {width:75px;height:115px;background:transparent;margin-left:287px;margin-top:-117px;}
#reagan {width:75px;height:115px;background:transparent;margin-left:381px;margin-top:-117px;}

Step 4: Setting up hover pop-up

With these divisions in place, I set out to add a pop-up information box to the right side of each row. Using the visibility:hidden attribute for the span and the visibility:visible attribute for the hover, I was able to ensure the information within each span would remain unseen until the correct division was hovered over.

To accomplish this, I set up the following division specifics, adjusting the left margin until the pop-ups appeared in the same general area for each hover section:

CODE

#truman span {visibility:hidden;display:inline;}
#truman:hover span {visibility:visible;display:block;position:absolute;padding:5px;font-weight:bold;border:3px solid red;background:navy;color:#ffffff;z-index:500;float:right;margin-left:400px;}

#eisenhower span {visibility:hidden;display:inline;}
#eisenhower:hover span {visibility:visible;display:block;position:absolute;padding:5px;font-weight:bold;border:3px solid red;background:navy;color:#ffffff;z-index:500;float:right;margin-left:307px;}

#kennedy span {visibility:hidden;display:inline;}
#kennedy:hover span {visibility:visible;display:block;position:absolute;padding:5px;font-weight:bold;border:3px solid red;background:navy;color:#ffffff;z-index:500;float:right;margin-left:214px;}

#johnson span {visibility:hidden;display:inline;}
#johnson:hover span {visibility:visible;display:block;position:absolute;padding:5px;font-weight:bold;border:3px solid red;background:navy;color:#ffffff;z-index:500;float:right;margin-left:121px;}

#nixon span {visibility:hidden;display:inline;}
#nixon:hover span {visibility:visible;display:block;position:absolute;padding:5px;font-weight:bold;border:3px solid red;background:navy;color:#ffffff;z-index:500;float:right;margin-left:400px;}

#ford span {visibility:hidden;display:inline;}
#ford:hover span {visibility:visible;display:block;position:absolute;padding:5px;font-weight:bold;border:3px solid red;background:navy;color:#ffffff;z-index:500;float:right;margin-left:307px;}

#carter span {visibility:hidden;display:inline;}
#carter:hover span {visibility:visible;display:block;position:absolute;padding:5px;font-weight:bold;border:3px solid red;background:navy;color:#ffffff;z-index:500;float:right;margin-left:214px;}

#reagan span {visibility:hidden;display:inline;}
#reagan:hover span {visibility:visible;display:block;position:absolute;padding:5px;font-weight:bold;border:3px solid red;background:navy;color:#ffffff;z-index:500;float:right;margin-left:121px;}

Step 5: Completing the HTML

I then added the following HTML containing the desired information about each President (inside the wrapper, above the details):

HTML

<div id="truman"><span>Harry S. Truman<br />33rd President of the USA<br />Democrat<br />b. 05/08/1884 - d. 12/26/1972</span></div>
<div id="eisenhower"><span>Dwight D. Eisenhower<br />34th President of the USA<br />Republican<br />b. 10/14/1890 - d. 03/28/1969</span></div>
<div id="kennedy"><span>John F. Kennedy<br />35th President of the USA<br />Democrat<br />b. 05/29/1917 - d. 11/22/1963</span></div>
<div id="johnson"><span>Lyndon B. Johnson<br />36th President of the USA<br />Democrat<br />b. 08/27/1908 - d. 01/22/1973</span></div>
<div id="nixon"><span>Richard M. Nixon<br />37th President of the USA<br />Republican<br />b. 01/09/1913 - d. 04/22/1994</span></div>
<div id="ford"><span>Gerald R. Ford<br />38th President of the USA<br />Republican<br />b. 07/14/1913 - d. 12/26/2006</span></div>
<div id="carter"><span>Jimmy Carter<br />39th President of the USA<br />Democrat<br />b. 10/01/1924 - d. N/A</span></div>
<div id="reagan"><span>Ronald Reagan<br />40th President of the USA<br />Republican<br />b. 02/06/1911 - d. 06/05/2004</span></div>

And simple as that - with no scripting - you've created your own study guide to eight former US Presidents. It could be modified for use as an image gallery, a company directory, or any number of other uses.

Create a calculator in Visual Basic Tutorials

sam_benne — Wed, 07 May 2008 12:42:50 -0600

Put this:

CODE

    If Val(mfirst) > 0 And Val(msecond) > 0 Then
        manswer = Val(mfirst) / Val(msecond)

    ElseIf Val(Text1.Text) = 0 And Val(msecond) > 0 Then
        manswer = Val(mfirst) / Val(msecond)

    ElseIf Val(Text1.Text) > 0 And Val(msecond) = 0 Then
        manswer = Val(mfirst) / Val(msecond)

    ElseIf Val(Text1.Text) = 0 And Val(msecond) = 0 Then
        manswer = Val(mfirst) / Val(msecond + 1)

    End If

After:

CODE

Select Case mbutton
Case Is = 1
manswer = mfirst + msecond
Case Is = 2
manswer = mfirst - msecond
Case Is = 3
manswer = mfirst * msecond
Case Is = 4
manswer = mfirst / msecond
End Select

As this is an error check for if your dividing 0 by 0.

Getting information from a text file in Visual Basic Tutorials

sam_benne — Wed, 30 Apr 2008 09:22:00 -0600

This tutorial will show you how to get information from a text file into a text box on a form. It will also show you how to change the data.

For this you will need a standard form, two text boxes and two buttons. You will also need a text file.

First thing you need to do is to create the form with the text boxes and buttons. Under the first button we will put the code to get the data from the text file and to put it into the first text box:

CODE

Private Sub Command1_Click()
'This will declare the variable data as a string
Dim data As String

'This will find the file that we are using
Open "\the address\name of file.txt" For Input As #1
        Input #1, MyData
'This puts the data in the textbox
         Text1.Text = MyData
    Close #1
End Sub

In the text file put a number into the it and save. now when you press F5 and press the first button it should show you the number. Simple now we look at changing the data.

This next part is a bit bigger but what it does is that it will change the data in the text file but not add to it.

CODE

Private Sub Command2_Click()

    Dim data As String

    Open "\vb\tutorials\datafile.txt" For Input As #1
        Input #1, MyData
    Close #1

        Open "\vb\tutorials\datafile.txt" For Output As #1

        mydata2 = Val(Text2.Text) + Val(MyData)
    Print #1, mydata2
    myTimeStamp = Now
    Print #1, "data"; myTimeStamp

    Close #1
        Open "\vb\tutorials\datafile.txt" For Input As #1
        Input #1, MyData
    Close #1

    Text2.Text = MyData
End Sub

It is similar to the first part but now it will change the data and add the date and time.

If you have any problems then just comment and I will do all that I can to help

css/DIV/Style & Borders in CSS Tutorials

no2pencil — Tue, 22 Apr 2008 23:39:11 -0600

css/DIV/Style & Borders:

Using standard HTML, your choice for border is limited, & can be pretty boring! You can change the color, the thickness, & that is about it.
However, with the use of stylesheets, you have much more of a variety of borders to implement onto your webpage.

There are three css settings you can change on your borders:

border-width
border-color
border-style

Most of the time you will only affect these attributes with 1 simple reference to the border attribute, however it is worth noting you can set these attributes individually.
As well, you will override anything that you have previously defined in a stylesheet since there is no order rule for these attributes.

Here's an example:

CODE

To affect specific sides, use the following attributes:

CODE

border-top
border-left
border-bottom
border-right

Using these you can force individual borders to display differently, or not at all.

CODE

border-width
This value can be assigned in pixels or you can use one of the three standard values thin, medium and thick.

CODE

border-width: thin;

border-width: medium;

border-width: thick;

border-style
This value allows you to adjust how your borders are presented. There are a total of eight possible styles you can choose from:

CODE

border-style: solid;

border-style: dashed;

border-style: dotted;

border-style: double;

border-style: groove;

border-style: ridge;

border-style: inset;

border-style: outset;

Lastly, one that should be familiar to you...

border-color
You can color your borders using either HEX codes or named colors.

CODE

border-color: black;

border-color: 000000;

Getting Started In Microsoft Visual Studio 2008 in C++ Tutorials

rbmj — Sun, 20 Apr 2008 12:23:23 -0600

Getting Started in Microsoft Visual Studio 2008 Console Application Tutorial
----------By Polymath

Table of Contents:
----------Part 1: Introduction
----------Part 2: Opening, Coding, Testing, and Final Work
----------Part 3: Line-By-Line Breakdown of the C++ Code Supplied

Introduction

This Tutorial assumes that you have little-to-no knowledge of the C++ Programming Language and are using Microsoft Visual Studio as you first compiler to create a CONSOLE application. The "Help" documentation provided with the piece of software was not helpful to a non-C++ savvy programmer (me at the time), so I had to start from scratch. I couldn't find a sufficiently easy step by step tutorial for creating basic first-time applications, so I wanted to help any similarly-situated people by writing a concise, easy-to-follow, step-by-step w/screenshots tutorial. Plain and Simple.

Due to the uselessness and waste of memory of such programs as "helloworld.exe", in this tutorial we are going to create an EXTREMELY SIMPLE calculator that can add two numbers together. An added advantage of using this program for the tutorial is that it allows me to demonstrate more aspects of C++. Since this tutorial does not cover object-oriented-programming or other C++ -only functions, this could technically be considered a C tutorial, but it works for C++.

All that aside, let's begin.

Opening, Coding, Testing, and Final Work

Step 1. First, if you haven't already, download Microsoft Visual C++ Studio 2008 Express Edition for free at The Microsoft Visual Studio Downloads Page. This download may take a while to install.

Step 2. Register and Launch Microsoft Visual C++ Studio 2008 (from here-on-out I will refer to this as Visual C++). The registration process is quick and easy.

Step 3. In Visual C++, select "File Menu-->New-->Project" (as shown).
[attachmentid=6824]

Step 4. In the dialog box that pops up, click on "Win32" in the side pane and select "Win32 Console Application." Make sure that the "Create Directory for Solution" box is NOT checked and leave the default path the same (as shown---You can leave the Create Directory for Solution box checked and change the default path, but for purposes of this tutorial, leave it at the settings shown)
[attachmentid=6825]

Step 5. The Win32 Application Wizard will pop up (as shown). Click "Next."
[attachmentid=6826]

Step 6. Make sure that the following are checked (as shown):
----------1. Under "Application type": Console Application
----------2. Under "Additional Options": Empty Project
----------Then: Press "OK"
[attachmentid=6827]

Step 7. Go to the "Solution Explorer" on the left side and right-click on "AddCalc" but be sure not to right click on "Solution AddCalc (1 project)." Once you have right clicked on AddCalc select "Add-->New Item"
[attachmentid=6813]

Step 8. In the Dialog Box that appears, on the left pane select "Visual C++" and on the top section choose "C++ file (.cpp)" and change the name to AddCalc (as shown). Press "OK".
[attachmentid=6814]

Step 9. A blank screen will appear showing the contents of "AddCalc.cpp" (as shown in SS1). Copy and Paste the following code into this blank white area (for a line-by-line breakdown of the code, go to part 3):

CODE

// initializing C++
#include <iostream>
using namespace std;

// declaring function prototypes
float addition (float a, float b);

//main function
int main ()
{
    float x;        //
    float y;        //declares variables
    float n;        //
    int b;
    b = 1;            //sets value of b to 1
    cout << "Simple Addition Calc- First Program";        //displays info about program
    while (b==1)                                        //creates loop so the program runs as long as the person wants to add numbers
    {
        //following code prompts the user for 2 numbers to add and calls function addition to display results
        cout << "\n" << "Type a number to add (can also use negetive, decimals, etc.): ";
        cin >> x;
        cout << " Second number: ";
        cin >> y;
        n = addition (x,y);
        cout << "Ans: " << x << " + " << y << " = " << n << "\n";
        //following code sets b to the value the user imputs to determine if the loop is broken to end the program
        cout << "Solve another operation? (1=yes, 2=no): ";
        cin >> b;
        cout << "\n";
        if (b==2)
        cout << "Terminating application.";
    }
    //ends the main function of the code
    return 0;
    }
//following function adds the numbers
float addition (float a, float b)
{
    float c;
    c = a+b;
    return (c);
}
//END C++ CODE

Step 9. (con.) The blank area with the code in it is shown in SS2 along with the SAVE ALL button highlighted (you may wish to save your work here).
SS1:
[attachmentid=6815]
SS2:
[attachmentid=6816]

Step 10. Go to the Build Menu and select "Build Solution" (as shown).
[attachmentid=6817]

Step 11. Your Output Screen (near the bottom of the page) should show the following (the most important being: *Build: 1 succeeded, 0 failed, 0 skipped, 0 up-to-date*):
[attachmentid=6818]

Step 12. PRESS F5 on you keyboard, and a small box should pop up that is running your program that will add 2 numbers together (as shown). This is command to debug your application, which for our purposes is synonymous to testing.
[attachmentid=6819]

Step 13. The Debug window should work. Assuming it does, to save your program to AddCalc.exe, first go to the drop down menu near the top of the screen which says "Debug" and change it to "Release" (as shown).
[attachmentid=6820]

Step 14. Go to the Build menu and select "Rebuild" (as shown). This should give output that is SIMILAR, not the SAME as the output from Step 11.
[attachmentid=6821]

Step 15. Go to Windows Explorer and go to:
"C:\Documents and Settings\your_username_here\My Documents\Visual Studio 2008\Projects\AddCalc\Release"
(as shown below) Double click on AddCalc.exe, and if it runs, you can delete the other files in this directory.
[attachmentid=6822]

Line-by-Line breakdown of the AddCalc.exe code

Some notes: There are some basic things about C++ that you should know beforehand. First, in C++ all spacings are equivilant (space, tab, enter), and you can have any number of the spacings, so an enter and a space both together means the same thing as a single enter or a single space. Second, a line that has // in it has a comment in it. The comment is whatever is in that line of code after the // untill there is an enter character (this is the only case in which an enter character is not the same as a tab or a space). I will ignore all comments in this code. Finally, all lines of code should end with a semicolon.

And without further ado, let's begin. I ignored comments because the comment will be the explination aligned to the right of the line it is in.

LINE-BY-LINE

#include <iostream> // this tells c++ that we want to use the normal imput and output library NO ; REQUIRED

using namespace std; // this tells c++ that we are using the standard section of this library and the C++ language

float addition (float a, float b); //this says that after the main function we will have a seperate function "addition"

int main () //says that the next block of code is the main code to be executed.

{ //the curly brace starts the main function's block of code

float x; //declares a variable that can use numbers with decimels and negetives

float y; //declares variables that is the same as above

float n; //declares a variable, same type as x

int b; //declares a variable that can only use whole numbers

b = 1; //sets value of b to 1

cout << "Simple Addition Calc- First Program"; //displays info about program

while (b==1)
//creates loop so the program runs as long as the person wants to add numbers (when b=1)

{ //curly brace starts the loop block of code

cout << "\n" << "Type a number to add (can also use negetive, decimals, etc.): ";
// prints a newline "/n" and outputs for the user to specify a number
cin >> x; // provides imput for x after the string in the previous line.

cout << " Second number: "; // outputs "Second number: "

cin >> y; // provides imput for y after previous string

n = addition (x,y); // sets n to the value returned by addition for x and y

cout << "Ans: " << x << " + " << y << " = " << n << "\n"; // Displays answer

//following code sets b to the value the user imputs, and b is the variable for the loop above

cout << "Solve another operation? (1=yes, 2=no): "; //output

cin >> b; //imput

cout << "\n"; //Outputs new line

if (b==2) //if the user imput is 2

cout << "Terminating application."; //output

} //curly brace sends ends the loop and then it is reassesed whether or not b fits the loop to go again.

return 0; //ends the main function of the code

} //curly brace ends main function

float addition (float a, float b) //creates a function returning a decimal value
//this function requires two variables in its call of type float.

{ //starts function

float c; //creates a variable called c

c = a+b; //stores the value a+b as c

return ( c ); //c is the value given to the function call for addition

} //ends function

And thats it! the basics of c++ are very simple. For those of you who prefer a list of commands and definitions:

#include <library> --------------- says you are using commands from a library of c++ commands

using namespace [namespace] ------------- says you are using a subset of commands called namespace

cin >> variable ----------- stores user imput to variable

cout << variable/"string" << variable/"string" << ... ---------------------- outputs

varType function ([paramaters]) -----------------defines a function later in the program, or with {} creates
function commands

varType = value --------------------defines variable

while (variable==value) {}-------creates a loop that repeats as long as the variable is the same as the value

if (variable==value) [if more than one command: {}] ----------------------- runs a conditional statement

functionName ([paramaters]) --------------"calls" a function, the value of the call= the "return" of the function

return (variable)/value ------------------says what value the function should send back to its "caller"

This is only the very basics, I would suggest you go to the cplusplus.com C++ Language Tutorial for a more complete reference of the language that includes commands not used in the AddCalc.exe program and a better syntax reference. Otherwise, this should be simple egnough for learning how to use a new interface (the basis of this tutorial).

64 bits, Wp64, Visual Studio 2008, Viva64 and all the rest... in C++ Tutorials

Karpov2007 — Tue, 08 Apr 2008 13:00:18 -0600

64 bits, Wp64, Visual Studio 2008, Viva64 and all the rest...

Andrey Karpov
E-Mail: karpov@Viva64.com
Date: April 2008

Annotation
The purpose of this article is to answer some questions related to safe port of C/C++ code on 64-bit systems. The article is written as an answer to the topic often discussed on forums and related to the use of /Wp64 key and Viva64 tool.

Introduction
I am a developer of a static code analyzer Viva64 [1], intended for diagnosing errors in 64-bit programs. The analyzer integrates into Visual Studio 2005/2008 environment and allows you to check if C/C++ code is correct according to the set of corresponding rules [2]. Potentially dangerous code sections detected by Viva64 tool may be analyzed and corrected in time and it reduces costs on testing and maintenance a lot [3].
While communicating with software developers on forums, via e-mail or at conferences I've noticed that there are some mistakes which lead to incorrect questions, remarks and comments. Within the limits of this article I want to try to clarify these points related to the use of 64-bit compilers, /Wp64 key and static analyzer Viva64. For that I will put several general questions and then answer them. I hope these answers will help you to better understand 64-bit technologies and find right solutions of different tasks.

1. What is /Wp64 key?

Wp64 key tells the compiler to search possible errors which may occur during compilation of code for 64-bit systems. The check consists in that types marked in 32-bit code by __w64 keyword are interpreted as 64-bit types.

For example, we have the following code:

CODE

typedef int MyInt32;
#ifdef _WIN64
  typedef __int64 MySSizet;
#else
  typedef int MySSizet;
#endif
void foo() {
  MyInt32 value32 = 10;
  MySSizet size = 20;
  value32 = size;
}

Expression "value32 = size;" will cause contraction of value and consequently a potential error. We want to diagnose this case. But during compilation of a 32-bit application everything is correct and we won't get an warning message

To deal with 64-bit systems we should add /Wp64 key and insert __w64 keyword while defining MySSizet type in a 32-bit version. As a result the code will look like this:

CODE

typedef int MyInt32;
#ifdef _WIN64
  typedef __int64 MySSizet;
#else
  typedef int __w64 MySSizet; // Add __w64 keyword
#endif
void foo() {
  MyInt32 value32 = 10;
  MySSizet size = 20;
  value32 = size; // C4244 64-bit int assigned to 32-bit int
}

Now we'll get an warning message C4244 which will help us to prepare the port of the code on a 64-bit platform.

Pay attention that /Wp64 key doesn't matter for the 64-bit compilation mode as all the types already have the necessary size and the compiler will carry the necessary checks. It means that while compiling the 64-bit version even with /Wp64 key switched off we'll get C4244 message.

That's why, if you regularly compile you code in 64-bit mode you may refuse using /Wp64 in 32-bit code as in this mode the check is fuller. Besides, diagnosis systems with /Wp64 key is not perfect and often can cause false response or, just on the contrary, miss of messages. To learn more about this problem you may see the following links [4, 5].

2. Why do we need Viva64 analyzer if we have /Wp64?

This question is one of the most frequent but it is actually incorrect. Let's at first refer to some analogy. Modern C/C++ compilers give a lot of messages warning about potential errors. But this doesn't decrease the urgency of such tools as lint, Gimpel PC-Lint, Parasoft C++Test or Abraxas CodeCheck. And nobody asks what for we need these analyzers if Visual C++ compiler contains /Wp64 key or /Wall key?

The compiler's task is to detect syntax errors in programs and to give messages on the main potential type errors. The need of the diagnosis's details to be limited is related to the necessity of choosing a reasonable number of diagnoses that could be useful for all programmers. Another reason is the requirement that the compiler should be high-performance. Some checks take a lot of time but many programmers may not need it.

Universal static analyzers allow you to diagnose large classes of potential errors and bad coding style - that is, everything that is absent in the compiler. The static analyzer's settings are adjusted for concrete tasks and give detailed information about errors in which a developer is interested. Although static analyzers are launched regularly they are not launched during compilation of every file being developed. This allows you to carry rather deep analysis demanding more time. Static analysis is an excellent methodology among others which help to increase quality and safety of the code.

Similar to this is the situation with checking compatibility of the code with 64-bit systems. We have briefly discussed what we get with the help of /Wp64 key. This key is a great help for a programmer but it cannot be useful in every case. Unfortunately, there are much more cases of type errors related to the use of 64-bit systems. These type errors are described in detail in the article "20 issues of porting C++ code on the 64-bit platform" [6] which I strongly recommend you. It is the great difference in the number of checks provided by /Wp64 and the number of necessary checks why we need a specialized tool. Viva64 is such a tool.

There is one more related question: "Some analyzers such as Gimpel PC-Lint or Parasoft C++Test support diagnosis of 64-bit errors. Why do we need Viva64 then?" It's true that these analyzers support diagnosis of 64-bit errors, but firstly it is not so thorough. For example, some errors related to the peculiarities of modern C++ language are not taken into consideration. And secondly, these analyzers work with Unix-systems data models and cannot analyze 64-bit programs developed in Visual Studio environment. To learn more about all this see "Forgotten problems of development of 64-bit programs" [7].

Summary: /Wp64 key and other static analyzers don't reduce the need of Viva64.

3. Why is /Wp64 key declared deprecated in Visual Studio 2008?

There is a wrong opinion that /Wp64 key is declared deprecated because diagnosis of 64-bit errors has become much better in Visual Studio 2008. But it is not so.

/Wp64 key is declared deprecated in Visual Studio 2008 only because it has become unnecessary. The time to "prepare for 64-bit code" has passed and now it's high time to create 64-bit programs. For that there is a 64-bit compiler in Visual Studio 2008 (as well as in Visual Studio 2005).

/Wp64 key is useful only in mode of compilation of 32-bit programs. It was created to detect some errors in time which the program will face in future after migration on 64-bit systems.

During compilation of a 64-bit program /Wp64 key is of no purpose. The compiler of 64-bit applications carries automatic checks similar to /Wp64 but more accurate. While compiling 32-bit programs /Wp64 mode glitched and it resulted in false error messages. It is not very pleasant and many developers complained of it and asked to upgrade this mode. Visual C++ developers have acted, in my opinion, very reasonably. Instead of wasting time on upgrading /Wp64 they declared it outdated. By this they:
encourage programmers to compile their programs with the help of the 64-bit compiler;
simplify the system of the compiler's commands (which is overload enough) by removing the temporary auxiliary key;
get rid of requests to upgrade this key.

4. Does Viva64 tool remain topical if we switch to Visual Studio 2008?

Yes, it does as nothing has changed. The compiler hasn't changed much what creation of 64-bit programs is concerned. /Wp64 key in the 32-bit compiler was declared deprecated to stimulate switching to 64-bit systems but it doesn't concern Viva64. Viva64 analyzer detects much more potential "64-bit" errors than 64-bit compiler Visual C++ 2005/2008 and is used successfully by many developers.

I would like once more to devote some time to the fight with "evangelists" who propagate that the compiler can diagnose all the 64-bit errors and that refusing to use /Wp64 key just confirms it.

I ask you to reread the article "20 issues of porting C++ code on the 64-bit platform" [6]. Please, think about it!

The compiler cannot give messages on constructions of the following kind:

CODE

unsigned i;
size_t size;
for (i = 0; i != size; i++)
...

Or, for example:

CODE

int x, y, z, w, h;
int position = x + y * w + z * w * h;
bigArray[position] = 0.0f;

These are classical widely spread constructions. They are safe in most cases, and developers of compilers won't introduce warning messages on such constructions although they are potentially dangerous while porting on 64-bit systems! They should be analyzed at least once. Such errors are difficult to detect and they occur only in large data arrays or while processing a large number of items.

But all these problems can be easily solved if you look through the code with the help of Viva64. Please, don't deceive developers convincing them that everything is OK in their programs. You won't do them any good but may encourage them to switch to 64-bit systems carelessly and thus bring some rare errors which will occur only when a program will be launched..

Conclusions.

/Wp64 key is useful but not sufficient at all to guarantee that a 64-bit program will work.
For deeper analysis of 64-bit code one should use static analyzers providing corresponding checks.
The specialized Viva64 tool is the best solution to check C/C++ code for the 64-bit versions of Windows.

Resources.

Evgeniy Ryzhkov. Viva64: what is it and for whom is it meant? http://www.Viva64.com/articles/Viva64_-_what_is_and_for.html
Andrey Karpov, Evgeniy Ryzhkov. Static code analysis for verification of 64-bit applications. http://www.viva64.com/articles/Verificatio...plications.html
Andrey Karpov. Problems of testing 64-bit applications. http://www.viva64.com/articles/Problems_of...plications.html
Keith Brown, SetWindowLongPtr and /Wp64. http://www.pluralsight.com/blogs/keith/arc...01/13/4940.aspx
MSDN Forum, http://forums.microsoft.com/MSDN/ShowPost....04&SiteID=1
Andrey Karpov, Evgeniy Ryzhkov. 20 Issues of Porting C++ Code on the 64-bit Platform. http://www.viva64.com/articles/20_issues_o...t_platform.html
Andrey Karpov. Forgotten problems of 64-bit programs development. http://www.viva64.com/articles/Forgotten_problems.html

Anchor pseudo-classes in CSS (glowing hyperlinks) in CSS Tutorials

rbmj — Sat, 05 Apr 2008 15:01:25 -0600

Ok, before you begin, you should have some basic understanding of CSS.

Now, have you ever seen a website where the hyperlinks grow when you mouse over them, or underline themselves? The code behind these hyperlinks is relatively easy, yet if used correctly, can make you site look more professional.

First, you need to know about pseudo-classes. The syntax for these in CSS is:
selector.class:pseudo-class {attribute}
In otherwords, CSS defines a number of classes relative to the user or the surrounding code which it can use to apply to a class of a certian selector.

The most unique are the anchor (hyperlink) pseudo classes. These have special effects when they are clicked or moused over. The default color and the "clicked" color of hyperlinks is determined by the surrounding font color, but now you are not limited by this. Take the following code:

CODE

/* colors will be: */

/* normal link- yellow */
/* visited link- cyan */
/* mouse over link- firebrick */
/* selected link- lawn green */

a.one:link {color: yellow}
a.one:visited {color: #00FFFF}
a.one:hover {color: #B22222}
a.one:active {color: #7CFC00}

This code defines the different colors of all hyperlinks with the class attribute of "one" to have certian colors, while not affecting those which don't have both the pseudo-class and the normal class. For example <a href="#">unaffected</a> would be unaffected but <a href="#" class="one">affected</a> would be affected by the css class.

Now for the fun part...

The hover pseudo-class can be used to create special effects beyond coloration. Take (for example) the following Style Sheet:

CODE

a.grow:link {color: #ff0000}
a.grow:visited {color: #0000ff}
a.grow:hover {font-size: 150%}

a.highlight:link {color: #ff0000}
a.highlight:visited {color: #0000ff}
a.highlight:hover {background: #66ff66}

a.chngfont:link {color: #ff0000}
a.chngfont:visited {color: #0000ff}
a.chngfont:hover {font-family: monospace}

a.underline:link {color: #ff0000; text-decoration: none}
a.underline:visited {color: #0000ff; text-decoration: none}
a.underline:hover {text-decoration: underline}

All of these link classes each have their own action when they are moused over. You can also put most other identifiers next to the a:hover line. Thats pretty much it for anchor pseudoclasses. Hopefully, more tutorials to come!

Thats all folks! /cool.gif" style="vertical-align:middle" emoid="B)" border="0" alt="cool.gif" />

Basic DOS operations in Windows Tutorials

ferrari12508 — Fri, 28 Mar 2008 18:32:57 -0600

This tutorial will be a basis on how to operate DOS so that you can look around your computer and open programs an alternative way. Lets say your mouse is broken, how are you ever going to double click that icon? Well the great thing about the command prompt(a.k.a. cmd) is that it works without a mouse. Simple commands allow you to "view" a folder's content and you can even specify what type of file to view.

Any time Quotations are used in this tutorial, they are not meant to be typed into the command prompt./hmmm.gif" style="vertical-align:middle" emoid=":hmmm:" border="0" alt="hmmm.gif" />

I'm going to start out with the Dir command as it is a simple command, but if you don't know what certain folders are named or are helping a friend on his computer, it can be quite powerful.

The Dir command simple stands for directory and it outputs the files and folders in the root folder or the folder you are looking in.

Below is a picture of the command prompt.

The writing on your command prompt may be different than mine, but the commands do not change. If I type in "dir" without the quotations I will get a nifty list of all the folders and files in the directory folder.

So in the Brian folder, there are 6 other directories and 2 files. notice how one of the files ends in ".pref" If i were type in "dir *.pref" the only item that would come back to my inquiry would be that one file. The "*.pref" Than the only files that would show up would be files that end in ".pref". This can be used for documents of any type including word documents(.doc), text files(.txt), powerpoint presentations(.ppt), and others. The * in "*.pref" is a wild card. The wild cards that can be used are ?, #, and *. * is used for any string. Two examples are "*.doc" and "name.*". The latter of the two would show any file type that was named "name". The ? is used for letters, so ???? could mean "name" or "cool". the # is self explanatory seeing as it represents a number. All of these symbols can be used interchangeably in the 2 examples I used with the astrisks.

The next command that I would like to enlighten you, the reader, on is the CD command. CD just like Dir means something, Change Directory. This command allows you to navigate around your computer using CMD. CD is very simple, just like dir. All you need to do is type "cd "Folder Name"". Folder Name would be where you put in the name of the folder such as Documents and Settings.

Using that, I was able to move into the documents and settings folder, but what if I didnt want to go into that folder, but i did by accident? Well it would suck to have to start all over if you were 20 folders into something, so you can just use the command "cd.." which will move you up one directory.

If you are a few folders in and just want to go to the root folder, you can just type "cd \". Also if you are in the C: drive but need to be in the D: drive, you can just type "D:"

This can come in quite handy as soon you will learn where things are on your computer's hard drive and you might speed up your productivity rate when using a computer. /wink2.gif" style="vertical-align:middle" emoid=";)" border="0" alt="wink2.gif" />

Clearing Specific History in Windows Tutorials

ferrari12508 — Fri, 28 Mar 2008 16:39:04 -0600

Even though many of you might not like to use Internet explorer, it is a very widely used browser that is good enough for most people. Ever been at work or a public place and looked at a website that you would rather not have other people know you were looking at? Well without clearing the history, it is possible to take that site out of the address bar so that it can not be found by the click of a mouse.

For this tutorial to work for you, you will need :
- Access to the computers registry and/or a registry editing program
- A few minutes
- To be willing to edit the Windows Registry

Nothing done in this tutorial will cause harm to any computer, therefore if something should go wrong, neither DreamInCode.net nor I can be held responsible. Also, If you plan on doing something Illegal or something that you are not supposed to be doing and get caught, I will not take any of the blame simply because you thought to do something bad because you were going to cover your trail. Well lets say you are in a public place and go on youtube.com but don't want people to know you were there, simple close the browser. Anybody now looking over your shoulder will not be able to see you were at youtube. But what if they open up IE and click the down arrow next to the address bar??? Well they now know exactly where you have been. After you are done with your session on Internet Explorer, simply close the browser and go to Start->Run and type "regedit" without the quotation marks.

Now be very careful in this new window as it contains EXTREMELY sensitive information.

Go to HKEY_Current_User->Software->Microsoft->Internet Explorer->TypedURLS

In this folder there will be a list of items which you can modify or delete. In the case of totally removing a website from the address bar, simple scroll over the item's name, right click on it and press delete. This simple action removes the website's name from your address bar. But why stop there, you were on the computer and it looks mighty suspicious if someone was sitting in front of a computer pretending to do something. So in the case of modification, Right click on the item's name again and this time select Modify. A new window should appear and say the name of the website inside of a textbox. Simply type in what website you want to appear, such a google.com and click "Ok".

Now exit out of the registry and open up internet explorer. If you have followed these steps, then a new website name should appear and no one will ever suspect that you were at the dirtiest site of them all, </dic>.

One final warning : This method will ward away some suspicious people, but it is not a 100% promise that someone won't find out what you were really doing, because there are other ways of finding out.

Creating constants in Java in Java Tutorials

bhandari — Tue, 25 Mar 2008 02:10:00 -0600

Java has const as keyword for declaring constants (variables whose value can�t be changed after initialization). But const has not been implemented in any of the versions of JDK. const has been kept as reserved word which means that no identifier can be named as const in a program.

Then how should one go about declaring constants in Java?

Fortunately, the final keyword can be applied to variables in addition to classes as well as methods. The use of final keyword on variables makes sure that the value of the variable can�t be changed.

e.g.

[code=java]
public final int a = 2;
a=3; //will flash compiler error
[/code]

Once the final variable a has been initialized to 2, its value can�t be changed to 3.

But generally, constants are not associated to a particular instance of the class. So it is better to add static modifier also as:

[code=java]
public static final a = 2;
[/code]

But wait there is a catch when using object references. Consider this:

[code=java]
public static final obj = new Object();
obj = new Object(); //compiler error as expected
[/code]

The second line will make the compiler flash an error about changing the reference obj which was pointing to some other object.

But how about this:

[code=java]
public static final UserCar usrcar = new UserCar (�suzuki�);
usrcar.changeTo(�honda�); // no compiler error
[/code]

In the above case, no error is flashed by compiler because the final reference is still pointing to the same object as it was initialized. After second line, it�s the car object that has been modified and not the object reference �usrcar�.

So how would you go about making your object as final as opposed to object reference being final. Well, just make the object reference as �private� so that no other program can modify your object.

CSS Image Swap Menu in CSS Tutorials

BenignDesign — Mon, 24 Mar 2008 09:12:05 -0600

I am assuming at this point that anyone can submit a tutorial. If I am incorrect in this assumption, please let me know. Second, I had posted this little ditty in my blog, but since no one reads it, I thought I'd post it here. Hopefully, someone will be able to use it.

Anyway, here is a nice little menu technique with no javascript!

The menu is made up of images - each button will need two images (one for the up-state, one for the down-state) and these images will need to be the same size. This example uses 5 buttons with up-state and down-state images like these:

(Up-state)
(Down-state)

Please also note the HTML images are static, meaning they are always present, merely covered up by the CSS images on mouse-over. This could make for some interesting designs using transparencies.

The CSS code (buttons in down-state):

CODE

body {background-color: #ffffff;}

/*Start button 1*/
div.nav1 {
height: 50px;
width: 150px;
margin-top:15px;
padding:0;
background-image:url("img/btn_down1.png");
}

div.nav1 a, div.nav1 a:link, div.nav1 a:visited {display:block;}

div.nav1 img {width:100%;height:100%;border:0;}

div.nav1 a:hover img {visibility:hidden;}
/*End button 1*/

/*Start button 2*/
div.nav2 {
height: 50px;
width: 150px;
margin-left:153px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down2.png");
}

div.nav2 a, div.nav2 a:link, div.nav2 a:visited {display:block;}

div.nav2 img {width:100%;height:100%;border:0;}

div.nav2 a:hover img {visibility:hidden;}
/*End button 2*/

/*Start button 3*/
div.nav3 {
height: 50px;
width: 150px;
margin-left:306px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down3.png");
}

div.nav3 a, div.nav3 a:link, div.nav3 a:visited {display:block;}

div.nav3 img {width:100%;height:100%;border:0;}

div.nav3 a:hover img {visibility:hidden;}
/*End button 3*/

/*Start button 4*/
div.nav4 {
height: 50px;
width: 150px;
margin-left:459px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down4.png");
}

div.nav4 a, div.nav4 a:link, div.nav4 a:visited {display:block;}

div.nav4 img {width:100%;height:100%;border:0;}

div.nav4 a:hover img {visibility:hidden;}
/*End button 4*/

/*Start button 5*/
div.nav5 {
height: 50px;
width: 150px;
margin-left:612px;
margin-top:-50px;
padding:0;
background-image:url("img/btn_down5.png");
}

div.nav5 a, div.nav5 a:link, div.nav5 a:visited {display:block;}

div.nav5 img {width:100%;height:100%;border:0;}

div.nav5 a:hover img {visibility:hidden;}
/*End button 5*/

The HTML code (buttons in up-state):

CODE

Two samples of this code in action can be found here.

Happy coding!

Getting data from a remote web server in C++/CLI in C++ Tutorials

aj32 — Fri, 21 Mar 2008 17:43:33 -0600

In this tutorial, I will be showing you how to connect to a remote web server, read a file off of it, close the connection and display it's contents. I will be using Visual Studio for this tutorial.

First, create a CLR console application. When you create the project, make sure "yournamehere.cpp" is open (it should open automatically by default). The code in that file should look something like this:

[code=cpp]// Tutorial 5 - getting data off a server.cpp : main project file.

#include "stdafx.h"

using namespace System;

int main(array<System::String ^> ^args)
{
Console::WriteLine(L"Hello World");
return 0;
}[/code]

Remove the [inline]Console:WriteLine(L"Hello World");[/inline] code.

First, we add the namespaces and includes that are required, add the following under [inline]#include "stdafx.h"[/inline]:
[inline]#using <System.dll>[/inline].

Add this under [inline]using namespace System;[/inline]:

[code=cpp]using namespace System::IO;
using namespace System::Net;
using namespace System::Net::NetworkInformation;
using namespace System::Text;[/code]

Now, that we have our includes and namespaces in place, we will define our variables. After [inline]int main(...) {[/inline], add these variables: [code=cpp]WebRequest^ Request;
HttpWebResponse^ Response;
Stream^ Stream1;
StreamReader^ SReader;
String^ Responsestring;
String^ PATH = "http://www.miller-warner.com/foxsoftware/product/dicwp4/SYSTEM/tutorialexample.log"; //PATH to File on server //
int CONN;
[/code]
These are our variables that will be used in our program.

Now we want to check if the user is online or not, we will do this by pinging an IP address that will always be online (such as Microsoft):

CODE

//CHECK TO SEE IF SERVER IS ONLINE//
   Ping ^pingSender = gcnew Ping;
   PingReply ^ reply = pingSender->Send("209.85.165.99");
   if ( reply->Status == IPStatus::Success )
   {
       CONN = 10;//The user is online, set our connection variable (CONN) to 10;
   }
   else
   {
       CONN = 400;//The user is offline, set our connection variable to 400;
   }
   //END

   if(CONN == 10)//is the user online?
   {
       //... (User is online, get the data...) ...//
   }
   else//User is not online//
   {
       Console::WriteLine("Sorry, cannot detect a internet connection.");
   }

What the code you just entered into your IDE will 1. Ping a remote server, and 2. if the ping is a success, it will set our CONN variable to 10, indicating the user online, if not, it will set our CONN variable to 400, the user is offline.

Now, if the user is connected to the internet (where I added the comment "//... (User is online, get the data...) ...//"), our program will first create a http Web Request:
[code=cpp]
Request = WebRequest::Create( PATH );
[/code]
Now that we have created a Web Request, the program will then set the Credentials if needed:
[code=cpp]
Request->Credentials = CredentialCache::DefaultCredentials;
[/code]
Next, it will, of course, send the request, and get the response:
[code=cpp]
Response = dynamic_cast<HttpWebResponse^>(Request->GetResponse());
Stream1 = Response->GetResponseStream();
SReader = gcnew StreamReader( Stream1 );
Responsestring = SReader->ReadToEnd();
[/code]
Now, the variable String^ Responsestring contains the contents of the file read. There is not much to do after that, we just have to display the contents:
[code=cpp]
Console::WriteLine("Data from remote server:\n" + Responsestring + ".\n");
[/code]
... and close the streams:
[code=cpp]
SReader->Close();
Stream1->Close();
Response->Close();
[/code]
After that, we are pretty much done, the complete code should look like this:
[code=cpp]
// Tutorial 5 - getting data off a server.cpp : main project file.

#include "stdafx.h"
#using <System.dll>

using namespace System;
using namespace System::IO;
using namespace System::Net;
using namespace System::Net::NetworkInformation;
using namespace System::Text;

int main(array<System::String ^> ^args)
{
WebRequest^ Request;
HttpWebResponse^ Response;
Stream^ Stream1;
StreamReader^ SReader;
String^ Responsestring;
String^ PATH = "http://www.miller-warner.com/foxsoftware/product/dicwp4/SYSTEM/tutorialexample.log"; //PATH to File on server //
int CONN;

//CHECK TO SEE IF SERVER IS ONLINE//
Ping ^pingSender = gcnew Ping;
PingReply ^ reply = pingSender->Send("209.85.165.99");
if ( reply->Status == IPStatus::Success )
{
CONN = 10;//The user is online, set our connection variable (CONN) to 10;
}
else
{
CONN = 400;//The user is offline, set our connection variable to 400;
}
//END

if(CONN == 10)//is the user online?
{
Request = WebRequest::Create( PATH );
Request->Credentials = CredentialCache::DefaultCredentials;
Response = dynamic_cast<HttpWebResponse^>(Request->GetResponse());
Stream1 = Response->GetResponseStream();
SReader = gcnew StreamReader( Stream1 );
Responsestring = SReader->ReadToEnd();
Console::WriteLine("Data from remote server:\n" + Responsestring + ".\n");
SReader->Close();
Stream1->Close();
Response->Close();
}
else//User is not online//
{
Console::WriteLine("Sorry, cannot detect a internet connection.");
}
return 0;
}
[/code]

If you run the program (and the miller-warner server is up /tongue.gif" style="vertical-align:middle" emoid=":P" border="0" alt="tongue.gif" />) it will connect to it, read the file and display the contents of the file!

This can be useful in several ways, for instance, if you want to automatically notify your user of an update, bug fix. ect. this technique can be used!

I hope this tutorial is useful, thanks for reading!

-AJ32 /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

Clearing Floats: Two Methods in CSS Tutorials

Mr. X — Thu, 20 Mar 2008 10:09:58 -0600

Hello there and welcome.

So, you've decided to jump into CSS and start making those cool multi-column layouts - table-less style. But now, those things known as float: left; and float: right; are giving you headaches like crazy. This tutorial is here to help you. I'll show you two methods you can use to bend those headaches to your will! /biggrin.gif" style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif" />

Preface
As you may know, when you set the display: property of an object (like a paragraph, a div, a span),you have a choice, mainly, between block and inline. The key property when clearing floats is the block property because it will force the float'ed element(s) back into the normal document flow.

Floats take the element out of the document flow, and these methods "put them back in". You won't need to know anything about the former once you put these methods into your document. Let's begin!

Method 1: Use a "clearer" div
You've probably browsed the source of a given HTML page and found this kind of div:

CODE

...
<div class="clearer"></div>
...

That page is using this method to clear a float or several floats. It's very simple and still quite used. Here's how it works.

HTML

CODE

CSS

CODE

#wrapper
{
/* This just centers the #wrapper in the center of the window. */
margin-left: auto;
margin-right: auto;
width: 95%;
}

#leftcontent
{
/* To the left you go! */
float: left;
width: 45%;
}

#rightcontent
{
/* And to the right. */
float: right;
width: 50%;
}

/* And here's the clearer. */
.clearer
{
clear: both;
}

As you can see above in the HTML code, I've put the .clearer class right under the last float'ed element. This forces the two elements back into the normal document flow and makes them "inline" elements (side by side).

In the CSS, the .clearer method simply "clears" both floats, and since it's a block, it's like forcing a new line. Think of it like Lego Blocks, there has to be a block on the bottom and the blocks on top have to go along with wherever the bottom block is, so the .clearer method always comes after the two (or three) float'ed elements and says "Hey you, get back in line!"

That's that for that method, now, here's the one that I'm using...

Method 2: The Alsett Clearing Method

The aforementioned method is great and all for clearing floats and it does work, but it also adds an unnecessary div element to your document. Over time, if you have several float'ed elements, the .clearer methods can add up fast, as you'll be forced to put a clearer method after every float to "keep it in line". But there is another way to clear floats that works just as well and doesn't add but one rule to your CSS and not a thing to your HTML. I'm just going to post the code and let you look at this, I'll explain afterwards.

HTML

CODE

CSS

CODE

#wrapper
{
margin-left: auto;
margin-right: auto;
width: 95%;
}

#leftcontent
{
float: left;
width: 45%;
}

#rightcontent
{
float: right;
width: 50%;
}

/* This is the Alsett Clearing Method. */
#wrapper:after
{
clear: both;
content: ".";
display: block;
height: 0px;
visibility: hidden;
}

Notice something gone from the HTML markup? Yep, there's no more "clearer" there. In its place, the CSS has one additional rule and that's the "wrapper:after" rule.

Note: I use the wrapper div here since it contains the floats; always have something to contain the elements that are being float'ed and then just use the :after method on that containing element.

First, in plain English, that rule is saying: "After the thing that has an ID of wrapper, clear both floats, add a period, display that period as a block, give it a height of zero and just make it hidden". Remember how I said the block was a key in clearing floats? That's how this works.

By using CSS' content property, we add a period right after the wrapper div and by displaying it as a block, we force the float to "stop" and force it back into the document flow. By giving it a height of zero and hiding it, we just make sure no one sees that period, thus, there's "nothing" there! The floats "just clear"! The clear: both that's there just like the clearer div tells this block to clear both floats.

Which method?

I would personally go with Method 2. This keeps the clearing of the floats in the CSS where it should be and adds nothing to the HTML.

Compare this with the previous method of where, if you didn't like the name .clearer, then you'd have to go through your document and change every instance of .clearer to the new name. Here, though, you simply have to change one rule and you're finished!

Thank you
I hope you've enjoyed reading this as much as I've enjoyed writing this, and I hope this helps you overcome the headache that is floats. Thank you and happy coding.

Create your favorite Video to Flash in Flash Tutorials

mp4kit — Thu, 20 Mar 2008 03:38:14 -0600

The other day, I stumbled across a wonderful Video to Flash software: Flash Video MX. Firstly, I was attracted by the succinct and friendly interface. Then downloaded it and found this software quickly converts different video formats into high-quality Flash Video (FLV). Meanwhile, this Flash encoder is also a good Video to SWF Converter. It can convert video to Flash by creating a Flash Video player (SWF file) for the generated FLV file. It also provides various playback skins with different styles for the SWF file, and automatically creates an HTML page to display the SWF file. A powerful tool! Herewith post the guide to share with friends, hope it do you a favor!

Step1: Load the video file

Click the folder on the right end of "Input Video" frame, and select your targeted video file to convert.

Step2: Trim the video

Drag the bar on "Start Time" and on "Finishing Time" to trim away those unwanted video clips. You can also click buttons "MS" and "MF" to trim the video while it is playing in the preview panel.

Tips:
1) You can refer to 'Movie Properties' to view the original information of the source video and change the video to proper settings.
2) Click the Thumbnail button and you can generate a thumbnail image for the output Flash video. If want to view the thumbnail image the right section of the interface, double-click the image, then pop up a window for you to adjust the settings.

Step 3: Crop the video
Click the 'Crop' button and it pops up the following window for you to crop away the unwanted areas of the video. Alernatively, you can directly drag the dotted frame manually to crop the video.

Step 4, File Settings
When above all well prepared, click 'Next' button to 'select a flash video encoding profile', choose 'Video Settings' and 'Include Audio' as you like.

Step5: Output settings
Then go on clicking 'Next' button. This step is designed mainly to help us convert the source video formats to SWF and FLV for online distribution. If want to create some advanced SWF and FLV files, you can adjust the 'Export Settings', 'Player Settings', and 'Misc'. Then click 'Next' and 'Start' to convert your favouriter video to flash.

Done, just so easy!

Flash Converter