dcsimg
A Flash Developer Resource Site

Results 1 to 9 of 9

Thread: site effects

  1. #1
    Junior Member
    Join Date
    Oct 2003
    Location
    Gulfport MS USA
    Posts
    9

    site effects

    I was browsing the net a few evenings ago and I came across a site of interest. This fellow has some Flash effects that I enjoyed quite a lot. Check out the site here as a reference as I talk about the effects.

    The first thing I liked was on the simple splash page. When you hover over LAUNCH INTERFACE, a box appears around the text. How is this achieved? Did he just make imageA.jpg & imageB.jpg, and then just do a simple rollover?

    Next, once inside the page, I noticed this little tidbit. The stretching horizontally, and then vertically, of the border is fascinating. Was this just a tween of 2 images?

    Then we have the flashing during the "stretching". I have no clue how this was accomplished. Deleting frames perhaps?

    And finally, we have the "stretching" of the MENU. This is pretty much the same effect as the border one. But with the text moving slightly to the right. How was this text effect done? Motion tween I surmise.

    Thank you all.

    Future Flash Guru & Current Newbie,
    EO

  2. #2
    free-webmaster-resource.com deamothul's Avatar
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    1,475
    The first thing I liked was on the simple splash page. When you hover over LAUNCH INTERFACE, a box appears around the text. How is this achieved? Did he just make imageA.jpg & imageB.jpg, and then just do a simple rollover?
    - seems like just a square, made by the drawing api or attached, shown in a rollOver over a textfield or in a distance calculating script

    Next, once inside the page, I noticed this little tidbit. The stretching horizontally, and then vertically, of the border is fascinating. Was this just a tween of 2 images?
    - if u mean the first effect that kicks in after pressing launch,
    is also a drawing api shape or an attached square, modified at runtime with actionscript, to do what it does. anywayz thats how i would have done it. i would have made that shape a mask of that jpg to give it some more effect then that alpha fade in

    Then we have the flashing during the "stretching". I have no clue how this was accomplished. Deleting frames perhaps?
    - u could set a color on an object with the Color object
    mynewcolor = new Color(myMc)
    mynewcolor.setRGB(myCol)
    so u can imagine what can be done with the color object

    And finally, we have the "stretching" of the MENU. This is pretty much the same effect as the border one. But with the text moving slightly to the right. How was this text effect done? Motion tween I surmise.
    - if u meant the line comming down and up at the menu, is a bit of script that applies some motion with ease

    hope this sheds some light on the dark

  3. #3
    Junior Member
    Join Date
    Oct 2003
    Location
    Gulfport MS USA
    Posts
    9
    No, not really.

    Future Flash Guru & Current Newbie,
    EO

  4. #4
    free-webmaster-resource.com deamothul's Avatar
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    1,475
    all is possible, it just takes time

  5. #5
    Member
    Join Date
    Aug 2003
    Location
    Dryden, ON - Canada
    Posts
    71
    Actually most of those effects are simpler then deamothul explained. First off, in Flash (I use MX) on a roll over it's just made to have a square around it. If you get Flash, do the lessons it comes with and it teaches you step-by-step on how you could accomplish this with a roll over so I wont go into detail on how to do that here. The next one, when you click the Launch Interface, you are probably using a simple ActionScript such as gotoAndPlay(15); which would tell Flash Player to go to frame 15 and start playing. Now on frame 15 all the creator probably did was make it so then all that was there was that same box that surrounded the Launch Interface, making all the text vanish. Then between frames 15 and 20 he probably shape tweened that same box (after converting it into a symbol) and then on frame 20 made that same box except with a width far greater (filling the width of the movie's width). The box looking like it expanded it's width is the end result. Then he probably shape tweened that same box again between 21 and 25 to create the height change in the same manner. The image inside the box was done through a fade-in effect, plenty of tutorials on that so I wont go into detail. It's basically changing the object's _alpha parameter until it finally isn't visible anymore. Next the menu was done by motion tweening that line from right under the box to further down, then changing the _x, _y and _alpha of the text he could have it all "move in" like that, and yet at the same time fade-in. That way, you get the effects you desire. If you have a copy of Flash, check in the Help >> ActionScript Dictionary for some information on anything you don't understand above. I would highly suggest getting a book of some kind to teach you ActionScript if you haven't done any scripting/programming in the past though. Otherwise if you have it'll be a breeze to learn.

    Hope this helps!
    Tyouk

  6. #6
    free-webmaster-resource.com deamothul's Avatar
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    1,475
    tyouk is totally right

  7. #7
    Senior Member mal pacino's Avatar
    Join Date
    Jul 2003
    Location
    England - and it's going down the pan!
    Posts
    996
    EVILOMEGA,

    I have made an fla for you to download. It is two scenes (to keep it simple). On scene one is the button - checks its size in the info panel. it is aligned to the centre of the stage. Check the action script on the button. Also open the button and look what is happening on each keyframe.

    Next open scene two. The box elongating sideways and then up is a simple shape tween. Notice how on frame one it is the same size as the button. at frame ten I make it 450 width 20 height and at frame 20 i make the shape 450 by 300. I then faded in the new button I made on a different layer and also put the picture on a different layer.


    Hope it helps. Tell me if it does

    Good luck.

  8. #8
    Junior Member
    Join Date
    Oct 2003
    Location
    Gulfport MS USA
    Posts
    9
    Wow. This helps a lot. Thanks, mal pacino.

  9. #9
    Senior Member mal pacino's Avatar
    Join Date
    Jul 2003
    Location
    England - and it's going down the pan!
    Posts
    996
    No problem, It's the easiest way in my opinion.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center