X
تبلیغات
رایتل
پشم سنگ عایق الاستومری
جمعه 14 فروردین‌ماه سال 1388
توسط: آلفا پک

ترانزیشن ورق خوردن

دوستان من امروز براتون یک افکت که شاید کم یاب باشه تو فلش اما تو بیشتر نرم افزار های میکس و مونتاژ گیر می آد رو هم به صورت کد و اسکریپت هم به صورت طراحی براتون آماده کردم فکر کنم که به کار می آد یک نرم افزار هم که این کار رو میکنه برا تون گذاشتم تو ادامه مطلب 

حاصل کار اینه: 

  

لینک این آموزش 

(در ادامه مطلب رونوشتش هست)

یا  

 

  

لینک این آموزش 

(Download FLA)

 

3D Page Curl Effect - Updated

Thumbnail - Click meA few improvements have been made enhancing visual quality as well as overall framerate under load, plus a few presentation and interface-related tweaks.

The main class file for the effect has been updated as well. 

سورس را از همین کلاس دریافت کنید

 

 

Papervision Page Turn Demo

I was checking out some Papervision3D stuff a few months back, and I thought it would be fun to adapt Lee Felarca’s page curl effect into something a bit more fleshed out. This demo also makes use of PV3D’s InteractivePlane feature, which allows us to create buttons on the 3D book’s pages. Thanks Lee!

 

Create a Page Curl Effect in Flash

A widely used effect in Flash is a page curl animation. When the mouse is rolled over the button it looks as though the corner of the picture (or page) is curling up and when it's rolled off, it goes back to its original image.

1. The first thing you need to do is import the image that you're going to have the effect applied to like a photograph or bitmap to the library. The image isn't actually going to curl up - it's going to remain the same. We'll be building the page curl effect on a layer above it.

2. A good thing to do is grab a piece of paper and bring up the right bottom corner and see what shape this makes. This is what threw me off in the beginning. In my head, I had an idea of how the animation should look but it never looked right when I drew it in Flash. That's because what I was creating never happens in reality when the corner of a page is curled up!

Ok, after I got past that, I create the shape of the page curl with the Pen Tool.

First, create a new Movie Clip and name it PageCurlOver. This will be the animation when the mouse is rolled over it.

On the first layer drag out an Instance of your photograph. Make a new layer for the page curl.

Now, with the Pen Tool create the shape of the corner bent up.


  First shape created with Pen Tool

Note: I filled the shape with a Linear Gradient and added a drop shadow.

That's the first part of the page curl but you'll notice we can still see the photograph underneath it. So, use the Pen Tool again and create a shape over the corner of the picture that needs hidden and fill with white with a thin stroke (gray). Put this shape in a layer beneath the first one. Select both shapes, group them and convert them into a graphic or movie symbol. They need to be converted into a symbol before we can Tween them - which is the next step.

 


Triangle shape over corner of picture

 

3. Click on Frame 10 in the "curl" layer and insert a keyframe. Now, click back on the first frame and scale down the curl to the bottom corner. Move the privet point to the corner of the picture. (See below.) Doing this lets us scale down the curl in the right direction.

 

 

For the starting point, make it transparent (0%).  Select Alpha from the Color menu and set it to 0%.

Create a Motion Tween - Make sure Scale is checked! (You can also play around with the Ease setting to get a smoother animation.)

Click on the last frame of the Tween and add a stop action. F9 > Type in "stop( );" - without the quotes. 

Select both layers and Right-Click > Copy Frames.

 

Insert > New Symbol > PageCurlUp (Movie Clip).

Select the first frame and Right-click > Paste Frames. This pastes in the frames of the PageCurlOver movie. However, we want this animation to go in the opposite direction, rather than curling up we want it to curl back down. So select all the frame in the curl layer > Right-click > Reverse Frames.

Tip: (Make sure "Scale" is checked in the Properties Panel for the tween.)

The hard part is over!


Now  create the button, Insert > New Symbol > name it Button and make sure Button is selected for the type.

In the Up state drag out the PageCurlUp MC onto the stage and align it in the center.

Insert a Keyframe in the Over state and drag out the PageCurlOver MC and align it with the Up keyframe - you can turn on Onion skinning for this if you need to.

Create a new layer for the invisible button. This is just a rectangle drawn over the picture in the Hit state.

Now, go back to the main scene and drag out an Instance of the Button you just created onto the stage and test the movie.

 

If you get totally lost or just want to start with the FLA, download it by clicking on the link below. (Right-click and choose Save-Target-As)

Download FLA.