I came across the website HTML5games.com yesterday and there is some amazing stuff there. It’s one of those sites that makes you believe all the hype about HTML5. We’ll be making games that work for everyone without the need for a plug-in and it will all be open-source! This will all be true one day but I think we have a while yet. Why? A lot of the examples only work right in Safari or Chrome. It’s been a big enough challenge to get people to upgrade from Internet Explorer 6 to 7 and 8, and if IE9 doesn’t live up to it’s hype, I doubt enough people will move to Safari and Chrome to make HTML5 games a killer.
Also, take a look under the hood of some of these games. I’m amazed by the amount of JavaScript needed just to make something like Pong. I’ve said this before, but right not making HTML5 games is something that very experienced programmers are able to do. One of the things that made Flash great for making games is the actual Flash IDE. It’s pretty easy to get started with making a simple game because it only takes about 20 lines of code to create an object that you can control with the keyboard. Some of the examples I’ve seen take multiple JS files with a hundred lines of code each. The learning curve for HTML5 games is pretty high and I still think it’s going to take some kind of really kick ass IDE to allow beginners to start learning comfortably.
And I know there are developers out there that don’t want people to be able to take a look at their code and it’s as easy as right-click/view source to see how HTML5 games are made. And if you’ve spent weeks building a game for a company and then once you release it, anyone can come along and copy your code, it might be a reason for not wanting to make it using HTML5 and JavaScript. I realize this is all open source, but imagine how easy it would be to just copy and paste all the code and change the graphics a little bit.
I know this might come across as a “Flash guy” ranting but I’ve been spending a lot of time working with JavaScript and jQuery. I’ve never been a big fan of JavaScript but libraries like jQuery make it a lot easier to use. But I think for things like HTML5 games to take off, we’re going to need all the browsers to run JavaScript at the same speed and either an improved version of JS or an IDE that makes it easier to build them.
I’m a huge comic fan and as long as I can remember, Superman has been my favorite hero. But there’s a problem with Superman, he’s doesn’t make a very good role model. Why? Because Superman showed up on Earth and was immediately better than you at everything. That’s not really something you can aspire to unless, of course, you are planning on going to a planet where no one is as good as you at web design!
Batman is the one superhero that people can look to for inspiration because he’s one of the few that’s just a man. But in order to become Batman, he worked and worked until he became the best at all the things he needed to master to accomplish what he set out to. It’s been changed a bit over the years, but Batman became an expert at martial arts, an escape artist, a detective and a scientist. And, over the years, it’s become apparent that Batman will always be the last guy standing.
So what does this have to do with web design? Well, from what I’ve learned over the years, no one just shows up and is great at everything that it takes to be a great web designer. There are no Supermen out there, there are only people that have worked their way to becoming Batman. To be a web design Batman, you need to know design, HTML/CSS, JavaScript and technologies like Flash or PHP. And you need to be good at all of them.
Of course, not everyone can be Batman but trying to get there will make you better at what you do. Although, you could be like the Flash and be really, really good at one thing but I don’t think anyone is going to say the Flash is cooler than Batman.
The last little while I’ve begun to notice that some front end designers and developers seem to have a view of themselves as less then back end programmers or designers. I went through this too when I first graduated from school and started to become a part of web design community. All the popular blogs were by guys building web apps using Ruby or Python. I actually remember going to a blog of a HTML/CSS expert and actually thinking to myself, “All this guy does is HTML and CSS?” Now, of course, I realize how hard it is to make a lot of the designs I get in HTML and CSS. I really wish I could remember who that guy was because his blog looked pretty cool, well, at least in my memory.
Front end web people are just as important to the whole process as anyone else in the loop. We are the people that make the part that people see and interact with. In a lot of cases, you’re also the person that has to take what the designer has given you and make it work with the functionality that the programmer has created. Sometimes it seems half my job is explaining to designers why something isn’t possible and the other half usually ends up making it possible. Front end web designers are the people that take flat designs and turn them into something interactive and that can be a lot harder than most people think. Front end developers should never sell themselves short with what they can do. Especially now with browsers speeding up their JavaScript adding HTML5 support, the things front end developers can do is jumping by leaps and bounds.
A few years ago, I became obsessed with learning Flash and ActionScript and the more I learned, the more I started hearing about Flex Builder. It seemed to me at the time if you were doing serious Flash work and you wanted the rest of the community to take you seriously, you had to be building everything using Flex Builder. But FB isn’t built to do the simple stuff and as I figured out, it doesn’t really matter what you use to build your project but how it looks and works in the end. I work with HTML/CSS/JS and Flash. Those are the only things I have time to do. We have a couple of guys that do the back en programming. Their HTML skills reside somewhere in 1997 and they’ve barely heard of CSS.
It takes a lot of skill to be able to rebuild a design in pixels. If that’s your skill, you should be proud of it. With the upcoming advances in web technology, front end developers are going to be even more important.
I grew up in a town of 40,000 people in Manitoba and one of the things you learn about in a town like that is farmers. Farmers are very particular about the trucks they buy and they usually stick with one brand their entire lives. In fact, a lot of farm families all have the same brand of truck, “My dad drove a Ford, I drive a Ford and my kid drives a Ford” kind of thing. For the most part, all the different brands of trucks, Ford, GMC, Dodge, do the exact same thing. Some do some things a bit better than others, but not that much that everyone needs to buy a Ram. Why do they do it? Loyalty maybe or comfort level. Familiarity with how that truck works so they can fix it on their own. This is exactly how I view programmers.
As I learned more about the online web development community and all the great information that they put out there, I discovered that with this is a lot opinion. Some of it’s well thought out and some is pure crap. I’ve read countless articles and blog posts telling me Python is better than PHP, Ruby is better than Python, Flash sucks, Flash is awesome, and JavaScript is a horrible language. I thought, these guys are successful, they must know what they’re talking about. But the more you learn, the more you realize, these languages are like trucks, some are better a somethings than the others but they all basically do the same thing. So why would these programmers be so defensive about the language of their choice and so venomous towards other languages? I think a lot of it has to do with how much time and effort they’ve put into learning and using the language they’re most comfortable with.
David Arno posted on his blog, Why JavaScript is a toy language. I disagree with him, although I will admit, JavaScript isn’t the greatest language out there, it’s what we have and you can do some amazing stuff with it. Arno is a programmer that works a lot with Silverlight and Flash, and in a previous post, entitled HTML5 must not become the future of the web, he pretty much calls for the end of web browsers as we know it and a move to something like a bigger version of Flash Player. Here’s the perfect example of programming snobbery, he doesn’t like JavaScript and isn’t happy with the way the web is moving. Instead of adapting, he’s just saying the way he does stuff is better and everyone else should be like him. The people at Google seem pretty smart and they’re full steam ahead with HTML5. Does Arno know something they don’t?
As I’ve said before, I use PHP because it’s the language I’m comfortable with and it gets the job done. I like Flash and consider myself an intermediate level developer. And I’ve been good with JavaScript basics but now, mainly because the direction the web is moving, I’m learning more advance JS. When students come and visit the studio I work at, I always tell them, be awesome at HTML/CSS and then learn other languages that will let you get the job done and that you like working with. Pick the technology that you can do the best work with and don’t expect others to always agree with your choice and if they don’t, don’t worry about.
In the whole Flash vs HTML5 “debate” which is really Flash video vs the HTML5 video tag, Flash never stood a chance. Why? Because any smart developer would rather just throw in a <video> than what we have to do now. But while Flash is currently the the most popular way to deliver video content, that’s not all it can do and that’s not was it’s future should be. Adobe needs to look into Flash’s past and make that it’s future. I’m not talking about ActionScript 1.0, I’m talking about animation and I’m not talking about simple tweens and animated buttons, I’m talking about fully animated projects.
Anyone who’s used Flash’s animation tools knows they’re pretty good and easy to learn. How good is Flash’s animation? Well, in here in Canada, the cartoon channel Teletoon makes about half their own programing with Flash. And Adobe seems to realize that animation is still a big part of Flash, with the introduction of the bones tool in CS4 and some interesting spring tools in CS5. Perhaps taking the animation tools in Flash to the next level and appealing to the more professional level of animator would increase Flash’s use in traditional animation. In school, I looked forward to the times I was able to create animation in Flash, they were some of the best and most interesting projects I worked on.
Adobe can do one smart thing with Flash and that’s add an Export for Canvas tag option. I’ve seen it demoed and heard rumors that it was supposed to be in Flash CS5, same with the Smart Paste feature in Dreamweaver CS5, which would allow you to paste your Flash animation into an HTML5 document that would play it in the canvas tag. But for one reason or another Adobe didn’t include these options with the current release, but Adobe CTO Kevin Lynch has stated that Adobe will try to make the best HTML5 tools and turning Flash into a quick and easy way to create HTML5 animates would definitely help.
Flash might lose the video “war”, although I don’t really see why it matters if they do. But I think that AIR is going to lead to some interesting desktop programs being made, stuff like Avatar’s interactive movie trailer. And for sites like the ones featured on thefwa.com, sites that take 25 people and 8 months to build are still going to be the domain of Flash for the next few years at least. Nothing I’ve seen with HTML5 tells me it will be able to handle the type of sites that companies like Ford and Nike like to make to showcase their products.
In the end, I think Adobe would be smart to embrace Flash’s roots and maybe even create an animator version of Flash. They’ve been spending a lot of resources on the coding side, maybe it’s time to get back to what brought Flash to the game in the first place?
I’m going to show how to make a box that you can resize by dragging the corners. It’s not that hard but it does take some figuring out to get it to work right. Here’s what we’re going to make:
Start off with a new Flash file. And build this on your stage. The red box can be four instances of the same movie clip. For the document class, put ReSizerControl.
Create a new ActionScript file and use this code as the base for it:
Save this as ReSizerControl.as in the same folder as your .fla file.
What we’re going to do here is make functions to control the resizing when the corners are moused down on. But we’re also going to make it so we can move the black box around the stage which makes it a bit more difficult to set up the resizing functions. I’m going to put most of the explanations in the code, so that if you need to use this later, you’ll still have that info in there. The first thing, we’re going to do is get the bottom right corner to resize the box when you drag it around.
First, inside the constructor function, ReSizerControl(), put this:
1 2
//adds the listeners to the stage
addListeners();
Next, below ReSizerControl(), create this function:
Ok, not we have to create the functions, onResizerDown and onResizerUp. They’re going to be pretty similar, one activates the resizing and the other one cancels it.
privatefunction onResizerDown(e:MouseEvent):void { //create a variable that we can use to check which red block has been clicked on //converts the name of the object to a string so we can check it var targetName:String = e.target.name.toString(); //checks to see if the red block being clicked on is the one called 'reSizer_br' if(targetName == 'reSizer_br') { //if it is, then add the listener for reSize_br addEventListener(Event.ENTER_FRAME, reSize_br); //enable the user drag the clicked on block around the stage
e.target.startDrag(); } }
privatefunction onResizerUp(e:MouseEvent):void { var targetName:String = e.target.name.toString(); if(targetName == 'reSizer_br') { //Removes the listeners and stops the box from changing size removeEventListener(Event.ENTER_FRAME, reSize_br);
e.target.stopDrag(); } }
Now that we have that, we have to create the reSize_br function, but first we need this below the ReSizerControl extends MovieClip and about the ReSizerControl function:
privatefunction reSize_br(e:Event):void { //finds the mouse position and resizes the black box if(mouseX> block.x+20) {
newWidth = reSizer_br.x;
blockWidth = newWidth - block.x;
block.width = blockWidth; } if(mouseY> block.y+20) {
newHeight = reSizer_br.y;
blockHeight = newHeight - block.y;
block.height = blockHeight; } //checks if the red block is too close another one and stops it from moving if(mouseX< block.x+20) {
reSizer_br.x = block.x+21; } if(mouseY< block.y+20) {
reSizer_br.y = block.y+21; } }
Now if you test it, it should allow you to drag the bottom right red block and resize the block box. Now let’s make the bottom left one work. Add this to the addListeners function:
The reSizer_bl function is pretty much the same, just minor differences in how it resizes the black box. Figuring out the differences will really help you understand how this works. Now, let’s get the top two red blocks working. Add this to the onResizeDown function:
At this point all the corners should be able to resize the box, but we have one problem, they don’t move if they aren’t the one being clicked on. So we need to add this, just stick it at the bottom of the code:
Now the red blocks should stay attached to the corner when you’re resizing the block box. Now we have one final thing to do, make it so we can drag the black box around. It’s really simple, add this to the addListeners function:
Now you should be able to drag the box around and the red blocks will follow. Because we didn’t use any hard values in the resizing functions, we are able to make the black box dragable, which increase the usefulness of this, if you want to use it as a mask or something similar.
The other day, someone had put up a site on reddit.com’s web_design subreddit and asked everyone to give their opinion of it. One of the first comments I read said that the site fell apart if the visitor had JavaScript turned off. My first reaction was, “So what?” and this got me wondering, if someone turns off JavaScript and the site doesn’t function for them the way you intended it to, is that your problem or is it theirs? Should you, as the developer, spend the extra time making the site still look good for the few people that don’t run JavaScript? Or by turning it off, do they have to accept the fact that web sites aren’t going to look right every time?
As a web surfer, the only thing I block is pop-ups. I don’t block ads, I run every plug-in out there. Why? Because I want to get the full experience of the Internet and those things are all apart of it. And it wasn’t until recently that I began wondering about people that block JavaScript, mainly because as jQuery becomes more and more prevalant on the sites I build, sites with jQuery image slideshows or something similar. But the things I’ve built are pretty easy to fix with a bit of CSS, I just set up the div that that images are in to the height and width of one image and the set the div to overflow:none so it will only show the first image if the visitor has JS turned off. But I think that’s as far as I’m willing to go, I do that because it also helps the site display correctly if the visitor uses a a browser that runs JavaScript slowly.
What about plug-ins, like Flash Player and Silverlight? If the user has those disabled, should you have something in it’s place? Or just something saying they need to install Flash if they wish to view it? My opinion on this is pretty much the same as with JavaScript, if you choose to turn it off, that’s your problem and you’re the one who’s missing out. If the swf is essential to the site, then I’m sure the developers chose Flash for a reason and to use the site, you’ll need to enable Flash. Otherwise, it’s just something to add to the design and you can get by without it. I don’t think that front-end developers usually have the time to add alternative content for people that are blocking or disabling plug-ins.
And this is something that’s going to become an even bigger deal in a year or so. We’ve seen how long it’s taken to kill Internet Explorer 6 and the main problem it causes and going to be nothing compared to what IE7 and IE8 are going to do with HTML5. They don’t support any of it from what I understand and some developers moving to using the canvas tag in order to support the iPhone and iPad, some people are going to have to choose, build for the majority of web surfers (unfortunately true) or people that use browsers that support HTML5. Or are people going to spend the time building multiple versions of the same thing, which usually won’t have the same functionality. And I know the clients I work with won’t go for that!
My view is there users choose to turn this functionality off and if they do, then they should be prepared to view a lesser version of most sites. You can’t complain about your TV resolution if you don’t subscribe to the HD channels or if you don’t have an HD TV.
It’s been my experienced that front-end developers seem to get the short end of the stick when it comes to the importance of their work, especially if you listen to back-end and RIA programmers. But to me, a front-end developer’s main job is translating a static design into something that works on the web and that can be harder than most would suspect. On so many projects, I’m the one that has to take what the designer has made and build something that the back-end developer is going to be able to use with whatever dynamic system they’ve set up. Also, every web site that’s just a bunch of static pages are put on my desk and I usually have way less time than I’d like to get it built and online. But with everything, there are crappy front-end people, good front-end developers and then there’s great ones. What does it take to be a great one?
You need to be a HTML/CSS expert
I’m not saying you need to have everything memorized, I know I don’t, but you need to know how to use everything. You have to be able to take a design and almost immediately know how you’re going to lay it out. Not only that, you have to build everything with web standards in mind, which is harder than you’d think sometimes! If you even consider giving up and using a table because you can’t get something to position right, then you aren’t an expert. You should be able to make the site look good in all the major browsers, it doesn’t have to look exactly the same, just close enough that everyone’s happy. Also, being able to hardcore quickly will make your life a lot easier.
You need to be able to use Photoshop and Illustrator
I get designs given to me in a range of different formats, Photoshop psds, InDesign files, pdfs, and the odd Illustrator file. The designer is going to work in a program that they’re comfortable working in and it’s usually your job to get the assets you need out of it and turn them into a file format that you can use. Other times, you might have to remake something because you can’t get anything usable out of the file they gave you. I rarely get to do a full design because I work with 5 designers, but the odd time I’m the one that has to design the site and the more you know about a program like Photoshop, the better designs you can make.
You need to know at least basic PHP or a similar language
You can’t always be going to the back-end guys with every dynamic site. Sometimes you just need a site that displays the content dynamicly and if you can do that, it increases your value to where you work or to your clients but it also allows you to not bother the programmers with something they’d find pretty simple. Plus, knowing a language like PHP will enable you to talk to the programmers and understand what they want when you’re building the basic structure of a site that uses something like a content management system.
You need to know how to work with something like Flash or Silverlight
Clients love splashy pages and, trust me, they don’t think Flash is dead. The more you can do with something like Flash, the more you’re going to be able to do for your clients. Whether it’s just basic animations or something more complex like a game that fits the theme of the site, Flash can add some fun and make a site more dynamic. I build a few sites that are completely Flash every year and the more I know about Flash, the better the site will be programmed and the better it will run.
You need to know JavaScript and how to use jQuery
When I first started out, JavaScript was something that you never used. I remember people ripping sites because it had a JavaScript component and it was because browsers would be bogged down by too much of it. But with Chrome leading the way, JS has come back into fashion. jQuery lets you do simple animations that aren’t really worth using Flash for and it can also be used to make a site more dynamic. The more you know about JavasScript, the better, because since it’s rendering by the browser and they all have their own rendering engine, not everything works in the same way. The more experience you have with JS, the better prepared you’ll be to deal with those issues.
If you can do all that, you’re going to be the most popular person around. If you can do even more, then you’ll be rich. Like rich enough to afford a Macbook Pro! Plus, front-end devs are the cool people in the web design world.
The college I went to does an annual school trip to web design and development businesses for first year students. It’s to show them what the industry is really like and the differences between the firms that are out here. This is the second time they’ve come to my work while I’ve been employed there and I try to use the hour to give them as much advice as I can. I’ve stayed friends with a couple of my teachers and one had been telling me about a new teacher that was telling the students that Flash was dead. Now, half the course is design and the other half is programming and Flash takes up a large part of that. So I took the opportunity to, not continue the whole HTML5 vs Flash debate, but to tell the students not to ignore any technology. Why? Not because Flash is always the best thing or HTML5 isn’t going to shake things up but because the vast majority of Internet users don’t care what you made that site or game in. They only care that it works.
Since Steve Jobs called for the death of Flash, which is all about keeping money coming through the app store, there’s been huge debate about the future of the web and it’s not slowing down. Blogs like The Flash Blog are putting up posts without comments because the debate can get so heated it can turn personal. But when I try to talk to the people around me about it, very few understand what I’m talking about and even less care. And that’s the thing we all need to remember. As web designers or developers, we are, for the most part, early adopters. And a large amount of those are Mac users. There’s billions of computer users in the world and they run Windows, do you think they care how a Youtube video runs on somebody’s MacBook Pro? Most don’t really understand what Flash is, they just know once they download that thing that the computer tells them to, the video they want to watch or the game they want to play works now.
So what am I saying here? I’m not saying Apple users don’t matter, I do have an iPhone. I’m just saying that there are still things that only Flash can do. I’ve yet to see an HTML5/CSS/JS site that has the interactivity of some of the amazing sites featured on thefwa.com, sites that take 25 people and months to make. My work is currently pitching a site to a client that has to be made in Flash, it’s going to have a real person that interacts with certain button clicks and the background is going to have video running constantly. The fact is, the client wants a certain kind of site and the technology that we use doesn’t matter to them as long as it’s able to reach the most amount of people as possible. And if that means they get the site they want, then they’ll gladly sacrifice those people that block Flash or those that won’t visit the site because their computer’s CPU runs at 100%.
Somewhere in there I have a point. It’s don’t stop uses a technology because someone you look up to tells you not to. Use the best one for the job you need to do. I would say at least 75% and maybe even more don’t care what you made it in. Look how long it’s taken us to make people understand there’s more than one Internet browser. Try talking to your sister about something called Flash, it’s like trying to explain something from Final Fantasy to her. I read today that 73 million people play Farmville, do you think they care about anything other than that their games work in Facebook?
If you’re a Flash hater, Flash Catalyst is you worst nightmare. Buried under all the Flash is dead and the apparent uselessness of the Packager for iPhone in Flash CS5 is Adobe’s Flash Catalyst. What’s Flash Catalyst? Essentially, it’s a program that let’s you take an Illustrator or Photoshop file and turn it into a fully functional Flash file without any coding. And that’s why you’re going to start seeing a lot more Flash on the web.
It’s a program that let’s non-coders make something that they wouldn’t have been able to make before because now you can do it without even basic programming knowledge. You’re the new designer at a company? Here’s a book, learn how to make this image slideshow in Flash Catalyst. They make one, then they know how to do it and they’ll make more and more. Those people that could make crappy slideshows using Classic Tweens and 1000 frames? Now they can build things with buttons and scroll bars. But, at the same time, Flash Catalyst is going to free people up to build those minor Flash things quicker. I don’t know how many times I’ve sat there staring at code because the project I’m building isn’t working and it turns out it was a spelling mistake. Uses a program like this is going eliminate stuff like that, hopefully.
Look, people are going to make bad stuff on the Internet and they’re going to use Flash Catalyst to make bad stuff but it’s really no different then the entire history of the web, people still use tables to build web sites. But what’s going to happen is talented designers are going to be able to make stuff in Flash that they would never have been able to make before. With the introduction of ActionScript 3.0, there had been complaints that Flash had moved into the realm of “real” programmers and away from the designers that had originally started using Flash. I think, for the most part, Flash Catalyst is going to allow them to get comfortable with making things in Flash again.
There’s two ways this can go, people can ignore it or they’ll see what they can do with it and they’ll take the ball and run with it. I’m thinking that people will see the potential behind Flash Catalyst and it will take off. Here’s a video showcasing what it can do:
