Flash Tutorial For Kids: Photo Slideshow

A while back last year, I wrote a post here for middle school kids that showed them how to “cut images out” in Photoshop.  It was a big hit in terms of helping the kids out as well as generating a lot of traffic from Google.  I’m teaching the web technology class again at Randolph School on Thursdays until the end of the year, so I’m going to include accompanying how to’s here to go along with each lesson.  Their regular teacher has asked me to continue some stuff in Flash for the next week or so, so we’ll start there.  Like I said in that post, this stuff will be old news for you veterans, but I’m hoping it will be really helpful as a reference for the kids in my class.

(Allright, that boring stuff is over.  You can pick up here, kids.)

So your teacher tells me that you guys have already covered stuff like masking and motion tweening in Flash.  That’s a really good start, those sorts of things are the basics of nearly everything cool that you can do in this program.  If you want a good refresher of what you can do with these methods, check out this page for motion tweening or this one for masking.

Today though, I’m going to show you how you can use these methods and some others in how you can make a photo slideshow.  You might have seen these before on MySpace pages or on other sites where you can scroll through different pictures.  If you haven’t seen one before, take a look at this one on my Flickr page.  

While these may look a little more complex than you are used to, don’t worry.  They are actually pretty simple and mostly use stuff that you’ve already learned in class. Just for example, let’s pick just three pictures for now.  You can add more later if you want to keep playing with this.  Import them to your library for now and rename them to something you will remember later on when you need them again.  

There are many different ways that we could do this, I am going to show you one possible way today.  Remember, using tools like Photoshop or Flash is very similar to using an art brush on a blank page.  There’s no one way that you should do these things, you should do it in whatever way you think will work best and keep playing with it until it does.

The way I’ll show you is one where the images will get bigger when you scroll over them.  For this, let’s create a flash size of around 750 pixels wide and about 350 tall.  Pick any color you’d like for a background color, but make sure it’s one that will contrast well with the images you’ve put in your library.  Now, create different layers for each of your pictures and give them names that you’ll remember easily.  Create a keyframe for each layer and put one picture in each one.  When you finish that up, it may look like the one I’ve done here.

Remember, you may be using a different version of Flash and your options may be in different places than in the version I’m using.  If you aren’t sure where something is, ask your teacher or see if you can find other tutorials through Google. The real trick to this is using buttons.  I personally think that this is the best way of doing this, but after you try a few different ways for yourself, you might find one that you prefer.  And that’s perfectly fine.  The first thing that you will want to do with this method is making your graphic a button.  As you may have already learned, a button in Flash is a type of graphic that will behave differently than a regular image in your final product.  It may do different things when a user puts their mouse over the image, or when they click it.  By making the graphic a button, it will let you decide what it does when the user does either one of these things.  

Go ahead and make it a button by right clicking on the image you want to work with.  Click “convert to symbol” in the pop up menu, then select the button option.  You might also want to rename your new button here to help keep track of it in your library.  After this, you should be able to select your new button.  This will bring you to a new section where you can do different things with your new button that should look a little like the image below.

In this tutorial, we’ll make the image get larger when the user places their mouse over the button.  To do this, create a new keyframe in the “over section”.  With this section selected, right click the button again and convert it to a symbol again.  This time, make it a movie clip.  This will tell Flash that when the user puts their mouse over the button, it will move in the way you want it to.  After you’ve made this section a movie clip, double click it again and you will see movie options.  Go ahead and make a motion tween in which the image gets a little bigger over a period of time. Now, here’s one thing that can get a little tricky.  Unless you tell it otherwise, Flash will repeat the animation tween that you create here.  You’ll need to tell it to stop the animation so that it won’t do this.  

This will require some simple programming in a language that Flash users call “Action Script”.  It’s based a little off of Java Script, a programming language that’s used a lot for different things on the web.  You can read more here if you want to learn more about it, or you might even try this site that explains how Action Script is the basis of making video games in Flash.  In most places, it’s pretty self explanatory.  For making the animation stop here like we’d like, all we need is the command “stop();”. 

Easy enough, right?  The parenthesis in that command isn’t needed here, but might apply do different things that you may want to specifically stop if you had more stuff in your animation.  The semicolon tells Flash that you’ve ended your command. Place that stop command in the Actions frame in your last keyframe and it should be good.  Make sure that it looks like the image below and you are good to go.

Repeat this method again two more times for your two other pictures, and you’re finished.  You may want to do some other tricky things like perhaps a fade tween or two, but that’s up to you.  Make sure that you save this working version first, then feel free to play around to give it any touch you’d like.  One cool thing that you might try is animating the initial state of your buttons.  Even if they are moving around, the mouse over effect will still work.  

And that’s it!  You’ve made a basic flash photo gallery.   You can tell Flash to export this as HTML, and you should be able to copy and paste the code and files into a place where you can show it off.  You can even play around with the html later on if you want to pretty it up, just make sure that you don’t mess with the flash code. It’s pretty basic, but a lot of creativity and flair could help it out.  That’s your job, take what you’ve learned so far in class and try it in new ways. Remember that nobody ever became a great designer by doing exactly what a tutorial or book told them to do, they became one by trying something creative no one else thought of before.

One other thing, I am including the flash file that you can download here.  If you get lost and need something to work with, open it up and play around with what I’ve already done.

Update: Just like I promised in class, here’s the ActionScript you’ll need to make a link:

on (release) {
getURL(“http://www.google.com”); }

Advertisements

4 responses to “Flash Tutorial For Kids: Photo Slideshow

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: