Flash Programming Tutorials

[Iconoclast]

I am currently transitioning towards other programming languages with the goal of more complex creations, but I wanted first to leave my knowledge behind for anyone else who is interested in say making imitated parts of N64 games themselves or just general website creations/etc.

Obviously Macromedia Flash has its own Help tutorials, but I find them to my disliking. You may or may not find them in the same way, but I wanted to offer my point of view, the point of view of an imitationist.

Flash programming is done using what is currently Macromedia Flash Professional 8, which can be downloaded as of now from adobe.com (formerly macromedia.com). I myself hate the thing where you have to be a registered member to download shareware. Whether you work towards pirating it, actually register on the site, or PM me for a shareware download, you should be getting the latest version as of this posting, Macromedia Flash Professional 8.

So why learn Flash programming? What's so unique about it?

Advantages:

• More powerful than GameMaker and RPG Maker (likely combined), good new tool for those experienced with these applications.
• Run your creations in a webpage or non-exe file of projectional file size (lower than that of an executable file).
• Portability between Windows, Macintosh and Linux. Flash Player-compiled executables can be published for the Windows and Macintosh operating systems.
• Use a 'predefined' graphics engine based on C++, invented by Macromedia and worked on a little by Adobe.
• Can be used as a new (animated) image format with all the features of a .png image and more.
• Simplifies some coding by basing much of designing with object-oriented programming (or OOP) for those who do not like dealing with text coding.
• Programming in layers/layers organized in folders as well as library objects used on stage. More graphically organized designing for the creator's thinking.

Disadvantages? What are things that say C++ can do that Flash can't?

• Complex 3-dimensional programming (texture mapping, polyhedron design, likely motion blur)
• Writing to external file formats (although Flash can execute batch files for some DOS-limited writing)
• Highly complex game computer design (to some extent a computer chess engine)
• Hardware emulation
• Hardware sensors (touching your monitor so your computer ejects a floppy disk like a bullet)
• ...Some other stuff.

Q. What are some games made in Flash?
A. A lot of the vBulletin arcade games you see were made in Flash, possibly all of them. cartoonnetwork.com, nick.com, all that stuff was made in Flash. This game was not. Jesus, even I have a hard time beating that guy (I've done it fair and square a few ten times, but man.)

Q. Any Xbox 360 arcade games you could remake in Flash?
A. Meh, some of them. Geometry Wars I believe is not entirely hopeless. Hexic I think has already been done. Backgammon as well. Thing is, I know actually little about Flash game programming, as I have never taken the time to read through the Flash tutorials. I have mostly learned all of what I know now by myself, but I do know for sure that these games can be remade in Flash.

Q. Could you remake LimeWire in Flash?
A. Nope.

Q. Could you make your own website in Flash?
A. Pretty much, yes. You could say thisismywebsite.com and have nothing on the whole damn thing but a big Flash projection. It would eliminate JavaScript programming for dynamic website effects. Things like say a forums website (vBulletin) eesh...yes, you could. All the checkboxes, externally loaded user data and passwords, even some external PHP files...I believe there is a way from what I've skimmed out of the Flash tutorials. Externally loading online images like smilies sure definitely. You can even upload through a Flash creation. Again, all of these things are out of my range..

Q. If you did make a game imitation in Flash, could you make online play (NetPlay)?
A. Yes. cartoonnetwork.com features Cartoon Orbit, where you play games online with people, and I have been running that with just Flash Player 6 when I had it back then, so even old versions of Flash Player do have high potential.

Q. What parts of say an N64 game could you imitate and what parts couldn't you?
A. You could imitate pretty much every 2-dimensional part of it, even have the textures externally loaded for retexturing purposes. You could not draw polyhedrons, motion blur I'm leaning towards a no on.

Q. What are some N64 games made (entirely) in just 2-dimensional programming?
A. Some Japanese games with those funky-ass titles and Virtual Chess 64 (excluding the 3-D board mode and the fights). There aren't a lot of examples, so hard to give good ones. How about, the hacked versions of GameShark Pro and GameBooster 64 should be emulatable in some emulators? You could use some romhacking tools to extract textures from them and remake them in Flash.

Q. Is it illegal to remake video games in Flash?
A. I did it all the time. If you use any textures or music from the game, then yes. I used to use Microsoft PowerPoint to make imitations of things like the Mario Kart 64 menus when I was three years younger. XD that was quite the stuff there...hardly any animations and all that, but the dynamicness was all correct. I didn't even know what emulation was on those days, but for such shitty software used to make imitations of video games, the PowerPoint didn't come out to be all that bad (lost it on a stolen Flash drive). After about 45+ PowerPoint files, I eventually gave up discovering new things about it and took a job offer two years ago on making learning objects, where I learned Flash for the purpose of media used for visual school teaching.

Q. How hard is it to learn Flash programming (compared to other methods)?
A. A lot of it is graphics oriented. If you like me have based several years of your life on Word and PowerPoint, potentially you may have some struggle with the completely new interface. In contrast, if you are a complex programmer (C, C++, assembly, etc.), I'm guessing the extra organizational thinking will prove useful. If you have learned GameMaker (which I looked into for a week and quit) and RPG Maker (never tried), you will have even greater chances of understanding Flash. For the most part, understand this, there are definitely harder. It's hardly any more complex than GIF animation software once you take away the ActionScript, library, coloration methods, shapes, text box properties, shapes...screw the list I guess, but point standing, still not that hard.

So, I'll get to work on transferring the first few lessons I had pretyped, get a poll started, and feel free anyone to start lesson tutorials of your own that I didn't cover. Ask any questions, spam with random tips and hacks..

 

[Iconoclast]

Using Tools in Flash

Open Flash, and start a new Flash Document. Wow, a blank, white screen. So this is going to be the SWF you're going to upload on FileSend.net, and show off to everyone? Looks pretty exciting. On the other hand, a little racist.... Let me show you how to put a little interest into it.

First, start off with the tools you have on the left sidebar in Flash. So far, the Select tool is the active option. You can pick any of the other 15 tools. A review of the drawing tools:

• Line Tool
• Pen Tool (not covered)
• Oval Tool
• Rectangle Tool
• Pencil Tool (not covered)
• Brush Tool (not covered)
• Ink Bottle Tool (not covered)
• Bucket Tool (not covered)

I'm not going to cover all those; most of those you don't really need to know about.

I will, however, cover the Line Tool. Select the tool, and draw a line into the white drawing space in the Flash Document. This is also known as the 'stage' of the Flash Document. Now, select the Selection Tool (or press V), and click on the line you just drew. You can change the properties of the selected line via the Properties toolbar at the bottom. The color, the width, the line type, and so on. You can also specify these settings before you draw the line.

Same thing with the Oval and Circle tools, basically. Draw the shape, and pick one of the different selection tools to select it. When you draw a rectange or circle, there are two things you should specify before you draw the shape (though you can still edit these properties later by selecting them, of course): The stroke color and the fill color. The stroke color (the top color box) is the color used to outline the shape you draw. The fill color (the lower color box) is the color of the internal shape inside what is outlined by the stroke color. You do not need to use a stroke; you can just draw the fill color part and have no stroke. One of the ways to do this is, obviously, to just draw the shape, select the stroke of the object (the entire shape will not be selected unless you drag a selection rectangle over it, just either the stroke or the fill) and press the Delete key on your keyboard, deleting the object. You can also do the same for the fill, so only the outlining stroke remains.

The other way is to click the small triangle in the stroke color box, and select this button at the upper-right of the color selection palette that comes up.

These means "no stroke" or "no fill color". You could also call it "transparent," which isn't very accurate, since the stroke or fill is nonexistent rather than existing but with a color of 'transparent'. Here is another useful trick for you. When you click the triangle in the fill or stroke color boxes, instead of picking one of the colors in the palette that comes up, you can click anywhere in the program and use the color of the pixel you clicked on. You can click the close button to close Flash (what some of you call "X out of"), and it'll still assign the color you clicked as the current stroke or fill color.

If you hold the Shift key on your keyboard while drawing a rectangle, you will draw a perfect square. If you hold Shift while drawing an oval, you will draw a perfect circle. Alternately, you can just draw the shape, select it with the Selection Tool, and edit the dimensions of the object so both the width (W) and height (H) of the object are the same to make it a perfect square or circle.

If this feature is not displayed in the Properties panel, click the arrow at the very bottom-right of the panel to make it show up. The W and H are the width and height dimensions of the selected shape or object. The X and Y are the positional properties of the selected object. Toy around with them a little to learn about them. For those of you who like to be exact with nice, round numbers for dimensions and coordinates, you may prefer to use this to move your objects across the stage rather than selecting them and dragging them.

While drawing a rectangle, there is something else you should keep in mind. Look on the left sidebar in Flash with the Rectangle Tool selected. Under what should be visible as the "Options" group, click this button.

This lets you specify what is called the "corner radius" of the rectangle before you draw it. Try out different settings for this option to see the effect it has on the resulting rectangle. Basically, it smoothens the corners of the rectangle. Some of you may like that for your publications rather than those sharp, pointy corners.

After this, you've finished the first tutorial. Now I just want to teach the different possible ways to select objects on the document stage. Remember that the stage is the "drawing board" in a Flash document. These are all of the selection tools:

• Selection Tool: The standard tool for selecting objects. Just give it a click, and you've selected it.
• Subselection Tool: Pretty much the exact same thing as the Selection Tool, but there is an important difference in it I'll get to later.
• Lasso Tool: Should be easy enough to figure out on your own, experimentally. Just draw a circle around everything you want selected. This can sometimes be more accurate than using the Selection Tool to drag a rectangle around everything you want selected.

Why would you want to use the Subselection tool instead of the Standard selection tool? A good question, one that I can't really answer easily right now. For now, just use the standard Selection tool, and you're fine. This question will be answered in a later tutorial when the oppurtunity comes.

Well, you now know the basics of using Flash for drawing objects. After all that reading, you're probably finished listening to me. Pat yourself on the back, and read on if and when you're ready.

 

[Iconoclast]

Publication Settings

This tutorial is much shorter than the previous one. In your Flash Document, click the "Settings..." button on the Properties toolbar at the bottom of the program. Switch to the Formats tab. When you click the Publish button, all of the formats with their checkboxes selected are published. Based on everything you drew in your Flash document, your work of art is not meant to just sit there in the FLA file you saved. You can publish it as a format readable by other programs. A review of these formats:

• Flash (.swf): The standard, most common publication format. SWF files are the works of art you see on the worldwide web. Many website games, like those on cartoonnetwork.com, freegames.com, pogo.com, you name it, are actually SWF files optimized to run in a web page. Others are programmed in JavaScript, a programming language not related to Flash or the SWFs it publishes. Most games, however, are SWF files. Why is the Flash user interface so complicated? Why couldn't its developers designed it to be more simplistic? Because Flash is capable of powerful website programming, not just for games, but any kind of imaginable tool. You'll come to learn more than just drawing stupid shapes into your FLA later on, and learn more about game design at the later tutorials.
• HTML (.html): A web page published to disk that projects the SWF in it. This option can only be enabled if the Flash (.swf) option is enabled, as the HTML file is merely the web page file containing the SWF so it can be viewed and visualized in a web page.
• GIF Image (.gif): A special image format that can be either static or animated, but limited to 256 colors.
• JPEG Image (.jpg): A 24 bit static image format that supports full color but sometimes has problems with blurriness and other forms of quality loss. Should only be used for images where it is not only lower in file size than PNG format but also no conspicuous sign of quality loss.
• PNG Image (.png): Probably the only static image format that supports all image capabilities, PNG format was recently invented for usage on portable networks. Old Internet browsers do not support it, but most versions of Internet Explorer can view it. PNG format supports partial pixel transparency (unlike GIF format and JPEG format) and background transparency (unlike JPEG format), which is why it is called a 32 bit image format. Unfortunately, Internet Explorer 6 does not support the transparency abilities of PNG images like Mozilla FireFox does.
• Windows Executable (.exe): Do not publish using this format, as it is almost never necessary. The EXE is a version of the SWF, only compiled in an executable file type. The SWF version requires a certain version of Flash Player, depending on your publish settings (which I'll get to soon enough). Lets say the SWF version requires at least Flash Player 8 to view the SWF in a web page. If your friend only has Flash Player 7, your friend cannot view the published SWF. If you published an EXE version, that is a version of the SWF with your active version of Flash Player (8, in this example) "built-in" to the SWF so you do not need to have any version of Flash Player installed to view it. This causes the EXE to be much higher in file size than the SWF version. Only publish using this format if you know what you're doing. Also note that, as you might already know, SWFs can be viewed in websites and web pages, while EXEs cannot. It is much easier to just have your friend install the latest version of Flash Player from adobe.com, although, this cannot be done on a limited Windows NT account.
• Macintosh Executable
• QuickTime Movie: Some features may be lost and errors may occur if you publish in this format. I don't bother with it.

Go to the Flash tab of the Publish Settings dialoge. I will explain the following settings:

• Version: This is the minimum version of Flash Player required to view the SWF file. Sometimes, the user can force view of an unsupported version, but the graphics in the SWF won't "work out" for them. This setting will most likely effect the file size of your final SWF. This does not mean that the Flash Player 1 setting is lowest or highest on your SWF file size. The Flash Lite settings mean the SWF will support ActionScript for Flash Player 4 but requires Flash Player 5 for view. When you are publishing your SWF, you want to choose the minimum version of Flash Player required to view the SWF. With what I've taught you so far, drawing shapes and lines in Flash, even Flash Player 1 should support that kind of stuff, but when I start teaching you ActionScript, you're going to need to bump this option up or you will get publication errors saying your minimum Flash Player version requirement setting is too low to support some features.
• Load Order: The order that the SWF is loaded. I just like to choose the "Top down" option, because it sounds more 'linear'. You can pick whatever you want, though; it has never made a different in my experience.
• ActionScript Version: ActionScript 2.0 setting supports many more ActionScript features. I don't know any ActionScript 2.0 except for one thing that I'll probably never teach you (useless, Fierce Deity has an easier method supporting AS 1.0, I believe), so you will probably never need to enable this option if you learn only from my tutorials. ActionScript 2.0 requires at least Flash Player 6.
• Generate size report: When you publish the SWF file by clicking the Publish button, a TXT file named after the filename of your SWF is generated and automatically displays. This report shows you the details of the total file size of the SWF and the components making up that file size.
• Protect from import: Importing files into a Flash Document library is something to be covered later. One of the things that can be imported into an FLA file is an SWF file. The SWF is imported as a type of object called a movie clip in the FLA. Other people across the Internet can download your SWF file, import it into their own FLA, and steal copies of the audio, video, and image files within the SWF. To prevent people from stealing copies of the content files in your SWF, you can protect the SWF with a password.
• Omit trace actions: The trace() ActionScript command is used for debugging purposes only. It will not be covered in the upcoming tutorials, as I find it highly unnecessary. In this case, 'omit' means 'ignore'.
• Debugging permitted: When you press Ctrl+Enter in your Flash Document (without the Publish Settings dialoge open), you preview the SWF. This option enables the "Debugger" option on the context menu of the previewed SWF. The context menu, by the way, is the menu that pops up when you right-click the previewed SWF. I don't think you'll ever have a reason to use this feature; the debugger allows you to manipulate properties of various objects in the previewed SWF. The Debugger option is also available for the SWF when previewed in a web page, so long as the SWD debugger file is detected by the SWF. The debugger also uses a password. If no password is specified, any user can debug it.
• Compress movie: I highly recommend this option. Leaving it off...is just plain stupid. There is absolutely no loss in quality with this option on, and I hear Flash experts who know more than I do say that. The SWF is almost always going to be lower in file size with this option on, and I have yet to find an instance where the file size would be higher with this option on.
• Optimize for Flash Player 6 r65: If your Flash Player version requirement setting is set to Flash Player 6, you have the option of making your SWF compatible with the 65th revision of Flash Player 6 instead of the 85th revision. These are two seperately released versions of Flash Player 6. r65 does not support some features that r85 does, so keep an eye on any issues your resulting SWF may be having. They may be caused by using this option, but for the novice programmer, he/she shouldn't worry about it.
• JPEG Quality: The lower the setting, the lower the file size of the JPEG images used in your SWF. Also, the more shitty they will look. I like to set this option to 0, because I almost never use JPEG images (.jpg) in my SWFs. They are just retarded, imo. I don't care how fancy your program is or which program you use to save them, the majority of the time, there will be a loss of quality in your JPEG image no matter which program saves the file. There are exceptions, of course, and only then do I use this format if and only if it is lower in file size than the other image formats.

The rest of the settings are, for the most part, audio file compression settings that apply only to sounds that use the Event and Stream play types in your SWF. Unless you specialize in audio optimization, I would ignore these options, if I were you. The "Override sound settings" option forces these audio optimization and compression settings to be used instead of the individual settings for audio files in your FLA library.

Some of this stuff may not make sense to you, but if you keep reading future tutorials and come back to this lesson later, it"ll all make sense. Just ignore the stuff that doesn't make sense, and come back to it later after future tutorials. For now, try to understand as much as possible. You have finished the second tutorial.

 

[Iconoclast]

You ever notice that bar at the top of the program? That is called the timeline. In order to animate your SWFs, you must know how frames work.

Draw a shape (don't care which) onto your stage. Now, stay with me. In the part of the timeline that says "Layer 1," look for the vertical numbered rectangles on the right of the Layer name. The first rectangle has a number 1 over it. This rectangle represents the first 'frame' of your FLA. Click on frame 1 of your FLA (the rectangle I pointed out). All objects drawn on the stage of frame 1 are selected. Click anywhere on the stage to 'deselect' frame 1. Now, click on frame 2, which does not yet exist, the rectangle on the right of frame 1. To create a second frame, press F6. Draw another shape onto the stage of frame 2. If you click on frame 1 and then on frame 2, you notice that the difference between them is the extra shape you just drew on frame 2. Now, press Ctrl+Enter to test your SWF. What an exciting animation; you should get paid for that kind of programming! You could be a millionaire for making that ****...now. Close the preview to resume programming session. Make sure nothing is selected (deselect everything) by clicking empty space in the program. On the properties toolbar at the bottom, see that "Frame rate: 12 fps" option? Change it to 60 FPS, the speed that N64 games are emulated in. Now press Ctrl+Enter again to see what your SWF looks like now. Now try 120 fps, and then 1 fps. 120 FPS may not seem any faster than 60 FPS because your PC may not be fast enough to play it any faster or it already looks to fast to notice a difference (most likely).

Now, right-click the second frame, and choose "Remove frames." This removes all selected frames at once. Select the second frame (which doesn't really exist anymore, since you just deleted it, but I have to call that rectangle something, now, don't I?), and press F5, not F6. A second frame is created. Now, draw an object into the second frame. Press Ctrl+Enter. What? No animation! You close the SWF, and check the first frame to try and figure out the problem. On the first frame, you notice that the shape you drew on the second frame was also drawn on the first frame, for some reason. Delete the shape on the first frame; it shouldn't be there, only on the second frame. Go to the second frame, wtf, it"s no longer on either frame, anymore!

Pressing F5 and F6 makes a difference. Pressing F6 creates a special kind of frame called a 'keyframe', where the content on the stage of the keyframe can be different than the previous frame. Pressing F5 creates a regular frame, where the content on both frames MUST be the same. F5 is lower on SWF file size, since the frame content cannot be changed on the same layer, technically. F6 gives you the ability to change the content of the next frame, without the previous keyframe being affected.

Most of the time, you want to use F6, right? F5 is useless, right? There are instances where you would want to use F5, and one of them is called tweening.

Start a new blank Flash Document or erase everything you just did, including the second frame. Create a rectangle on frame 1. Jump over to frame 10, press F6 to create the frame, (Regular F5 frames show up between frames 1 and 10, as all frames must be consecutive.) and delete the rectangle on frame 10. Since you deleted it from a KEYframe, the copy of the rectangle on frame 1 is not affected. Instead, draw a CIRCLE, this time, on frame 10. Set your document FPS (frames per second) to 5, and press Ctrl+Enter. The SWF shows a rectangle for a moment and then a circle comes up. The SWF quickly restarts back to the first frame and shows a rectangle. How can you prevent the SWF from restarting?

This is where ActionScript comes in. Make sure the Actions panel exists at the bottom of the program. If it does not, press F9. In the ActionScript panel, make sure you are on frame 10, and type the following ActionScript code: Code:
stop()
Hopefully that wasn't too hard. stop() is an ActionScript paramater that tells Flash Player to stop playing on forward to the next frame (the first frame, in this case, since you're on the last frame of the FLA and the SWF loops back to the first frame and restarts). If you want, click the check button (should say "Check syntax" when you hover your mouse over it) to check it for errors, but the word stop is highlighted in blue to indicate it is an ActionScript term. I don't think you'll get any script errors with typing a simple word, unless you made a typo.... Now, press Ctrl+Enter. The ActionScript was successful, and it stops Flash Player from moving on to the next frame (again, which would be the first frame in this case).

Now, select any frame that is in between frames 1 and 10. Frame 5, for all I care. In the Properties toolbar at the bottom, there should be a Tween option. Set the Tween option to Shape, and press Ctrl+Enter. Now THATS animation. Set the FPS to 12 FPS, the Flash default, to get some normal speed.

Select frame 10, open the Actions panel, and delete the ActionScript you typed in it. Select frame 1, right-click, Copy frames, select frame 20, right-click, Paste frames. In the creation of a 20th frame, you copied frame 1 to frame 20. Select any frame between 10 and 20, and, like you did with frames 1 to 10, set the Tween option to Shape, and press Ctrl+Enter. The rectangle chances into a circle and then back. The animation loops indefinitely instead of stopping on the tenth frame, since you deleteted the stop() command.

Now you've learned one ActionScript command, only shape tweening, and only the basics of frames. There is still a bit more to cover, here.

Underneath the Layer 1 text on the timeline, see that button with the plus on it? Should say "Insert Layer" when your mouse hovers over it? Click it. You can rename layers by double-clicking them. With the second layer (or the one you just created, Layer 2) selected, type some text into the first frame (any frame, since they're all standard F5 frames that cannot change). Press Ctrl+Enter. The text does not connect to the tween in any way. Though it exists in the frames that the tweening is applied to, it is on a different layer. In Layer 2, set the Tween option to Motion, not Shape. Do NOT use the right-click the frame, Create Motion Tween option method to do this! Use the Properties toolbar, only. Click frame 20, and press F6, or else the tween will not work. The tween is an automatic transition between two keyframes, so an ending keyframe must exist for the tween to work properly. So, when you press Enter to preview the SWF, nothing happens to the text. That is because the first and last keyframe of the motion-tweened text is the exact same. You need to make something different. Motion tweening will not successfully work with color or font changes in text. This is only supported by Shape tweening, which doesn't work with text. To be able to change the color of the text correctly, you need to convert the text to a shape, so that shape tweening will work properly. Select the text on frame one, and press Ctrl+B to 'break' it down into individual text characters. Press Ctrl+B to break it down even further to a shape object. Do the same for the copy on frame 20. Now, convert the motion tween, which will not work with shapes, to a shape tween, simply by changing the tween option in between the frames to the Shape setting. Any changes in size will be glitchy, but hey, it works.

To summarize, motion tweening is only to be done with all objects except shapes and can only be used to move objects around. Shape tweening can only be done with shapes and can be used for just about any transitional effect in between keyframes.

So, how can you tell if an object on the stage is a shape or some other object that motion tweening will work with? Select the object. If it has white dots all across the object, it is a shape. If it has a blue-rectangle around it, it is a grouped object. If neither applies, it is neither a shape or a grouped object and is probably a bitmap or something, but motion tweening will still work with anything so long as it is not a shape object.

A grouped object is a cluster of objects merged into one. Select everything on the first or last frame (you cannot select objects that are being tweened in regular F5 frames) by dragging a selection rectangle around everything, and press Ctrl+G. Ctrl+G GROUPS the objects into a grouped object, and Ctrl+B BREAKS the objects into a lower-level object, to a shape, if you break it down enough. Remember these two keyboard shortcuts well.

One last thing: Motion tweening will only work successfully between keyframes that have ONE, and no more than one, grouped object on them. If you try motion tweening in between keyframes that have two grouped objects on them and expect to move them both, you will fail. You may need to seperate them and motion tween them on seperate layers. Two motion-tweened objects will successfully move if they are on seperate layers.

You've learned much more from this tutorial than all previous tutorials.

 

[Iconoclast]

Graphics, Movie Clips, and Buttons

So far, you've learned about three types of objects: Shapes, groups, and text.

There are tens of other objects to learn about, but obviuosly, I am not going to cover them all.

Draw a shape in flash. Select the entire shape, (Remember: If you just click on it, you might click on only the fill or the stroke of the shape and not both!) and press F8. You can conver the shape into three things: A graphics, button, or movie clip.

• Graphic objects are similar to just selecting the shape and pressing Ctrl+G to make it a grouped object, only graphic objects let you change special properties regarding brightness, tint, alpha, and RGBA color. You will use this type of object when creating imitations of N64 games.
• Button objects are a little more complex, in function, than movie clips. I will cover these objects last.
• Movie clip objects are basically like creating a new Flash Document within your Flash Document, an SWF within an SWF.

First, I will cover Graphic objects. So, select the Graphic option, give it a decent name, and click OK. In the bottom-left of the Flash UI, what is known as the 'library' contains the object you just created. With the exception of shapes, all objects in Flash are read as resources from the library. If you cannot see the library panel, you either need to press Ctrl+L or you need to open your eyes before you try to look for something. Since the shape is now a graphic, there is an useful option now on the Properties toolbar when the object is selected called "Color." "None" is the default value, which does not mean exactly what it says, but indicates that the color of the object is left at default. Try the other settings, first Brightness. Pretty simple, right? A percentage of extra brightness to add to the object. Tint gets a little more complex; don't worry, I've never needed the feature, myself. Alpha is synonymus with 'opacity'. Like opaque is the opposite of transparent, opacity is the opposite of transparency. Finally, the Advanced option. THIS is the main thing that makes Graphics objects so necessary for simulating N64 games. When N64 textures are first dumped, for games like TWINE, they are greyscale instead of full color. Options like this are meant to optimize them just like they were programmed in the actual N64 ROM, for very accurate color simulation. (I mean, visually just like of course; not saying you can make a ROM in Flash now.)

When you click the Settings tab, you get to manipulate the RGBA color of the object. R is red, G is green, B is blue, and A is alpha, which is, again, the same thing as opacity and the opposite of transparency.

Here is an example on why you need this graphical flexibility to make imitations of some N64 games. Download a PNG image file I uploaded here:

http://i78.photobucket.com/albums/j1...E57F40_all.png

This is the "007" image that appears in the upper-right of the TWINE N64 game menu. When you save the PNG image to disk, import it into Flash by pressing Ctrl+R. Browse for the PNG image you downloaded, and import it. The image appears as a Bitmap object in the FLA library along with the Graphic object you created. Since you used the Ctrl+R method, you do not need to drag the Bitmap object to the stage, as Ctrl+R imports it into the library and copies it to the document stage at the same time. Select the 007 image, convert it to a Graphic object as shown above, set its Color setting to Advanced, and click the "Settings" button on the right.

I am not sure, myself, what the exact values may be, but I estimate that they are: Red: 110%, Green: 90%, Blue: 0%, and Alpha: 100%. Since the slider will not let you drag beyond the 100% value, you may have to type "110" manually in the Red field. The color should look much better. It was in greyscale before because that is how it looked like when it was imported into the actual N64 ROM. Nintendo"$ programmers had their own method for colorizing greyscale images, and so do you! Movie clips and buttons have this ability to choose advanced color settings as well, but the difference is that Graphic objects are just static images while Movie clips and (technically) buttons are animated.

Time to explain movie clips. Again, a movie clip is like an SWF inside of an SWF. It is basically like starting a new Flash Document inside of your current Flash Document. You have frames inside the movie clip, can put another movie clip within the movie clip, and all capabilities of what is called the root level of an SWF apply to a movie clip level. It should be easy enough to figure out on your own.

Buttons are a little bit harder, but not that hard compared to ActionScript. So, draw a shape, F8, select "Button" option, click OK. A Button object now appears in the FLA resource library. Double-click the button object you just transformed to edit it. You are now editing the button. There are four frames: Up, Over, Down, and Hit. Up is the way the button looks like, originally, in the SWF. What you draw on the Over frame is what is displayed in the SWF when a user hovers his/her mouse over the Button object. When the user clicks the button in the SWF, what is on the Down frame is displayed.

Delete everything on the Up frame, and follow these steps:

1. On the Up frame, choose the Text tool and type a text box in the frame. Type the word 'button' in the text box, and deselect it.
2. Click on the Down frame, and press F6. The Over frame becomes a 'skipped' regular F5 frame.
3. Click the Over frame and press F6 again to convert the automatically generated regular frame into a keyframe. You just copied what is on the Up frame to the other frames (except Hit).
4. Draw a rectangle with no stroke (remember how to draw shapes with no stroke?) over the text box in the Over frame. Click the rectangle, make sure the Color Mixer panel is open by pressing Shift+F9, and, with the shape still selected, type in these values for the R, G, B, and Alpha fields adjacently: 255, 255, 0, 50. 50 percent alpha means semitransparent. Shape objects cannot be on top of text, so press Ctrl+G to group the box to a group object and, if necessary, right-click it and select the "Arrange/Bring to front" command.
5. Press Ctrl+Enter to test your SWF. See that text box which is really a Button object? Hover your mouse over it. A semitransparent yellow box should highlight it. This is my favorite way of making buttons interactive. Other ways of emphasizing buttons are changing font, font color, or other text properties.
6. Now for the Down frame. Draw a rectangle (no stroke) over the text. Make it another semitransparent yellow box (255,255,0,50). Only this time, to indicate the button is being pressed, you are going to move it down and to the right by a few pixels. I like to do it by 3; your preference.
7. Select the semitransparent box, group it, and right-click, Arrange, Bring to front so it is highlighting the text, not the text highlighting the box!
8. Make sure the group is still selected, and look in the Properties panel for something that looks like this:
   
   If this is not visible, select the white arrow at the very bottom-right of the Properties panel to extend it. Now, you can enter exact values for both the highlighting box on this frame and the highlighting box on the other frame. Shift its X and Y postition over to the lower right by 3 or so extra pixels. If the X and Y is currently 0,0, set it to 3,3.
9. Press Ctrl+Enter. Hover your mouse over the button and click it. Interacts as commanded!

You have learned all about these three types of objects. You've pretty much completed this tutorial, but one thing remains. Animating your button frames.

Select the Over frame in the button you're editing. Click the yellow box and press F8. Convert it to a Movie Clip object. Double-click the movie clip to edit it. Select the 30th frame, and press F6. Now select the 15th frame, and press F6. On the 15th frame, select the box, and in the Color Mixer panel, set the RGBA values to 0,0,0,100, respectively. Why do you think I asked you to do that? Shape-tweening! Recall how to apply shape tweening between frames. Select a frame number between 1 and 14, set the Tween option to Shape; do the same for another frame number between 15 and 30. You made a movie clip within a button of an animated glowing highlighter changing from yellow to black and back. This technique is needed for the Bomberman 64 Controller Pak Menu imitation SWF.

Next comes ActionScript. However, learning more on how to use Flash should be much easier from now on. ActionScript, to me, is much easier to teach and learn than the concepts of OOP.

 

[SWAT_Marc]

Wow, good work!

I did a tutorial about Flash Basics, but it's written in Spanish... :blush:

 

[Iconoclast]

Heh. Thanks.

Got some more tutorials up my sleeve, but for now, I wanted to show an example of an N64 2-D imitation.

http://i78.photobucket.com/albums/j112/rswedlo/SWF Objects/Intro.swf

Using your knowledge of how buttons, movie clips and graphic objects work, you should be able to make that kind of stuff. I actually lost the sourcecode for it on my Flash drive, which was stolen (wth it was only 512 MB). But I would like to see if anyone else here can reproduce the FLA sourcecode. My notes for the release on another website....

The reason the first two are in greyscale is because that is just how they were made. When you press Start when playing the ROM, you see the first image in a rainbow-colored effect. That is not the image itself, that is the ROM colorizing the grayscale image and parts of it so they appear in the color of a rainbow. To simulate this effect, I needed to import the first two images, make them graphic objects within movie clips, insert 150 frames, set the RGB coloration for each and every frame so that the color animation is in proper order of a transitional rainbow. To do that part for both images took one hour. The other hour was spent organizing the images so that they only appear when you press Start (spacebar) on your keyboard and that, by pressing Start again, you enter the File Select menu. (Again, this part was not put into the above-linked beta preview.)
---

 

[antikhaoz]

Are you planning to continue Iconoclast ?, i love your tutorials. I would like to ask you about some good books worth reading in this subject.

 

[Iconoclast]

I'm not much of a book reader, I'm afraid? Although, I did fall asleep on the Flash Hacks book, tips and tools and all that. What I was really interested in was ActionScript for Flash; the object-oriented programming I have practically mastered.

I may go on. Now I am currently finding some other uses for my time...but, I will explain each level of Flash programming in ActionScript.

Flash Player 1 has no ActionScript commands and is used as a graphics programming reader only.

Flash Player 2 supports the "stop()" and "play()" commands, which are used to stop or play frame playback in Flash. They are more useful in conditional statements.

Flash Player 3 supports 32 bit graphics and movie clip objects. Some button ActionScripting ("on (press) {stop}") is supported for actions with clicking/pressing/keypress/etc. involving buttons. You can also externally load JPEG images and MP3 sound files now.

Flash Player 4 supports fscommand() and the gotoAndPlay("Frame") and gotoAndStop("Frame") commands, where Frame is the label of the Frame you want to warp to. When warped to the frame, depending obviously on which method you used, playback will either play forward from there or stop on that frame. fscommand() sends commands to Flash Player 4 or later, including but not limited to full screen, context menu visibility, execution of batch files, .com DOS commands and other executable files, and some others.

Flash Player 5 is the first version of Flash Player to support compilation of the SWF into a .exe file, with Flash Player built into it, and also actually comes with an icon instead of just sitting there for website playback purposes. More complex working with external data is now supported.

Flash Player 6 supports ActionScript 2.0, an add-on to ActionScripting complexity and external data and class interactions, and what are called 'component' objects, predesigned UI objects such as drop down menus, combo boxes, loaders, windows and more. Some of them will not function if you are publishing for the earlier version of FP6 instead of build 85.

Flash Player 7 I know pretty much nothing about. They got Flash JavaScript and MMExecute() and stuff I can't really talk much about...haven't learned it yet. More graphics issues with some textures are fixed, and texture dimensions are now rendered properly on the High and Low quality settings.

Flash Player 8 has some more color combiner ASing and graphics glitches, with extra fixes to the Quality and rendering settings.

Flash Player 9 supports ActionScript 3.0, which I hear somone used to make a Commodore64 emulator using.

 

[Danny]

Awesome stuff mate

Im currently planning on taking a course (to get a qualification) so i can get a job in website constuction/making.

What language do you recommend i learn? flash or java? or another?

Thanks

 

[Iconoclast]

Awesome stuff mate

Im currently planning on taking a course (to get a qualification) so i can get a job in website constuction/making.

What language do you recommend i learn? flash or java? or another?

Thanks

Flash ActionScript is the master of multimedia programming.
Java, you can do more things excluding complex Flash multimedia functions, while unlike in Flash you can say make a chess engine and some other logical engines.
JavaScript is probably the most powerful, especially since I haven't learned it yet. It is similar to ActionScript for Flash, but is used for structuring websites with dynamic properties, like hovering over images and such. Personally I already think Flash can handle all of that, only not everyone has Flash Player installed on their system, while JavaScript reading I think is built into the browser.

I aim for the path of ambition, which means if I dedicated myself to websites (and I'm not exactly a websites person, except I know HTML wooo look who's special now), I'd shoot for all of them.

You'll at least want to learn JavaScript, that much I'm sure of. vBulletin doesn't even use Flash ('xcept in arcade); it uses HTML, PHP and JavaScript. Know those things, and you can make your own forums engine for example. Know Flash ActionScript, and you likely won't need to know JavaScript, but you will need your users to have Flash Player installed, which is the most common plugin that comes with most PCs today, but not all systems have it on there.

 

[Danny]

Thanks for the advice mate I guess html and php should be my initial goals

Inst dreamweaver just a html ide? (correct me if im wrong )

ive learned c and lua before , (basic in c made a small demo) so i guess html and php shouldn't be too hard for me

 

[Iconoclast]

HTML and perhaps PHP are things that every webmaster should know. Let JavaScript come after those.

Yes, Macromedia Dreamweaver is for website/webpage authoring. Its competitor is Microsoft FrontPage.

 

[Danny]

Thanks for the info