Atomic Robot Design » flash

Some things I’ve learned in 3 years as a web developer

Mike — Tue, 01 Nov 2011 01:33:36 +0000

There have to be few industries that move at the speed that the web does. I can’t believe how many things I learn in school are useless now. Yes, that’s right, I learned Adobe Director. In fact, I remember seeing the A List Apart previewing HTML5 and thinking, “Man, that’s going to be so cool in the future.” Flash was going to take over the web and JavaScript was the worst thing ever invented.

So three years later, in a world of hover cars and jet packs, what do I know now? Well, other than the fact that I’m crazy mad that we don’t have hover cars and jet packs, I know that I’m working on with technologies and programming languages that I never thought I would. I remember three years ago looking at people that spent a majority of their time working with HTML, CSS and JavaScript and thinking “Really? That’s what you do? That’s got to be pretty boring.” Now, I’m one of those people and I totally enjoy what I do.

I’ve learned that every programming language on the web sucks and is going to die. Or it’s totally awesome and is going to take over. Or make a comeback. Or it’s underrated. For every blog post I’ve see about Java being this close to disappearing from the world forever, followed by one talking about how there’s never been more Java work out there.

I’ve learned that people can get way too involved in whether the language they like is better than one they don’t. Whether or not a language uses curly braces shouldn’t matter if the end product is great or if the programmer likes it. Pick your language and become awesome at it. Being awesome at PHP will always be better than being OK at Ruby. Unless, of course, you really hate curly braces.

I’ve learned that we as web designers and developers should never let a company tell us what technologies should do. But at the same time, don’t refuse to use any technology just because of who makes it.

I’ve learned that comparing yourself to your idols can be the worst thing you can do. Just because they can make something amazing using a cutting edge feature, doesn’t mean they know how to build a WordPress theme or a Flash game. Don’t look down on what you can do because of what others can do.

I’ve learned that just because a blog gets thousands of hits a day, doesn’t mean you should give a crap what that person has to say. And I’ve learned that just because a person has 30 followers on Twitter, doesn’t mean they don’t know what they’re talking about.

Some things have stayed the same. Superman is still the best superhero. Apple fanboys are annoying. And I’ll try every code editor I come across.

When should you use Flash?

Mike — Sun, 03 Oct 2010 06:59:54 +0000

Some people would say that the answer is never but I’m going to have to disagree with them. For the past maybe 8 years or so, Flash has been the only way to do a lot of the more dynamic effects and sites on the web. Even now, with JavaScript engines performing far beyond what anyone expected a few years ago, Flash still might be the best way to go.

I will say there are times when I see Flash being used and it frustrates me. I don’t see any need now to use Flash for only the navigation on an otherwise HTML site. I’ve yet to see an effect special enough to justify it. Most, if not all, of the Flash effects I’ve seen on website navigations I’ve seen could either be created with JavaScript or wasn’t worth the extra memory. It goes without saying that Flash intros are long dead and so are Flash banners used to in the header of a website. I’ve built sites with these and usually they just feature something movie or a sheen moving across quickly and they end up being more annoying then adding anything to the design. Also, if you’re Flash site looks like an HTML site, then you really wasted you time building it in Flash.

Flash still has it’s strengths though. I really think that if you want to create and experience, you still need to use Flash. Firefox 4 shows some of the potential of what we’ll be able to do eventually with just CSS but for now, Flash is still the way to go. Great examples of sites like this are usually made by companies who want a site to showcase a product. Car companies do this a lot with Flash sites that mix in a lot of different media, like video and other interactive elements.

Personally, I think video is going to be the domain of Flash for the next couple of years, for two reasons. 1) Until IE9 becomes the main version of IE on the market a majority of the browsers out there don’t recognize the video tag and 2) Until one of the codecs become dominant, Flash will be the easiest way to get your video online. Plus, until the end of IE6, you’ll always need to have Flash as at least a back up if IE6 users are part of your target audience.

Flash is a long way from dead but I think it’s feeling the backlash of developers overusing it for the past few years. I’m still a big fan of Flash and I really believe that sometimes Flash is still your best option to build interactive features on a website. If you’re someone like me, who is still learning JavaScript, in order to get things built fast and to know it will function how you want, Flash is right there. And a big point I think that a lot of people miss is the average Internet surfer doesn’t care what you built it in as long as it works.

Is Flash’s future it’s past?

Mike — Tue, 11 May 2010 16:44:20 +0000

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 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?

Make a resizable, movable box in Flash

Mike — Thu, 29 Apr 2010 04:19:18 +0000

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:

Download the files.

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;

public class ReSizerControl extends MovieClip
{

public function ReSizerControl()
{

}
}
}

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:

1
2
3
4
5
6

private function addListeners()
{
reSizer_br.addEventListener(MouseEvent.MOUSE_DOWN, onResizerDown);
reSizer_br.addEventListener(MouseEvent.MOUSE_UP, onResizerUp);
reSizer_br.buttonMode = true;
}

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

private function 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();
}
}

private function 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:

1
2
3
4

private var blockWidth:Number;
private var newWidth:Number;
private var blockHeight:Number;
private var newHeight:Number;

These variables are going to enable us to resize the block’s width and height. Here’s the reSize_br function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

private function 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:

1
2
3

reSizer_bl.addEventListener(MouseEvent.MOUSE_DOWN, onResizerDown);
reSizer_bl.addEventListener(MouseEvent.MOUSE_UP, onResizerUp);
reSizer_bl.buttonMode = true;

And this to the bottom of the onResizeDown function:

1
2
3
4
5

if (targetName == 'reSizer_bl')
{
addEventListener(Event.ENTER_FRAME, reSize_bl);
e.target.startDrag();
}

And this to the bottom of the onResizeUp function:

1
2
3
4
5

if (targetName == 'reSizer_bl')
{
removeEventListener(Event.ENTER_FRAME, reSize_bl);
e.target.stopDrag();
}

And here’s our reSize_bl function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

private function reSize_bl(e:Event):void
{
if (mouseX > 0)
{
block.x = reSizer_bl.x;
blockWidth = reSizer_br.x - block.x;
block.width = blockWidth;
}
if (mouseY > block.y + 20)
{
newHeight = reSizer_bl.y;
blockHeight = newHeight - block.y;
block.height = blockHeight;
}
if (reSizer_bl.x > (reSizer_br.x - 20))
{
reSizer_bl.x = (reSizer_br.x - 21);
}
if (reSizer_bl.y < (block.y + 20))
{
reSizer_bl.y = (block.y + 21);
}
}

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:

1
2
3
4
5
6
7
8
9
10

if (targetName == 'reSizer_tr')
{
addEventListener(Event.ENTER_FRAME, reSize_tr);
e.target.startDrag();
}
if (targetName == 'reSizer_tl')
{
addEventListener(Event.ENTER_FRAME, reSize_tl);
e.target.startDrag();
}

And this to the onResizeUp function:

1
2
3
4
5
6
7
8
9
10

if (targetName == 'reSizer_tr')
{
removeEventListener(Event.ENTER_FRAME, reSize_tr);
e.target.stopDrag();
}
if (targetName == 'reSizer_tl')
{
removeEventListener(Event.ENTER_FRAME, reSize_tl);
e.target.stopDrag();
}

And we need to add these two functions:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

private function reSize_tr(e:Event):void
{
if (mouseX > block.x + 20)
{
newWidth = reSizer_tr.x;
blockWidth = newWidth - block.x;
block.width = blockWidth;
}
if (mouseY > 0)
{
block.y = reSizer_tr.y;
blockHeight = reSizer_br.y - block.y;
block.height = blockHeight;
}
if (mouseX < block.x + 20)
{
reSizer_tr.x = block.x + 21;
}
if (mouseY > reSizer_br.y + 20)
{
reSizer_tr.y = reSizer_br.y + 21;
}
}
private function reSize_tl(e:Event):void
{
if (mouseX > 0)
{
block.x = reSizer_tl.x;
blockWidth = reSizer_tr.x - block.x;
block.width = blockWidth;
}
if (mouseY > 0)
{
block.y = reSizer_tl.y;
blockHeight = reSizer_bl.y - block.y;
block.height = blockHeight;
}
if (mouseX > reSizer_tr.x - 20)
{
reSizer_tl.x = reSizer_tr.x - 21;
}
if (mouseY > reSizer_bl.y - 20)
{
reSizer_tl.y = reSizer_bl.y - 21;
}
}

And of course, this to the onResizeDown function:

1
2
3
4
5
6
7
8
9
10

And to the onResizeUp function:

1
2
3
4
5
6
7
8
9
10

Now add this to the addListeners function:

1
2
3
4
5
6

reSizer_tr.addEventListener(MouseEvent.MOUSE_DOWN, onResizerDown);
reSizer_tr.addEventListener(MouseEvent.MOUSE_UP, onResizerUp);
reSizer_tr.buttonMode = true;
reSizer_tl.addEventListener(MouseEvent.MOUSE_DOWN, onResizerDown);
reSizer_tl.addEventListener(MouseEvent.MOUSE_UP, onResizerUp);
reSizer_tl.buttonMode = true;

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

private function positionReSizer_bl(e:Event):void
{
reSizer_bl.x = block.x;
reSizer_bl.y = block.y + block.height;
}
private function positionReSizer_br(e:Event):void
{
reSizer_br.y = block.y + block.height;
reSizer_br.x = block.x + block.width;
}
private function positionReSizer_tl(e:Event):void
{
reSizer_tl.x = block.x;
reSizer_tl.y = block.y;
}
private function positionReSizer_tr(e:Event):void
{
reSizer_tr.x = block.x + block.width;
reSizer_tr.y = block.y;
}

To use these functions, we need to change our onResizerDown and onResizeUp functions:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

private function onResizerDown(e:MouseEvent):void
{
var targetName:String = e.target.name.toString();
if (targetName == 'reSizer_br')
{
addEventListener(Event.ENTER_FRAME, reSize_br);
addEventListener(Event.ENTER_FRAME, positionReSizer_bl);
addEventListener(Event.ENTER_FRAME, positionReSizer_tr);
e.target.startDrag();
}
if (targetName == 'reSizer_bl')
{
addEventListener(Event.ENTER_FRAME, reSize_bl);
addEventListener(Event.ENTER_FRAME, positionReSizer_br);
addEventListener(Event.ENTER_FRAME, positionReSizer_tl);
e.target.startDrag();
}
if (targetName == 'reSizer_tr')
{
addEventListener(Event.ENTER_FRAME, reSize_tr);
addEventListener(Event.ENTER_FRAME, positionReSizer_br);
addEventListener(Event.ENTER_FRAME, positionReSizer_tl);
e.target.startDrag();
}
if (targetName == 'reSizer_tl')
{
addEventListener(Event.ENTER_FRAME, reSize_tl);
addEventListener(Event.ENTER_FRAME, positionReSizer_tr);
addEventListener(Event.ENTER_FRAME, positionReSizer_bl);
e.target.startDrag();
}
}

private function onResizerUp(e:MouseEvent):void
{
var targetName:String = e.target.name.toString();
if (targetName == 'reSizer_br')
{
removeEventListener(Event.ENTER_FRAME, reSize_br);
removeEventListener(Event.ENTER_FRAME, positionReSizer_bl);
removeEventListener(Event.ENTER_FRAME, positionReSizer_tr);
e.target.stopDrag();
}
if (targetName == 'reSizer_bl')
{
removeEventListener(Event.ENTER_FRAME, reSize_bl);
removeEventListener(Event.ENTER_FRAME, positionReSizer_br);
removeEventListener(Event.ENTER_FRAME, positionReSizer_tl);
e.target.stopDrag();
}
if (targetName == 'reSizer_tr')
{
removeEventListener(Event.ENTER_FRAME, reSize_tr);
removeEventListener(Event.ENTER_FRAME, positionReSizer_br);
removeEventListener(Event.ENTER_FRAME, positionReSizer_tl);
e.target.stopDrag();
}
if (targetName == 'reSizer_tl')
{
removeEventListener(Event.ENTER_FRAME, reSize_tl);
removeEventListener(Event.ENTER_FRAME, positionReSizer_tr);
removeEventListener(Event.ENTER_FRAME, positionReSizer_bl);
e.target.stopDrag();
}
}

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:

1
2
3

block.addEventListener(MouseEvent.MOUSE_DOWN, onBlockDown);
block.addEventListener(MouseEvent.MOUSE_UP, onBlockUp);
block.buttonMode = true;

And then add there two functions at the bottom of the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

private function onBlockDown(e:MouseEvent):void
{
e.target.startDrag();
addEventListener(Event.ENTER_FRAME, positionReSizer_br);
addEventListener(Event.ENTER_FRAME, positionReSizer_bl);
addEventListener(Event.ENTER_FRAME, positionReSizer_tr);
addEventListener(Event.ENTER_FRAME, positionReSizer_tl);
}
private function onBlockUp(e:MouseEvent):void
{
e.target.stopDrag();
removeEventListener(Event.ENTER_FRAME, positionReSizer_br);
removeEventListener(Event.ENTER_FRAME, positionReSizer_bl);
removeEventListener(Event.ENTER_FRAME, positionReSizer_tr);
removeEventListener(Event.ENTER_FRAME, positionReSizer_tl);
}

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.

You’re going to see a lot more Flash on the web because of Flash Catalyst

Mike — Fri, 16 Apr 2010 02:35:14 +0000

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:

Google Chrome will include Flash Player and that’s a good thing

Mike — Wed, 31 Mar 2010 00:29:58 +0000

Today Google’s The Chromium Blog announced that the developer version of Chrome will come with Adobe’s Flash Player pre-installed and I think this is some of the best news that any web designer or developer could hear. Why is it a big deal? If Flash Player comes pre-installed on all of the main browsers, you’ll know that you’re Flash content will be guaranteed to be accessible to close to 100% of Internet users. No more need to check what version they have, the browsers would be able to update Flash Player automatically. And Adobe would be able to work with each browser maker to tweak Flash Player to run better, custom versions wouldn’t be that big of a deal if the Google or Mozilla worked with Adobe on improving Flash Player.

If you read the blog post on The Chromium Blog, don’t bother reading the comments, instead of an intelligent debate about whether Google is moving in the right direction, it’s just a lot of blather from what is becoming the HTML5 “tea party”. I really don’t understand the hate for Flash nor the absolute certainty that HTML5 is better and going to be a replacement. I’ll use the best option, whether it’s Flash or something else. Dismissing one out right makes no sense to me.

I’ve been saying that the browsers should do this for a while now and I’m not surprised that it was Google that did it first. If Mozilla does it with Firefox, than I’m sure that the others will follow. Flash is a great technology and if companies like Google get involved, I’m pretty excited about how much better it can get. These are great days for the Internet and we shouldn’t ruin it by turning everything into this vs that battles.

A simple external file loader for ActionScript 3

Mike — Tue, 09 Mar 2010 03:11:17 +0000

One of the big mistakes that beginners make when they’re making their first Flash projects is importing all the graphics and making movieclips with tons of frames, resulting in a Flash file that is huge. The bigger the .swf, the longer it will take to load. The simplest way to fix this is to load larger files externally. Loading files is pretty easy in ActionScript 3 so I’m not going to show you how, I’ve just made this ExternalLoader class that does the job and I use it a lot at work. And to use it is the same as loading anything else in AS3. Just download the zip file and put the class wherever you save your custom classes.

Download the .zip file

To use it, you just need three lines of code:

1
2
3
4
5

import com.atomicrobot.ExternalLoader;

var image:ExternalLoader = new ExternalLoader("externalfile.blah");

addChild(image);

And you’re good to go. You can use it as many times as you need in your project and it will help keep down your file size.

Adobe and Flash Fight Back

Mike — Tue, 02 Mar 2010 05:24:08 +0000

As we should have expected, Adobe isn’t taking the Apple lead attack on Flash and support of HTML5′s video tag as a replacement, lying down. As Adobe gets closer to releasing Flash Player 10.1, it seems some of this might have just been due to the timing. Flash Player 10.1 is optimized for mobile and has made some big improvements for OS X. And some Flash evangilists and developers have come out in full force with examples of how much Flash Player has improved.

Mike Chambers posted some stats showing some performance tests he did on his Mac Pro where he compared HTML5/JavaScript examples to similar Flash examples. The performance varies surprisingly from browser to browser but it seems, at least to me, the Flash Player 10.1 performs very well on OS X. But I did see one thing that confirms something I’ve thought for a while, Safari for Windows is pretty bad. Although, why people use any Apple software on Windows is beyond me, it’s like Apple puts it out there to suck and hope people blame it on Windows, but that’s a completely different topic.

Fabio Sonnati put up a huge post called Flash Player 10.1 will kill HTML5. While I disagree with that statement, I agree with him that Flash video isn’t quite dead. And he’s got tons of info on all the codecs that Flash Player can play.

At gotoandlearn.com, Lee Brimelow put up a tutorial demonstrating the multi-touch gesture support that has been added to Flash Player 10.1 and AIR 2.0. It’s pretty simple stuff and as usual Lee shows how to do it in a very easy to understand style. At first I didn’t really care about multi-touch, but after seeing this, I’m actually kind of excited about it. It could really make for some interesting apps, especially with Flash CS5 being able to make iPhone apps. I plan on making my own stuff and just putting it on my phone!

The Flash Mobile Blog has a post about the distribution plan for Flash Player 10.1. They also go over the installation process on mobile devices, showing how close it is to the desktop so that people will have an easier time with it. They’re very hopeful that the Open Screen Project will result in Flash Player being on a majority of mobile devices. I think if they can get Flash on all Android and Windows Mobile devices, Apple might open up and they might at least figure out a compromise about Flash on the iPhone, even if we don’t get the full blown one on there.

So far from what I’ve seen in all these Flash vs HTML5 arguments, the people that are predicting Flash’s death seem to be the ones that never use it or have used it for a long time and have developed a big hate for Adobe over the years. ActionScript 3.0 is a pretty good language and the Flash IDE is a pretty good environment to work in, although the coder could use some work. And HTML5 needs JavaScript and debugging it is a pain! Hopefully the improvements the Flash Player are enough that I don’t have to worry about JavaScript debugging anytime soon.

Using Tweens in ActionScript 3

Mike — Thu, 25 Feb 2010 03:46:20 +0000

Last week ActiveTuts put up a quick tutorial about building a sliding menu paddle, which isn’t anything too complicated but it was the first time I’d done anything with the built in Tween Class in ActionScript 3. Usually I’d use something like Tweener or TweenMax, but I thought I would see what you could do with this. What I decided to make was something that I would have loved to have been able to make with code when I was just beginning to learn AS3, a Flash site with sliding content. This would have been something I would have used movieclips I created in Flash and then created keyframe tweens to get the effect I wanted. This isn’t the most complex thing to create but it will help out beginners.

Here’s what we are going to build:

Start a new Flash file (AS3), mine’s the default – 550×400 with a white background and the framerate at 24. This is about the functionality, not the design, you can add that in after you get the all working. Save it as whatever you want, I called mine TweenSite.fla. Next, using the Text tool (T), type out something like button 1 on the stage. Make sure the button is set to Dynamic Text and the instance name is buttonText. This will allow us to control what the button says in our ActionScript file.

Now turn the text into a movieclip, F8 or Modify > Convert to Symbol. Call it MyButton, set the registration point to the top left and check the Export for ActionScript box.

Delete the MyButton from the stage, we’re going to add it using ActionScript. Finally, one the Document Class field, type Main. This will link our ActionScript file to the .fla. If you don’t know how the document class works, there’s a great video at gotoAndLearn.com.

And that is everything we are going to make in the .fla. Everything else now will be created with ActionScript.

Create a new ActionScript file, File > New… > New ActionScript File. Call it Main and save it in the same folder as your .fla. Instead of writing all the code in the .fla or even in just one .as file, we are going to build this OOP style, to make it easier to customize after it’s been built.

Here’s the code we are going to start with in Main.fla:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

package
{
//We have to import the classes we are going to use
import flash.display.MovieClip;

public class Main extends MovieClip
{
//This creates an instance of the button we made
private var button1:MyButton = new MyButton();

public function Main():void
{
//This calls the init function which gets everything going
init();
}

private function init():void
{
//This adds the button to the stage
addChild(button1);
}
}
}

If you test this now, you should just be able to see the bottom and right side of our button. This because the position of something added to the stage is automatically 0,0. So just add this under addChild(button1):

1 2	button1.x = 30; button1.y = 50;

This just positions our button the stage. Now to make this work the way we want to, we need more than one button, up with the other variable add this:

1
2
3

private var button2:MyButton = new MyButton();
private var button3:MyButton = new MyButton();
private var button4:MyButton = new MyButton();

What we’re doing here is making three more instances of the same button, but we’ll use our code to change the text. Underneath button.y = 50 add this:

1
2
3
4
5
6
7
8
9

addChild(button2);
button2.x = 30;
button2.y = 90;
addChild(button3);
button3.x = 30;
button3.y = 130;
addChild(button4);
button4.x = 30;
button4.y = 170;

Here we are adding the three other buttons to the stage and positioning them 40 pixels apart. Now if you test it, the buttons will all line up vertically but they all say button 1! So, how do we fix that? At the bottom of the init function add this:

1
2
3
4

button1.buttonText.text = "Button 1";
button2.buttonText.text = "Button 2";
button3.buttonText.text = "Button 3";
button4.buttonText.text = "Button 4";

Now if you test the movie, the text should have changed to what we have here. Now as it stands now, our “buttons” don’t really act like buttons. If you mouse over them, you won’t get the hand cursor that tells people that it’s a clickable button. We can fix this a couple of ways. One way would be in our Main.as file to set the buttonMode to true and something called mouseChildren to false for each button, but that would be a lot of code, and if we wanted to change something, like the names of buttons, we would have to change a lot. The simple way to do this is to make a new ActionScript file and put the settings in there. So create a new ActionScript file and save it as MyButton in the same folder as our other files. If you named your button something else, you have to name this file the same as your button because our Main file is going to import these settings and apply them to our buttons. Here’s the entire code for our MyButton.as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

package
{
import flash.display.MovieClip

public class MyButton extends MovieClip
{
public function MyButton()
{
//This gives movieclips the same properties as buttons, so the hand cursor appears
buttonMode = true;
//This stops the text from inside the MyButton movieclip from being selectable
mouseChildren = false;
}
}
}

Now if you test the movie, you’ll see that now the hand cursor appears and the text isn’t selectable. This is the main advantage of OOP, with a few lines of code, we have affected our entire navigation. Now, let’s add the gray block to our movie. Create a new ActionScript file and save it as Block.as. Here’s the code for Block:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package
{
import flash.display.MovieClip;

public class Block extends MovieClip
{
public function Block()
{
//Draws the block using actionscript to keep file size down
//First part is color, second is the alpha
graphics.beginFill(0xCCCCCC, 1);
//This draws a rectangle(x,y,width,height)
graphics.drawRect(0,0,102,36);
graphics.endFill();
}
}
}

Now back in Main.as we have some code to add. First add this up with the other variables:

1	private var block:Block = new Block();

Same as with the buttons, we are creating an instance of our Block class. Next in the init function, at the top, before all the buttons put this:

1	addChild(block);

Now at the bottom of the init function add this:

1 2	block.x = button1.x; block.y = button1.y;

Now when we test our movie, the block will appear behind the top button. Next we’ll give our block something to do, at the top where we are importing the MovieClip class add this:

1
2
3

import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.easing.*;

This is going to allow us to have mouse events and tween events in our Flash movie. Next with our other variables, add this:

1	private var barY:Tween;

Here we are creating our first tween. Now we need to tell our tween what to do:

1
2
3
4
5

private function onNavClick(e:MouseEvent):void
{
//First we say what to tween, what property to affect, set what kind of ease(if any) we want to use, where to start the tween, where to end, how long to take, and the true means the time is in seconds, if it's set to false the tween is in frames
barY = new Tween(block, "y", Back.easeOut, block.y, e.target.y, 1, true);
}

I’ve described what the Tween does in comments in the code. Next we need to add some listeners to call this function so it actually does something, what I usually do with listeners is create a function addListeners():

1
2
3
4
5
6
7

private function addListeners()
{
button1.addEventListener(MouseEvent.CLICK, onNavClick);
button2.addEventListener(MouseEvent.CLICK, onNavClick);
button3.addEventListener(MouseEvent.CLICK, onNavClick);
button4.addEventListener(MouseEvent.CLICK, onNavClick);
}

We need to add a listener to each button so that the block knows which button to go to. Inside the Main function add:

1	addListeners();

Now if you test the movie, you should get this:

OK, now let’s make those buttons control something. What we are going to do is just make four big blocks that slide into view. Once again, we aren’t designing anything we are just building the functionality. The block can be easily replaced with images, movieclips or external .swfs. To do this we are going to make a new ActionScript file and call it ContentBox.as. We’re going to make all the boxes in on class instead of making a separate one for each box. It’s just easier and it’s not too hard to build more custom classes for your own stuff later. Here’s the code for ContentBox:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

package
{
import flash.display.MovieClip;

public class ContentBox extends MovieClip
{
public function ContentBox()
{
graphics.beginFill(0x999999,1);
graphics.drawRect(0,0,345,360);
graphics.endFill();
graphics.beginFill(0x666666,1);
graphics.drawRect(345,0,345,360);
graphics.endFill();
graphics.beginFill(0x333333,1);
graphics.drawRect(690,0,345,360);
graphics.endFill();
graphics.beginFill(0x000000,1);
graphics.drawRect(1035,0,345,360);
graphics.endFill();
}
}
}

Really simple stuff here, we’re just creating four boxes that are 345 by 360 and positioning them along the x-axis. I’ve also made each one a different shade of gray that way we can see the boxes move but we won’t blind ourselves with bright colors. Next, up with the variables, put this:

1	private var contentBox:ContentBox = new ContentBox();

And at the bottom of the inut function, add this:

1
2
3

addChild(contentBox);
contentBox.x = 185;
contentBox.y = 20;

Same stuff we did with the buttons, so you should know what’s going on here. If you test your movie now, you’ll see the first box and part of the second box, which isn’t really what we want, we just want to see the first box. To do this, we’ll just add a mask to our stage. Make a new ActionScript file and save it as MyMask.as. Here’s the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

package
{
import flash.display.MovieClip;

public class MyMask extends MovieClip
{
public function MyMask()
{
graphics.beginFill(0xFF0000,1);
graphics.drawRect(0,0,345,360);
graphics.endFill();
}
}
}

Pretty much the same as our ContentBox class, but with this our mask, the color isn’t going to matter. Now back in our Main.as file, add this code up with the other variables:

1	private var myMask:MyMask = new MyMask();

And then add this at the end of the init function:

1
2
3

addChild(myMask);
myMask.x = 185;
myMask.y = 20;

Now if we test this, there’s a red box over top of the first gray box, which I don’t think is quite what we’re going for here. So let’s add this line of code right under the last stuff we added:

1	contentBox.mask = myMask;

Now if we test it, the first gray box is back and we can’t see the other box anymore. Now we have one final thing to do and it’s not that major, we’re just going to apply the Tween code we used on our navigation to the boxes to make them slide into view when a button is clicked. First off, add this to your other variables:

1	private var contentX:Tween;

Next we need to add these listeners, which are pretty much the same as the other listeners, they are just calling another function:

1
2
3
4

button1.addEventListener(MouseEvent.CLICK, moveContent);
button2.addEventListener(MouseEvent.CLICK, moveContent);
button3.addEventListener(MouseEvent.CLICK, moveContent);
button4.addEventListener(MouseEvent.CLICK, moveContent);

Now we have to make the moveContent function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

private function moveContent(e:MouseEvent):void
{
if (e.target == button1)
{
contentX = new Tween(contentBox, "x", Regular.easeIn, contentBox.x, 183.95, 1, true);
}
if (e.target == button2)
{
contentX = new Tween(contentBox, "x", Regular.easeIn, contentBox.x, -161.55, 1, true);
}
if (e.target == button3)
{
contentX = new Tween(contentBox, "x", Regular.easeIn, contentBox.x, -507.10, 1, true);
}
if (e.target == button4)
{
contentX = new Tween(contentBox, "x", Regular.easeIn, contentBox.x, -852.65, 1, true);
}
}

Here we’re just using if statements to see which button was clicked and then telling contentBox what to change it’s x value to. Now if you test the movie you’ll see contentBox slide to the color that corresponds with the button we clicked on.

I hope this helped you out, this framework should be pretty easy to customize and allow you to build stuff pretty quickly.

Flash ain’t dead yet!

Mike — Mon, 15 Feb 2010 19:31:19 +0000

Last night, Lee Brimelow put up a video on his blog showing Flash Player 10.1 and Adobe AIR running on the Motorola Droid.

This, plus the fact that Windows Mobile also runs Flash, is a huge deal for Flash developers. I think this move, with Flash CS5 making it easier to develop for mobile won’t be separating everything into Flash vs. HTML5 but perhaps, Apple users plus everyone else. I own an iPhone and I love it but I would really like to be able to make my own apps and games for it using the language and platform that I’m the most comfortable with, ActionScript and Flash. Hopefully, this move, plus the improvements that Adobe has made to Flash Player with 10.1, Apple will move closer to running Flash and AIR on their mobile products. Personally, I think the only reason Apple hasn’t yet has nothing to do with performance or battery usage, but because of their App Store. Apple the company is and has been, at least when Steve Jobs has been in charge, the ultimate control freak. It’s been said before and I completely agree with it, if Apple could find a way to control the software you use on your Macbook or iMac, they would. I could see Apple’s goal being an App Store for your iMac that is the only place that allows you to purchase and install software.

Hopefully it will never come to that. While I don’t think I could ever have an Apple computer as my main system, my wife and I love gaming too much, I could see myself using a Macbook Pro as my work computer. But that won’t happen if I have to let a company say what I can and cannot install on my computer.