White Pine Lodge
A relaxing northern retreat for those who enjoy the great outdoors.
We've officially launched White Pine Lodge's website! This website features a Flash and HTML version. The Flash version includes a polaroid-style photo gallery, and an interactive fishing line that you can drag and it snaps back. You can grab the source code for both of these things in our other blog posts: The Rubber Line and Polaroid Photo Gallery. We've also incorporated a 'widget' that grabs the weather and imports it into Flash. Cool, huh?
So take a look, we hope you like it! You can let us know what you think by sending us an email.
Posted by Adam on 29.03.2009.
Hot Plat- Err... Website.
Coming in faster than we can send them out.
We've got a whole slew of new websites being done as you read this! There's a couple of Torontonian musicians and groups, and even a cool little bar from Old Cabbagetown. Make sure you check back soon, we'll post our new releases on here.
Posted by Adam on 19.03.2009.
Aufwiedersehen Kanada!
Goodbye Canada!
Well, we're off to another country. North43 Design is going to be moving its base from Toronto to Berlin, officially making ourselves an international company! We will of course still offer our services to the great people of North America from abroad, but we will now also be accepting clients from around Europe. Unfortunately we will no longer lie near the 43rd parallel, but our hearts will stay here so the company name will stay for the time being.
Make sure to check back on us to see our great new international projects, we hope you're as excited about them as we are!
Posted by Adam on 09.03.2009.
Intro to PHP and MySQL
What are PHP and MySQL?
PHP is a server-side scripting language. This means that all the processing of the PHP is done on the server before the content even hits your computer. For example, if we had a script that calculated 4x4, we would only see the 16, not the number sentence. MySQL is a type of database, kind of like a spreadsheet that you might make in Microsoft Excel or Numbers on a Mac. In simpler terms, it's an organizational table. Databases store - you guessed it - data, which can be imported from a whole number of ways, but usually using HTML forms.Why are they related?
PHP is used to talk to the MySQL database to modify, add, or remove content from the database. For example, you might have a registration form on your website to add users to your database. The form would be filled in and the information would be sent to a PHP script. The PHP script would then take that information and format it, and then send a command to the MySQL database telling it to add the information to itself.How do I set up a database?
If you have your own servers, you have to intstall MySQL to them. You can go to the official MySQL website to download their package. You have to have a host (make sure they include databases in your plan!), and you can usually set up the database via the control panel for your host - if not, we'll cover that in the PHP section. You should get four pieces of information once the database is set up: the host address, the user, the password, and the database name. The host address is often just 'localhost', however if they host the databases seperate from their regular hosting, it would be an IP address (ie. 200.200.200.200).Once the database is set up, you need to create tables. The easiest way to do this is through PHPmyAdmin, which is often automatically installed with your host or when you create a databse. If you can't get PHPmyAdmin, we'll cover how to create a database table later on in the PHP section.
PHP 101
A PHP file is basically just a text file. To create one, just open a simple text editor (like Notepad or TextEdit) and paste in the following code:
<?PHP
?>
?>
Now save it as file.php and that's it! You've made your first PHP file. Unfortunately right now, it doesn't do a thing. Now insert a new line to make it look like this:
<?PHP
echo "Hello!";
?>
echo "Hello!";
?>
Re-save the file and upload it to your host, then open the address that the file is located in your browser (ie. www.website.com/myfile.php). You should get a page that just says "Hello!" at the top left. Now why does all that code only render a simple phrase!? Let's go through the code and discuss what each part means. The first line just tells the computer that it's going to make a PHP statement, and the last line says that's the end of the PHP statement.
The middle line is the interesting one. We already know what it does, but let's look at the syntax. The 'echo' is the actual command that says to print something on the screen. Whatever comes after that it will repeat. You will notice that it has to be in quotations, and the end of the line is a semi-colon. The quotes define what will be printed, and the semi-colon defines the end of the command.
Now, back to our databases. If you haven't already created a table, let's do that now. Create a new PHP file and paste in the following code:
<?php
$c = mysql_connect("host","user","pass");
if (!$c) {
die('No connection: ' . mysql_error());
}
if (mysql_query("CREATE DATABASE my_db",$c)) {
echo "Database created";
} else {
echo "Could not create database: " . mysql_error();
}
mysql_select_db("my_db", $con);
$q = "CREATE TABLE registrants (
Name varchar(50),
Email varchar(50),
id INT(11) NOT NULL PRIMARY KEY AUTO_INCREMENT)";
mysql_query($q,$c) or die ("Could not create table:" . mysql_error());
mysql_close($c);
?>
$c = mysql_connect("host","user","pass");
if (!$c) {
die('No connection: ' . mysql_error());
}
if (mysql_query("CREATE DATABASE my_db",$c)) {
echo "Database created";
} else {
echo "Could not create database: " . mysql_error();
}
mysql_select_db("my_db", $con);
$q = "CREATE TABLE registrants (
Name varchar(50),
Email varchar(50),
id INT(11) NOT NULL PRIMARY KEY AUTO_INCREMENT)";
mysql_query($q,$c) or die ("Could not create table:" . mysql_error());
mysql_close($c);
?>
Don't worry, it's more simple than it looks. One of the great things about PHP is that it already has a number of MySQL related functions already built in. mysql_connect, mysql_query, and mysql_select_db are all examples of these functions. Each of these functions does a different thing with the database you're accessing. Now let's set this up so it'll work for you.
The first thing you're going to do is replace the 'host', 'user' and 'pass' in line 2 with your own information. If you like, you can modify the information on line 14 and 15 by changing 'Name' and 'Email' to values for your own needs, or add in extra lines below that to create extra fields. Now save, upload, and visit the page. If all went well, you should see the following message on the page 'Database created'. DO NOT RELOAD THE PAGE. In fact, now you're going to delete that file off of your server, because if it gets visited again it might create more databases or tables, or cause other problems down the road. We don't want that.
Now what?
Okay, so we've made a database, we've created the table, now we have to input the information and call it back. Create a new text file and paste the following code into it, save it and upload it. We'll talk about it's inner workings next.
<html>
<head>
<title>My New Database</title>
</head>
<body>
<?PHP
$c = mysql_connect("host","user","pass");
if (!$c) {
die('No connection: ' . mysql_error());
}
mysql_select_db("my_db", $c);
if($_POST['submit']){
$name = $_POST['Name'];
$email = $_POST['Email'];
$q = mysql_query("INSERT INTO registrants (Name, Email) VALUES ('$name', '$email')");
if($q){
echo "Inserted into database";
} else {
echo "Could not insert into database";
}
} else {
?>
<br /><br />
<form method="POST" action"myform.php">
Name:<input type="text" name="Name" /><br />
Email:<input type="text" name="Email" /><br />
<input type="submit" name="submit" value="Add User" /><br />
</form>
<br /><br />
Current Registrants:<br /><br />
<?PHP
$q = mysql_query("SELECT * FROM registrants");
$num = mysql_num_rows($q);
for($i=0; $i<$num; $i++){
$name = mysql_result($q, $i, "Name");
$email = mysql_result($q, $i, "Email");
echo "Name: $name <br />";
echo "Email: $email<br /><br />";
}
} // End else statement
?>
</body>
</html>
<head>
<title>My New Database</title>
</head>
<body>
<?PHP
$c = mysql_connect("host","user","pass");
if (!$c) {
die('No connection: ' . mysql_error());
}
mysql_select_db("my_db", $c);
if($_POST['submit']){
$name = $_POST['Name'];
$email = $_POST['Email'];
$q = mysql_query("INSERT INTO registrants (Name, Email) VALUES ('$name', '$email')");
if($q){
echo "Inserted into database";
} else {
echo "Could not insert into database";
}
} else {
?>
<br /><br />
<form method="POST" action"myform.php">
Name:<input type="text" name="Name" /><br />
Email:<input type="text" name="Email" /><br />
<input type="submit" name="submit" value="Add User" /><br />
</form>
<br /><br />
Current Registrants:<br /><br />
<?PHP
$q = mysql_query("SELECT * FROM registrants");
$num = mysql_num_rows($q);
for($i=0; $i<$num; $i++){
$name = mysql_result($q, $i, "Name");
$email = mysql_result($q, $i, "Email");
echo "Name: $name <br />";
echo "Email: $email<br /><br />";
}
} // End else statement
?>
</body>
</html>
To make this a little easier to digest, we're going to take this piece by piece. This first piece...
<html>
<head>
<title>My New Database</title>
</head>
<body>
<?PHP
$c = mysql_connect("host","user","pass");
if (!$c) {
die('No connection: ' . mysql_error());
}
mysql_select_db("my_db", $c);
<head>
<title>My New Database</title>
</head>
<body>
<?PHP
$c = mysql_connect("host","user","pass");
if (!$c) {
die('No connection: ' . mysql_error());
}
mysql_select_db("my_db", $c);
... simply begins the HTML document, and connects to the database. Again, you would need to fill in your own information for your database on the 8th line.
The next chunk...
if($_POST['submit']){
$name = $_POST['Name'];
$email = $_POST['Email'];
$q = mysql_query("INSERT INTO registrants (Name, Email) VALUES ('$name', '$email')");
if($q){
echo "Inserted into database";
} else {
echo "Could not insert into database";
}
... checks to see if the form has been sent, and if it has, inserts the data filled out in the form into the database.$name = $_POST['Name'];
$email = $_POST['Email'];
$q = mysql_query("INSERT INTO registrants (Name, Email) VALUES ('$name', '$email')");
if($q){
echo "Inserted into database";
} else {
echo "Could not insert into database";
}
Now here's where it gets kinda cool.
} else {
?>
<br /><br />
<form method="POST" action"myform.php">
Name:<input type="text" name="Name" /><br />
Email:<input type="text" name="Email" /><br />
<input type="submit" name="submit" value="Add User" /><br />
</form>
<br /><br />
?>
<br /><br />
<form method="POST" action"myform.php">
Name:<input type="text" name="Name" /><br />
Email:<input type="text" name="Email" /><br />
<input type="submit" name="submit" value="Add User" /><br />
</form>
<br /><br />
Remember the if() statement that checked to see if the form had been sent? The '}else{' at the beginning of this section is a continuation of that if() statement. So, basically if the form hasn't been sent, then it'll output everything between '} else {' and the closing else bracket (in the next section). There isn't any PHP except for the very beginning, so this should be pretty straight forward if you're familiar with HTML. If not, check out our Basic HTML tutorial.
Last but not least:
Current Registrants:<br /><br />
<?PHP
$q = mysql_query("SELECT * FROM registrants");
$num = mysql_num_rows($q);
for($i=0; $i<$num; $i++){
$name = mysql_result($q, $i, "Name");
$email = mysql_result($q, $i, "Email");
echo "Name: $name <br />";
echo "Email: $email<br /><br />";
}
} // End else statement
?>
</body>
</html>
<?PHP
$q = mysql_query("SELECT * FROM registrants");
$num = mysql_num_rows($q);
for($i=0; $i<$num; $i++){
$name = mysql_result($q, $i, "Name");
$email = mysql_result($q, $i, "Email");
echo "Name: $name <br />";
echo "Email: $email<br /><br />";
}
} // End else statement
?>
</body>
</html>
This section creates a loop that outputs the result of the database. Since we've already connected to the database, we don't need to do it again. All we need is our query and the loop. The SQL query is "SELECTING [everything] FROM [the table] registrants. The next line counts how many results we'll have in the end.
Here's where it gets a little tricky. A for() statement has three sections in between the parenthesis, separated by semi-colons. The first is the starting value, the second is the terms, and the third is the next step. To put it in laymans terms, we might phrase a for() statement like this:
for(first_number = 0 ; the_number < total_entries ; add one to the_number)
This is essentially what the for statement in the code is saying. So, as long as the_number is less than the total_entries, it will run the script, then add one to the_number, then it'll run again and continue until the_number is larger or equal to the total entries.
After that it pulls the information from the database, using the_number as the line number of the results, in the mysql_result function. We create 'variables' which are placeholders for information by putting a '$' in front of a single letter combonation, and set what it's equal to. As we saw before, we use the 'echo' function to output the results onto the web page, only this time we're using the variables inside the quotes on the echo lines.
Finally, the '} else {' statement is ended, and the closing tags for the body and html are at the end. Enjoy!
Posted by Adam on 25.02.2009.
Textfield Overflow In AS2
How to make text overflow from one field to the next
One of the things lacking in Flash is the fact that it's one of the only programs in the Adobe suite that doesn't support text overflow into other text boxes. In an effort to work around it, I've managed to develop some AS2 that works - sort of. It's kind of a hack-y way to achieve the result one is looking for, but it seems to work for the most part. The code is as follows:
theString = "";
fontSize = 12 + 2; // [size] + [line spacing]
approxCharWidth = 34; // Characters per line
approxChar = tbox1._height/fontSize*approxCharWidth;
tbox1 = theString.slice(0,approxChar);
tbox2 = theString.slice(approxChar, theString.length);
Now, let's take this line by line: fontSize = 12 + 2; // [size] + [line spacing]
approxCharWidth = 34; // Characters per line
approxChar = tbox1._height/fontSize*approxCharWidth;
tbox1 = theString.slice(0,approxChar);
tbox2 = theString.slice(approxChar, theString.length);
1. theString = "";
This line defines the string, or the text that you're cutting up into the two boxes.2. fontSize = 12 + 2;
This is a lie. The font size is not actually 14, it's 12. It's the font size, plus the line spacing of the paragraph.3. approxCharWidth = 34;
This is the amount of characters that will fit width-wise in your text box. I figured this out simply by typing a bunch of 0's until it went to the next line, then counted them. You might want to be a little conservative with this number, as if it is too big, some of the content will go missing.4. approxChar = tbox1._height/fontSize*approxCharWidth;
In order to find out where to chop the string, we need to figure out approximately where the last character would be. This takes the height of the box, translates it into the number of lines and multiplies it by the number of characters per line. It uses the same principle as length*width=area.5. tbox1 = theString.slice(0,approxChar);
String.slice is a function used to take a chunk out of a string. In this case, we're defining the contents of text box 'tbox1' as the chunk that begins at character number '0' and ends at our approxChar number - which should be near the end of the text box.6. tbox2 = theString.slice(approxChar, theString.length);
Finally we take the remainder of the string by starting where we left off in the previous line - at approxChar - and end with the very last character, which would be the same number as the length of the string. Not so bad, huh? If you're still having problems, send me an email and I'll see what I can do for you. Hope you enjoyed the tutorial.Posted by Adam on 25.02.2009.
New Client Tool
Bigger, better, faster, and with new lemon fresh scent.
You stopped by on a good day. By reading this entry, you're going to save yourself time, money, and sanity. We've just recently developed our Client Tool for you. Yes you!
All you have to do is login (or you can register, then login if you haven't already), and you'll have access to instant quotes, project management and contact with our staff. Check it out! You won't be sorry.
Except that you hadn't found this before.
Posted by Adam on 20.02.2009.
The Rubber Line
AS2, Flash | A neat little AS2 script using OOP
This script draws a line using the curveTo() function, but bounces like an elastic each time it is dragged. This script has two versions: one with a static, horizontal line; and the second hangs like a piece of string.
Check out the hanging version at White Pine Lodge, one of our clients. Or download the static or string-type source.
Posted by Adam on 16.02.2009.
Polaroid Photo Gallery
AS2, Flash | Party like it's 1989
This photo gallery engine produces what looks like a number of Polaroid-style photos that overlap on top of each other. When the photo is clicked on, it expands and the photos stop producing. On a second click, the photo shrinks to it's original position and the loading continues.
The photos are generated from an XML file. Click here to download.
Posted by Adam on 10.02.2009.
Panel-Style Menu
A class that creates a menu from an XML file
This is the class used in my personal site: http://www.north43design.com/adam/. It creates a menu with a background colour, image, and internal swf. See the XML below to see the format. Download class here
1. Constructor
new panelMenu([xml file to load]:String, [movieclip to load into]:MovieClip, [full window panel menu]:Booleen, [height]:Number, [width]:Number, [title font format]:TextFormat, [title hover font format]:TextFormat)
The class can be created through the following script:
var panelHolder = this.createEmptyMovieClip("panelHolder", this.getNextHighestDepth());
var txtFmt:TextFormat = new TextFormat();
txtFmt.color = 0xFFFFFF;
var txtFmt_hover:TextFormat = new TextFormat();
txtFmt_hover.color = 0x000000;
var panelMenu:panelMenu = new panelMenu("xml/menu.xml", panelHolder, false, 350, 500, txtFmt, txtFmt_hover);
var txtFmt:TextFormat = new TextFormat();
txtFmt.color = 0xFFFFFF;
var txtFmt_hover:TextFormat = new TextFormat();
txtFmt_hover.color = 0x000000;
var panelMenu:panelMenu = new panelMenu("xml/menu.xml", panelHolder, false, 350, 500, txtFmt, txtFmt_hover);
2. XML Format
<content>Main XML node
<item>Each panel
<title>Here's a title</title>Title panel
<bgcolour>0xFF0000</bgcolour>Background colour of panel
<bgimage>images/image.jpg</bgimage>Background image of panel
<swf>swfs/flash.swf</swf>Swf for panel to load
</item>
</content>
<item>Each panel
<title>Here's a title</title>Title panel
<bgcolour>0xFF0000</bgcolour>Background colour of panel
<bgimage>images/image.jpg</bgimage>Background image of panel
<swf>swfs/flash.swf</swf>Swf for panel to load
</item>
</content>
3. Notes
When using a full screen version, height and width variables should still be entered in the constructor, although they have no impact on the functionality of the menu ie. new panelMenu("xml/menu.xml", panelHolder, true, 0, 999999999999, txtFmt, txtFmt_hover)
Posted by Adam on 25.02.2009.
Basic HTML
HTML | It's more basic than you think.
Okay, so you're thinking about starting to make websites and don't know a thing about HTML. Or maybe you know a little bit. Or maybe you know a lot, and are just checking to make sure we know our stuff.
In any case, this tutorial will hopefully get you on your way to web design.
The first step is to open up text editor, notepad, or any other plain text editor you might have. Then open a new file and copy and paste the following code into the page:
<html>
<head>
<title>
My New Web Page
</title>
</head>
<body>
Here's some content on my new web page!
</body>
</html>
Now save the file, and open it with your default browser. Congratulations, you've made your first website! Now we'll get into the details as to what everything means.<head>
<title>
My New Web Page
</title>
</head>
<body>
Here's some content on my new web page!
</body>
</html>
HTML is comprised up of 'tags'. Each of these tags begins with a '<' symbol, and ends with a '>' symbol. An 'opening tag' might look like this:
<tag>
And the 'closing tag' might look like this:
</tag>
You'll notice they're exactly the same, only the closing tag has a '/' in front of the word. So what's the point of these tags? They show us where a certain section of the web page starts and ends. Now let's look at our web page code.
1. <html>
2. <head>
3. <title>
4. My New Web Page
5. </title>
6. </head>
7. <body>
8. Here's some content on my new web page!
9. </body>
10. </html>
Line 1 just tells the browser that it's starting a new HTML document. The 'head' tag in line two is the area of the document that all the extras are put in. For example, you'll notice the title tag (beginning on line 3, ending on line 5) is in the head tag. Other things that can go in here are keywords for the web page, descriptions, style sheets, javascript, and a whole plethora of other things.2. <head>
3. <title>
4. My New Web Page
5. </title>
6. </head>
7. <body>
8. Here's some content on my new web page!
9. </body>
10. </html>
The body tag in line 6 is the one that holds all the contents of the web page that you actually see. You'll notice that 'My New Web Page' doesn't show up on the actual web page itself. Following the contents of the web page, we have the closing tags for the body and html sections.
Another thing that you'll notice is that the tags don't overlap each other. If one tag starts in another, it ends inside that tag as well. For example, incorrect code would be:
<html>
<head>
<title>
</head>
</title>
<body>
</html>
</body>
The title tag starts inside the head tag, but ends outside of it. As well, the body tag starts inside the html tag, and ends outside.<head>
<title>
</head>
</title>
<body>
</html>
</body>
I hope you enjoyed our first, very basic tutorial on HTML. We'll post some more on how to add to this later.
Posted by Adam on 18.01.2009.
Welcome to Our Blog!
A resource for developers, designers, and those without anything else to do.
Thanks for stopping by, and welcome to our official North43 Design blog. We hope to adopt the whole 'open source' attitude by sharing our resources with you and the rest of the web design community. Keep checking back for new projects, samples and tutorials to keep your skills sharp.
See you soon.
Posted by Adam on 14.01.2009.
Our Links
North43 DesignOur Latest
Client Login
Terms of Use
Categories
View AllNews
Samples
Tutorials
Archive
This MonthLast Month
March 2009
February 2009
January 2009