Making a Myspace Profile with Div Overlays
If you haven’t first read how to turn everything off on your myspace profile, go here and read all about it. Then, come back and we’ll get started. I’ll wait…
Now that you’re up to speed on how the whole CSS thing works, and how to just hide everything, I’d recommend downloading WaxJelly’s myspace Practice Page so you don’t have to work in the black hole that is myspace’s live site. You can find the flat file here. Download it, unzip it, and us it to follow the instructions below.
[coming soon - we swear]
Actionscript Key Class and Listener (AS 2.0)
I find myself using a crap load of key listeners when working with flash applications for things like form validation, restricting characters, and more. Here’s a quick tutorial and a reference list to get you started.
First, let’s setup a basic key listener. On frame 1 of your timeline, name a layer “code” and slap this crap in the actions panel:
keyListener = new Object();
keyListener.onKeyDown = function() {
x = Key.getAscii();
trace("You hit: " + x);
};
Key.addListener(keyListener);
When you run this (CTRL + ENTER on PC or APPLE+Enter on Mac) and then hit a buncha keys, you’ll get a trace that will probably look like :
You hit: j You hit: k You hit: l You hit: ;etc...
It’s worth noting here that you could also listen for “onKeyUp” if you wanted to wait for the key to be released, or you could run something like the following if you want to listen for both (for whatever reason)
keyListener = new Object();
keyListener.onKeyDown = keyListener.onKeyDown = function() {
x = Key.getAscii();
trace(”You hit: ” + x);
};
Key.addListener(keyListener);
Now. That’s great, and you can probably see where it can go from here, but in case you can’t (or just need some inspiration), here’s a few ideas.
First of all, I always like to run a switch statement for finding which key got pressed, and running different functions for each key. Let’s say we had a ball_mc on the first frame (in a different layer from our “code” layer), and we want to just move it around. Here’s how we’d do it.
// set the number of pixels we want the ball to move each frame
var speed:Number = 10;
keylistener = new Object();
keylistener.onKeyDown = function() {
switch (Key.getCode()) {
case Key.RIGHT:
ball_mc._x += speed;
break;
case Key.LEFT:
ball_mc._x -= speed;
break;
case Key.UP:
ball_mc._y -= speed;
break;
case Key.DOWN:
ball_mc._y += speed;
break;
}
};
Key.addListener(keylistener);
If you haven’t already, paste this code in your “code” layer (replacing the old code completely), and throw a square on the screen, make it a movie clip, and name it’s Instance “ball_mc”. (why a square? ’cause we can, that’s why). Now run the code, and hit the arrow keys.
NOTE: If nothing happens first, you may need to click inside the movie once to “focus” the flash movie.
It’s worth noting here that I’ve now used two different methods of the Key listener class to check for the key. In the first set of code, I used “Key.getAscii()” which returns the ASCII code for the key (duh). In the second example, I used “Key.getCode()” which returns a simple, and easy to use name for the key. The reason there are two is simply because the Key.getAcsii() doesn’t have the full list of keys available to it (and the Key.getCode() does), and since it’s easier to read, I use it. For a complete list (as far as I can tell), refer to the end of this post. For now, let’s move on.
We’ll make one final modification to this code before I send you off to play with this and break it all to hell (’cause that’s the fun part). What if you wanted to add a Photoshop-like quality, and move the movieclip further if the Shift key was held down with the arrow key? I call this “power-nudge”. Here’s how.
Read the rest of this entry »
OS X Commands list (A-Z)
This is a great list (thanks to ss64.com/osx) that when I found I wished I’d read a long time ago. I find myself referring to it often, so I’ve added it to del.icio.us and I thought I’d add here as well.
- alias Create an alias
- alloc List used and free memory
- awk Find and Replace text within file(s)
- basename Convert a full pathname to just a folder path
- bash Bourne-Again SHell (Linux)
- bless Set volume bootability and startup disk options.
- break Exit from a loop
- cal Display a calendar
- case Conditionally perform a command
- cat Display the contents of a file
- cd Change Directory
- chflags Change a file or folder’s flags.
- chgrp Change group ownership
- chmod Change access permissions
- chown Change file owner and group
- chroot Run a command with a different root directory
- cksum Print CRC checksum and byte counts
- clear Clear terminal screen
- cmp Compare two files
- comm Compare two sorted files line by line
- complete Edit a command completion [word/pattern/list]
- continue Resume the next iteration of a loop
- cp Copy one or more files to another location
- cron Daemon to execute scheduled commands
- crontab Schedule a command to run at a later date/time
- cut Divide a file into several parts
Blogspot.com vs Wordpress.com - the battle for freedom (Part 1)
Lately I’ve been asked by several people whether I prefer wordpress.com (waxjelly.com’s choice of blog hosting) or blogspot.com (which I use for buzzgorilla.com). Now to make this post “fair”, I should say that #1 I don’t have a predesired outcome (if I did, I wouldn’t be straddling the fence with my blogs, now would I?), and #2 since these are both free hosted blogs, and the two biggest players in the game, I think it’s completely fair to require enormous amounts of functionality and free crap from them.
Great. Let’s get started.
- We’ll begin with the setup process. Both sites are fairly easy to setup and activate, though wordpress feels a little more secure with their multiple automated emails in the activation process. Their login screen is also beautiful, but the dashboard throws you automatically to a page that doesn’t seem very useful until you’ve really gotten into your blog routine.Blogspot however, is a more user-friendly interface for the “about me section”, and now with myspace being so prevelant makes me think that google may be going social networking sooner than anticipated, which seems cool. The dashboard itself at blogspot is a bit disjointed, however, as they only process that you’re logged in and looking at your own blog if you click on either an “edit this post” link or your own personal image. Which, in the case of buzzgorilla, I’ve removed from the interface, so it creates unnecessary clicks to get into the dashboard area. But that’s for later discussion.For now, score 1 for Blogspot as their activation interface feels quicker, more personalized, and hassle free.
- Editing the template. Hands down, this goes to blogspot. One of the most frustrating things about wordpress is that they not only have a much more complex template system than is necessary (I’ve done at least a dozen wordpress themes for remote hosting sites, and it’s always a major ordeal), but they make you PAY to use that feature on the “free” hosting service! Their “Upgrades” tab is a great idea, but the fact that the only Upgrade listed is “Custom CSS”, no plugins (waxjelly could use a flash plugin asap), no cool multi-user permission upgrades, nothing. $15 is a little steep to be able to do something I’d expect to do anyway. Especially considering that I can’t import outside templates, even from an extensive official wordpress gallery.Blogspot’s template management is very simple and clean, with the only exception being that they still use a “publish” paradigm, which means you have to wait for a while (if you have multiple posts) for the template to repopulate across all the pages on your site. This isn’t enough to make ‘em lose, and it’s also something they’ve already announced they’ll be correcting in the new beta.blogger (info available at the blogger buzz site).Score 1 more for blogspot.
Great Flash Learning Resources (Flash AS 2.0)
ONLINE:
- Flash Guru
- Simply one of the most well-respected and knowledgable flash developers there are, this site is a steady resource of insider information, tips, tricks, and great detail on the most important stuff.
- Flash Kit
- A great community site with lots of downloadable source code and a ton of tutorials. Some of the tutorials are total crap, but there are enough good ones to make an occasional visit worth it.
- OS Flash
- I’m finding myself more and more frequently getting the questions I have answered at this site.
- Grant Skinner
- gBlog
- This is another one of the “Big Dogs” in the industry, and worth every penny. His blogs are always on the cutting edge of the technology, and his galleryincomplet project is simply stunning.
- gBlog
- Robert Penner
- The daddy of flash physics, this is the site to go to for the beginner’s look into the world of flash math. Unfortunately, he hasn’t updated in a while, so you’ll find a lot of really interesting ActionScript 1 stuff, which isn’t terribly useful for beginners.
- Joshua Davis
- Cutting edge developer with lots to say. You won’t find a ton of usable code, tutorials, etc at this site, but there is a lot of valuable information and inspiration just the same.
- Colin Moock
- The insider’s insider. This guy literally writes the book on AS 2.0. Go to his site, and any site he’s involved with, and you’ll walk away smarter.
- Kirupa
- I can’t stress enough the quality of the tutorials on this site. I wish they had more of them, but the ones they have are some of the best you’ll find.
- Actionscript.org
- The site I hit first with any question simply for the sheer number of tutorials there. They have everything from AS 1 up, and lots of hidden and undocumented tools as well.
- gotoAndPlay.it
- A great resource for flash gaming tutorials, examples, and community forums.
- gotoandlearn.com
- A great list of tutorials and source code submitted to us by a reader.
- Brendan dawes
- I haven’t been using deli.cio.us for long, so there have been several occasions in which I’ve lost my bookmarks. Brendan’s site was unfortunately one that I’d lost, so it was fortunate when a reader saw our post, and commented back. (Thanks, Moodyz.) Oh yeah, go to this site, and download a crap load of hugely influential and inspirational tutorials.
- PressTube
- Great source of inspiration both in flash development and artwork.
- Bit-101
- Tons of fun. Not necessarily the most useful site, but who says inspiration isn’t useful?
- 27bobs
- You’ll find lots of downloadable source code here, and some of the most innovative ideas for uses of flash anywhere.
- Friends of Ed
- This is the flasher’s best friend. TONS of downloadable source code on lots of topics, for lots of applications, from lots of people. If you have a choice between any 2 books on the same topic, and one of them is friends of ed, buy the Friends of Ed.
- Mike Chambers
- And finally, we get to the godfather. Go there. Read. Learn. Be an insider yourself.
BOOKS:
- Essential ActionScript 2.0
- ActionScript 2.0 Language Reference
- Flash 3D Cheats Most Wanted
- Flash Math Creativity
- Extending Macromedia Flash
TIP: Always search for private sellers on amazon. In everyone of these pages, you’ll see a link that says “x New and Used”. Click it. I buy almost all of my books this way, and have yet to have a bad experience. This isn’t to say you wont, but it’s obviously very rare.
More coming soon
Making a full-stage grid using the drawing API (Flash AS 2.0)
I used this basic idea in my “Snap-To-Grid” post, but here’s the simplest way to setup a full-stage grid in flash using only code.
var cellSize:Number = 70;
var cols:Number = Math.ceil(Stage.width / cellSize);
var rows:Number = Math.ceil(Stage.height / cellSize);function drawSquare (who:String, to_x:Number, to_y:Number) {
this.createEmptyMovieClip(who, this.getNextHighestDepth());
with (this[who]) {lineStyle(1, 0×999999, 100);
moveTo(0, 0);
lineTo(cellSize, 0);
lineTo(cellSize, cellSize);
lineTo(0, cellSize);
lineTo(0, 0);
_x = to_x;
_y = to_y;}
}
for (var c=0; c<cols; c++) {
for (var r=0; r<rows; r++) {
drawSquare(”c_”+c+”_r_”+r, c*cellSize, r*cellSize);
}
}
Now, as always, here’s the breakdown.
HTML and web design for the VERY BEGINNER Part 1 (HTML/CSS/XML)
I just found an email I recently sent to a friend who wanted a crash course on html. I thought this might be helpful here as well.
HTML: HyperTextMarkup Language…
Basically, you just want to keep in mind that everything in html is based on “tags” (<tag>) which is surrounded by “brackets” (<>). When you apply something to a “tag” in html, you surround it with the tags associated with the function you want. For example, if you want to make some font BOLD, you’d write the text (”Justin’s Font”) in an html editor or even just notepad, and then you’d surround “Justin’s Font” with <b> tags. The “opening” tag goes before the font, the “closing” tag goes after it. The only difference between an opening and closing tag is that the closing one has a slash “/” before the tag name.
In other words, you’re text in bold would look like this:
<b>Justin’s Font</b>
Then, once you start learning tags, you’ll need to know a little about “attributes”. This is just a bit more detail that most tags have. For creating a link, for example, you’d use an “anchor” tag.
NOTE: (”Anchors” are < a > tags, and are just about anything you want the mouse to respond to or interact with).
<a>Justin’s Font</a>
This is nice, but it doesn’t do anything. If you wanted your previous font to link to, say, cnn.com, you’d make it look like this:
<a href=”http://www.cnn.com“>Justin’s Font</a>
The “href” means “hyper reference”. In other words, when someone clicks on “Justin’s Font”, they’ll be “linked” to cnn.com. got it?
Once you get the hang of these tags, and pretty much understand their attributes, you should then quickly move into css, ’cause it’ll change your life. And, if you wait, you’ll hate yourself for it, cause css makes html so much easier, but you have to understand html first.
CSS - Cascading Style Sheets:
This is simply a language used to “style” html. It also makes repetitive progamming in html less troublesome, and gives you more control over what’s going on. Here’s a quick example: