Before/After

[superfrasky]

Hi guys, Im trying to make a before/after in flash. I dont know about flash, but if anyone know how to make a before/after flash movie or anyone know a site with information about this, please help.
Thanks alls

[Jose_Herrera]

Are you trying to do a mouse over before/after? For that you would use Actionscripting and tell it when someone mouses over to switch images.

[Angel_Ice]

Make 2 images...before and after of the same size.

Import them in flash, each on a different layer, in the first frame.

Select one (first layer) and press F8, select graphic and pres ok.

Go on the frame 25, still on the firts layer, select it and press F6, now u have a second keyframe. Right click between the 2 key frames and choose "motion tween".

Select the firts frame on the first layer, select the image cliccing on it, look down in the properties window (bottom of the screen) on the right side and choose from the drop down menu "aplha" and put it on 0%.

Now put the second layer under the firts and run your animation...

Hope I did not missed anything..if yes...just let me know. I'll post and exemple.

[superkoax]

he meant a mouseover effect...I have looked on the net to try to do that, but can't find a basic tutorial on how to do it...Have tried, but I'm no flash guru...

How d we make a before and after button with pictures in flash?

PLEASE HELP AND EXPLAIN I BABY WORDS


Gerry

[madladdy]

Ok as with all things there are a few ways to do this - here's a quick easy way without using timelines or anything too nasty..

Import your pictures - place each onto seperate layers and convert them to movie clips (select and F8 for each)

Give the top (in layer order) movie clip an 'instance name' (bottom left in properties panel) - I have called mine 'moviePic1' for example.

Make a new layer on -top- of all other layers. Create a large rectangle that covers the pictures. This will act as the rollOver hotspot. Select the rectangle, press F8 and choose 'button'. Double click on this new button and
in the timeline drag the blue box from the 'Up' to 'Hit' box - basically this makes a transparent button.

Go back to main movie (press 'scene1' at top left) And select the button. Press F9 and in the actionscript window type...

on(rollOver){
moviePic1._visible = false;
}
on(rollOut){
moviePic1._visible = true;
}


CTRL+ENTER to test.. basically the code tells the transparent button when rolled over to hide the movie clip 'moviePic1' - when rolled out it shows it again.

Real simple to be honest although if you have never used Flash etc some of the ideas might be tricky to understand.

I have uploaded a basic FLA of this to:

http://www.mediafire.com/?ciiwzy5gmmo

Hope it helps and good luck..

Jason...

[superkoax]

thanks for the help on that one! maybe I can come back with another questin abit later on...I have some problems with a menu effect i'm trying to make...but give some time to try...just started yesterday and really made a breaktrough on it

Started with flash 2weeks ago...really love the homepage building concept...I make my layouts in PS and then convert them to png use them in my flash...LOVE IT

thanks again for the help!
It doesn sound easy, but maybe with time I will start to think flash instead of understanding it

Gerry

[superkoax]

i followed your tut to the word, only get error...I have made the same instance name and made the AS into the action script window, aren't there supposed to a start code and end code in that window? I get errors...the picture I naem moviepic1 comes up, but when I use my mouse on the picture it doesnt work...


Gerry

[madladdy]

Hmm I'm not 100% what your problem is due to a lack of info. I would however try the following:

1. Add a trace to the rollOver - ie

on(rollOver){
moviePic1._visible = false;
trace ("test");
}

Now test, if it flashes up 'Test' you know the rollOver is working and the problem is probably an error in instance name your calling.

If not check..

2. Your pictures are 'movie clips' NOT graphics (AS can only control 'movies' not graphics)

If you don't get the 'Test' pop-up:

3. Check the top rectangle is a BUTTON

4. That you placed the actionscript IN the button. This is maybe a hard concept to grasp maybe but in Flash you can place actionscript on the timeline, on movieclips, on buttons, and then inside timelines of movieclips, basically you can add code anywhere and on large projects it can get messy and confusing quickly if you dont plan properly!

But basically for that code to work it needs to be ON the button symbol. The easiest way to do is press F9 whilst you have the buttons selected/highlighted. Then type in code.

There is no start/stop code as you are not using the timeline but for want of a better description - Flash's internal timing. Whilst this movie just sits on Frame1 doing nothing the code in the button constantly monitors for a rollOver.

5. Your best bet is probably to download my version and look through and see what you have done different etc..

ps.. Try out Fireworks for designing websites.. It got a nice mix of vector & bitmap tools - I have a web design studio and we all design in Fireworks & then cut up and build CSS/XHTML/PHP sites by hand.. Flash is good for bits but not whole sites IMHO!

Good luck..

[nyxxie]

Can anyone help? I'm trying to do the tutorial that madladdy posted. I suck at Flash, does anyone know a simple Flash tutorial for a rollover before/after effect. Thanks!!

[superkoax]

Nyxxie: I found out the tutorial to make a before and after button! The thing you do is:

-New project frame size I prefer to make it the same size as the before and after shot!

- import both before and after shot to library in flash
- the before picture is always what we see first, so put that into the stage and push F8, select the button and name it before..

- then doubleclick the before picture and the button menu will open, ther you will see up over down and hit in the timeline menu! mark "over" in timeline menu and and right click. then hit the insert frame...do the same to over down and hit.

- mark over and drag the after shot onto the before shot. make it fit perfectly. and do the same to down and hit as well! then this should be a button on mouseover it would give you the aftershot...try by hitting ctrl + enter...

hope this helps

gerry

[nyxxie]

Thanks Superkoax, it worked!!!!

The only thing I had to change, in case someone else wants to try, is that when you say "insert frame", it didn't work, so instead I inserted a "key frame" and that did the trick. Thanks again!

[superkoax]

sorry! yes key frame sorry,sorry! Finally a happy reader for my book

gerry