Help a Flash Newbie

July 18, 2009 4:35 PM

I am a complete Flash newbie who has been asked to add some linkable images to a website.

I have never used flash / actionscript before but I have lots of experience with XHTML/CSS/JavaScript & Photoshop so I feel I should be able to pick things up fairly quickly.

However I am reluctant to go out and purchase a couple of books to complete this fairly simple task as I do not intend to learn Flash any time soon.

What do you think I need to know to do this? Also what free & up to date resources do you suggest?

I will be using Flash CS2

posted by errspy to computers & internet (9 comments total)

Have you ever used Microsoft Access?

I ask -- because Flash is similar to Access. You can access 10% of the features that do 90% of what you need by just using the drag and drop GUI editor. However -- when you need to get down and dirty -- Action script (or VBA in access) is where you want to be -- but usually, in many cases, you can get by without it.

Since you have CS2, you will be using ActionScript v2. v1->v2 was an incremental change, v3 is an entirely changed beast (dissimilar enough that code for one rarely works, or is even logically the same).

Adding linkable images to a Flash app doesn't require any advanced knowledge -- its a built in option I believe (or incredibly easy).
posted by SirStan at 4:40 PM on July 18

First of all, since you'll be using CS2, stay away from ANYTHING that mentions Actionscript 3.0. The third version of AS only works with CS3 and above.

So are you saying that the entire content of the Flash movies will be linkable images? If so, I have to ask: why Flash? You can make a linkable image via HTML and a JPEG, no?

However,

To make a linkable image using Actionscript 2.0, do the following:

1. In a new Flash file, choose File > Import > Import to Stage and import the image.

2. Select the image on the stage and choose Modify > Convert to Symbol, giving the symbol any name you want (the name won't display; it's just for internal organization). Choose "Movie Clip" and the symbol type. <>
3. If you don't see it already, reveal the Properties panel via Window > Properties. Select the
image on the stage and, in the Properties Panel, give it a name in the Instance Name text-field. Yes, I know you already gave it a name when you converted it to a symbol, but you have to name it again. This is the name you'll use to refer to it in your AS code. Instance names follow the same rules as Javascript-variable names: start with a letter and, for the remaining characters, only use letters, numbers and underscores.

4. Click the first frame of the Timeline <> Timeline.)

5. Bring up the Actionscript editor via Window > Actions.

6. In the AS editor, type this script:

myImage.onRelease = function() : Void
{
getUrl( "http://url.to.link.to" );
}

Change "myImage" to whatever you typed in the instance-name text-field on the Properties Panel.

7. Choose File > Publish Settings to generate a SWF (the file type that you put on the web).
posted by grumblebee at 4:49 PM on July 18

Here's my answer again, with (hopefully) fixed typos and html-entities:


First of all, since you'll be using CS2, stay away from ANYTHING that mentions Actionscript 3.0. The third version of AS only works with CS3 and above.

So are you saying that the entire content of the Flash movies will be linkable images? If so, I have to ask: why Flash? You can make a linkable image via HTML and a JPEG, no?

However,

To make a linkable image using Actionscript 2.0, do the following:

1. In a new Flash file, choose File > Import > Import to Stage and import the image.

2. Select the image on the stage and choose Modify > Convert to Symbol, giving the symbol any name you want (the name won't display; it's just for internal organization). Choose "Movie Clip" as the symbol type. <--- important!

3. If you don't see it already, reveal the Properties panel via Window > Properties. Select the
image on the stage and, in the Properties Panel, give it a name in the Instance-Name text-field. Yes, I know you already gave it a name when you converted it to a symbol, but you have to name it again. This is the name you'll use to refer to it in your AS code. Instance names follow the same rules as Javascript-variable names: start with a letter and, for the remaining characters, only use letters, numbers and underscores.

4. Click the first frame of the Timeline <-- important!. (If you don't see the Timeline, choose Window > Timeline.)

5. Bring up the Actionscript editor via Window > Actions.

6. In the AS editor, type this script:

myImage.onRelease = function() : Void
{
getUrl( "http://url.to.link.to" );
}

Change "myImage" to whatever you typed in the instance-name text-field on the Properties Panel.

7. Choose File > Publish Settings to generate a SWF (the file type that you put on the web).
posted by grumblebee at 5:03 PM on July 18

Everything Grumblebee is saying is true: if all you're trying to do is to put an image on a web page and make it linkable, you don't need flash.

Having said that, here's how you do it in flash.

File->New. In the popup, select "Flash File (Actionscript 2.0)"

File->Import->Import to library. In the popup, find your image file.

In the main stage, right-click and choose "Document Properties". Set the width and height to be the same as your image.

Drag your image onto the stage. Land it anywhere.

Left-click on the image, then look at the bottom left of the window. Make sure that the "Properties" tab is selected, and you'll see a place where you can adjust the X and Y positions. Set them both to 0. (What that does is to put the upper left corner of the image exactly at the upper left corner of the active part of the stage.

On the stage, right-click your image and select "Convert to symbol". Select "Button" and hit OK.

Left click the image and hit F9. The "Actions" window pops up.

Here's what you enter:


on (release) {
GetURL("http://your/URL/goes/here", "_blank");
}


Now save the source file you just created. (File->save as)

Then do "File->export->export Movie".

In the first popup, select the path and name of the SWF file you want to create.

In the second popup you can pretty much leave everything default EXCEPT that you want to set the JPG quality to 90. (The default 50 looks like ass.)

And then save your source file again. (It saves the compilation options you just entered.)
posted by Chocolate Pickle at 5:26 PM on July 18

...and that's what I get for not looking closely. I see that Grumblebee already entered all of that. Sorry for the redundancy.
posted by Chocolate Pickle at 5:27 PM on July 18

doing this on the timeline in as3 is not significantly harder than in as2.

give the clickable clip an instance name ("buttonClip" here), then use the following code on the timeline in the same frame as the clip instance:

function click(evt:MouseEvent):void{
navigateToUrl(new URLRequest('http://www.whatever.com'));
}

buttonClip.addEventListener(MouseEvent.CLICK,click);

if you use the Button type (which is based on flash.display.SimpleButton) rather than the MovieClip type, you'll get the hand cursor and four states (over, out, down, hit).

if you were writing this in a class file, you'd need to import the classes used, but on the timeline this isn't necessary. it is slightly more verbose than the as2 option, but if you need any of the features of as3 in other parts of the movie, you'll need this.
posted by klanawa at 6:33 PM on July 18

just to add that you may want to add a onReleaseOutside here

on (release, releaseOutside) {
GetURL("http://your/URL/goes/here", "_blank");
}

to capture the event even in the case the user pulls his pointer out of the image before releasing his mouse button.
and also to see whether MeFi supports <code>
posted by _dario at 6:43 PM on July 18

I'm Flash-ignorant but HTML savvy and wondering, what's the point of this GetURL script -- why not just use an <a href> linking to your image?
posted by Rash at 7:52 PM on July 18

Rash, Flash doesn't understand html tags (well, it does understand a small subset of them under certain conditions, but in general it doesn't), so if you're doing this as a Flash project, you have to use getUrl (if it's an AS 2.0 project -- AS 3.0 uses a different method).

I don't know why the O.P. needs to do this in Flash at all. It sounds like it should be done with HTML, but if it has to be done in Flash, using AS 2.0, getUrl is the way to go.
posted by grumblebee at 8:11 PM on July 18