PDA

View Full Version : Flash Website Building Best Practices


DiscipleX
08-06-2009, 04:26 AM
Hey guys, I have a topic I'd like to discuss-- it's not really a question, but more of a general inquiry. I've been building Flash web sites for a long time now, as a freelance developer. I usually work alone, and so I'm the only one that touches the production work I do.

Since I'm in this working position, I don't get a lot of exposure to other styles of flash production. I was wondering if any of you have examples of the best ways to produce high quality flash websites. I'm not talking about huge team projects, but small 40-50 work hour sites.

I use TweenMax for most of my animation. (I don't use any timeline animation)
http://blog.greensock.com/tweenmaxas3/

I build sites using multiple swfs and loading them in dynamically for each section of a site.

I keep 95% of my code inside .fla files.

When I code, I use a lot of movieclips from within the library and attach them dynamically. My code is usually spread out based on section type. For example, I'll have a news section movie clip, and inside that movieclip will be all the code for that particular section.

I don't use external classes (is this a bad thing?).

I use swffit and swfaddress for a lot of my projects.
http://swffit.millermedeiros.com/
http://www.asual.com/swfaddress/

In AS3, I work with strict-mode off. I cut out as much extraneous code as I can when I work. For example setting up a variable:

Instead of:
var xPosition:Number = 20

I just do:
this.xPosition = 20

So what do you guys think? Is this a good setup? Any advice or suggestions? I know it's hard to get a full look at my style from just the above, so if any of you can explain your own work experiences, that would also be a big help.

tadster
08-06-2009, 06:45 AM
You should always use strict-mode.
You should always declare your vars, "this" will not always be the same thing.

here is some good reading for you to start with :

http://opensource.adobe.com/wiki/display/flexsdk/Coding+Conventions

Grymtflow
08-06-2009, 06:50 AM
I would recommend you to try to move your code from your .fla-files to .as-files. Makes it much easier to find your code when you need to find something. I never have ANY code in my .fla-files. I start with making a document-class for every swf.

I also like splitting up my site in diffrent swf's. Using only one can sometimes (on bigger projects) slow down production due to long publishing times. But I make sure that large filesize code and library assets isnt loaded in evert swf. I place assets I use in multiple swf's in a assets fla. And load that one at start.

DiscipleX
08-06-2009, 01:58 PM
tadster:

I think that's my next project, is to start working in strict mode.
For variables, I've never had any problems with using this.xxx to declare variables. What's an example where this wouldn't be sufficient?

Grymtflow:

What kind of things do you use external .as files for? When I create a button for example, it feels easier for me to just do the code in the timeline of that movie clip. It makes working with the visible elements easier, and I don't have to swap out to a new file, change something, save it, and then swap back to do an export. I just open the button via the library, change the code and export.

This is something I've been trying to wrap my head around for awhile now, so any reasoning would help (keeping in mind this is for single person projects).

tadster
08-06-2009, 02:16 PM
When you use this.whatever you've never initiated the var, and that is just bad practice.
Also if your movie is loaded by another it gets harder to keep up with what "this" is.
And if you needed to reference the variable again how would you do that?

I use pure ActionScript. (.as files) and i only use CS4 for its vector capabilities and to house my graphics in the library, then i use code to dynamically use those images/vectors in my project.

The ActionScript language is very powerfull on its own, by sticking to .as files your are giving yourself more freedom by not being tied to the Flash IDE.
That button you made can just be a class which can be ported from project to project, if all the code is stored in an .as file.

Using one .as file (as the Document Class) for all the code frees you up to use the full graphical powers of CS4/3 without using the timeline or any code inside the .fla

ASWC
08-06-2009, 02:24 PM
For variables, I've never had any problems with using this.xxx to declare variables. What's an example where this wouldn't be sufficient?

It's not just bad practice (it is), it allows you to write whatever you want without getting any error in your code. So for beginner it's perfect because that means: "I'm so good at programming that I never get any errors!". Well of course you don't get any error because you turned everything off! The result is this: Everything that you created so far using this way can crash at any moment, period.
So to answer the question, writing variables that way makes it very likely to create an application that can crash at any moment, under any circumstances.

maskedMan
08-06-2009, 02:25 PM
Using external class files makes it easier to reuse code. It's more modular that way, particularly if you follow good OOP practices. It also makes it easier to organize, as you don't have code floating around in your fla that you have to hunt for. This is especially true if you use a code editor worth its salt instead of writing code in the Flash IDE itself. I recommend FlashDevelop, a free and open source editor that has incredible power. It has autocomplete that is far stronger than anything in the IDE, a project management panel that actually facilitates work instead of hindering it, it recognizes code you have written and can use code you wrote in its auto complete. The keyboard shortcuts are amazing.

Also, turn strict mode back on. Yes, it is 'faster' to work without it on, but only in the sense that Flash isn't warning you about boneheaded mistakes you could be making when you try to compile. Debugging always takes longer than actual development, and strict mode being on is like having Flash *help* you in the debugging process by pointing out exactly where you did something dumb. Would you rather have flash tell you that you've done something that could cause a critical but elusive error and tell you precisely where to find it, or would rather have you or a user find the problem after 5 (or 500!) test cases through natural (or edge case) usage and then have *no clue* what you did wrong or where?

It sounds like you don't make the best use out of the MouseEvents if you're placing them strictly on the movieclips themselves. Study and get your head around all the things you can do with MouseEvents via bubbling.

-Ev-
08-12-2009, 04:03 AM
A note regarding the multiple-swf approach. When you compile a SWF, Flash analyzes the import hierarchy and eliminates common imports so that a class' code is only included once. So if you compile a SWF and 5 of your classes import flash.display.Sprite, it won't import Sprite 5 times, just once.

However, if you have 8 different SWFs making up your site, and the code within each needs to reference Sprite, then the Sprite class needs to be compiled into each SWF. So in your whole site, you have the filesize bloat from the Sprite class times 8.

This can easily build up with commonly referenced classes like Sprite, MovieClip, Bitmap, TextField, TextFormat, int, uint, String, Number, Boolean, Event, MouseEvent, TimerEvent, Timer...you get the idea. A single SWF will always be smaller in size than the sum of multiple SWFs doing the same job. So keep that in mind if bandwidth is important on your project.

DiscipleX
08-13-2009, 11:07 AM
-Ev-:

Yeah, I know what you mean. Do you have another solution for this? Like, if my flash site has 10 sections, and each of those sections is 1 meg, I really want to avoid a 10 meg initial load.

maskedMan:

I'm trying to convert over to using class files now, and one thing I'm wondering is what my new relationship with my library is. In this situation where 100% of my code is in class files, am I now just using the Flash IDE for visually laying out movieclips that I will then attach via the class code to the display list?

Additionally, since I would be attaching most of my content from the library, what's a good way to allow that content to be preloaded (as opposed to being exported on the first frame)?

maskedMan
08-13-2009, 02:36 PM
I'm trying to convert over to using class files now, and one thing I'm wondering is what my new relationship with my library is. In this situation where 100% of my code is in class files, am I now just using the Flash IDE for visually laying out movieclips that I will then attach via the class code to the display list?

Additionally, since I would be attaching most of my content from the library, what's a good way to allow that content to be preloaded (as opposed to being exported on the first frame)?

It can depend on whether you work alone or have a team of designers who put your fla together for you what would be the best way to use the library. If it's just you, classes can extend movieclip and be linked to clips in the library.

For preloading, you generally want to export on frame 1 because you should be using a loader shell that contains nothing but a preloader graphic as your 'main' swf. Use that lightweight swf to show your progress bars. If for some strange reason you are not allowed to use a loader swf, you still don't have to export on frame 1. Just don't check that box. If you go this route though, you will need to make sure that your main timeline is *on or positioned after* a frame that has an instance of your movieclip on it already. For example, you could use frame 2 as a dumping ground for your linked objects, and send the main timeline to frame 3 once you're ready to start the show. Now you have access to all the linked symbols you didn't export on frame 1.

DiscipleX
08-13-2009, 03:06 PM
Got it, that makes sense.

FEK315
12-15-2009, 05:13 PM
You should always use strict-mode.
You should always declare your vars, "this" will not always be the same thing.

here is some good reading for you to start with :

http://opensource.adobe.com/wiki/display/flexsdk/Coding+Conventions


THis rocks, thank you Tadster!

FEK315
12-29-2009, 05:15 PM
Is it a good and or common practice to name your parameters and instance variables the same and use "this." to differenciate the 2?
Instead of naming them differently?