Animowana książka w flash

kalibaru · 29 Grudzień 2008 14:34

Jak zrobić efekt przewracania się stron w książce w FLASH, tak jak mają gazetki na stronach Media Mark czy Saturn? Może są jakieś tutoriale, albo gotowe projekty do podmiany stron?

niezDarek · 29 Grudzień 2008 17:58

jeśli pasuje ci coś takiego jak na tej stronie:

http://www.flashpageflip.com/demos/free/

to tu:

http://www.flashpageflip.com/Online-Demo.asp

masz kilka gotowych, ostatni jest darmowy

ewentualnie mozesz uzyc np. takiego kodu:

//

// P i X E L W i T . C O M

//

stop();

//

//

//

//

//

// ________________________ C O M M E N T S

//

// Thought to self:

// Try naming functions according to the events which preclude them

//

//

// A page flip involves 3 pieces of paper

// 2 bottom static pages (which lay flat at all times)

// and 1 active flipping page (which has 2 sides)

// Four pages total, 2 static/stationary and 2 flipping

// The flipping page can be on the left or right side

// The top image on the flipping page doesn't actually move

//

//

//

//

//

// _________________________ V A R I A B L E S

//

// Store a constant reference to this clip on the main timeline so

// clip can be referenced from any other timeline as _level0.pagesAbs

_level0.pagesAbs = this;

// Set page dimensions

var pageWi = 200;

var PageHi = 300;

var pageWiHi = pageWi + pageHi;

var pivotY = pageHi / 2 + pageWi;

var pageColor = 0xFFFFE5;

// "dir" equals either 1 or -1 and determines if you

// are flipping forward or backward through the book

var dir = 1;

// "flipPage" is the # "between" the two flipping page #'s

var flipPage = 1.5;

// "curPage" is the # between the two currently viewed page #'s

var curPage = .5;

// "maxPages" should be an even number

var maxPages = 8;

// "autoStep" percentage of page width determining step size when auto-closing

var autoStep = .05;

// "dragging" is true if you are dragging the page

var dragging = false;

//

//

//

//

//

// ________________________________ R U N O N C E

//

// Place Left and Right page flip Buttons

this.attachMovie("cornerButton", "RButton", 11);

with (RButton) {

   _x = pageWi;

   _y = -pageWi;

}

this.attachMovie("cornerButton", "LButton", 12);

with (LButton) {

   _x = -pageWi;

   _y = -pageWi;

   _xscale = -100;

}

//

//

// Build pages for first time

pageInit(flipPage, dir);

// Drop down to appear centered

_y += pivotY;

//

//

//

//

//

// _____________________ B U I L D F U N C T I O N S

//

// Create a left-aligned page-sized solid fill raised one pagewidth

function makePage(targ, xQuadrant) {

   with (targ) {

      beginFill(pageColor, 100);

      moveto(0, -pageWi);

      lineto(0, -pageWiHi);

      lineTo(xQuadrant * pageWi, -pageWiHi);

      lineTo(xQuadrant * pageWi, -pageWi);

      endFill();

   }

}

//

//

// Create a left-aligned page-sized shadow gradient raised one pagewidth

// Shade is used to add depth to stationary pages

function makeShade(targ, xQuadrant) {

   with (targ) {

      // Defines gradient used as shadow overlay

      var colors = [0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000];

      var alphas = [40, 25, 15, 5, 0, 1, 6];

      var ratios = [0, 1, 17, 51, 89, 132, 255];

      var matrix = {matrixType:"box", x:0, y:pageWi, w:xQuadrant * pageWi, h:pageHi, r:0};

      beginGradientFill("linear", colors, alphas, ratios, matrix);

      moveto(0, -pageWi);

      lineto(0, -pageWiHi);

      lineTo(xQuadrant * pageWi, -pageWiHi);

      lineTo(xQuadrant * pageWi, -pageWi);

      endFill();

   }

}

//

//

// create a bottom-left aligned shadow gradient

// for animated shadows

function makeShadow(targ, xQuadrant) {

   with (targ) {

      // Defines gradient used as shadow overlay

      var colors = [0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000, 0x000000];

      var alphas = [40, 25, 15, 5, 0, 1, 6];

      var ratios = [0, 1, 17, 51, 89, 132, 255];

      var maxLength = Math.sqrt((pageWi * pageWi) + (pageWIHi * pageWiHi));

      var matrix = {matrixType:"box", x:0, y:-maxLength, w:xQuadrant * pageWi, h:maxLength - pageWi, r:0};

      beginGradientFill("linear", colors, alphas, ratios, matrix);

      moveto(0, -pageWi);

      lineto(0, -maxLength);

      lineto(xQuadrant * pageWi, -maxLength);

      lineTo(xQuadrant * pageWi, -pageWi);

      endFill();

   }

}

//

//

// Place Stationary Pages

function setStationary() {

   // Place the "S"tationary "L"eft "P"age

   createEmptyMovieClip("SLPage", 1);

   if (flipPage != 1.5) {

      makePage(SLPage, -1);

      SLPage.attachMovie("print" + (flipPage - 1.5), "Print", 1);

      with (SLPage.Print) {

         _x = -pageWi / 2;

         _y = -pivotY;

      }

   }

   // Place the "S"tationary "R"ight "P"age

   createEmptyMovieClip("SRPage", 2);

   if (flipPage != maxPages - .5) {

      makePage(SRPage, 1);

      SRPage.attachMovie("print" + (flipPage + 1.5), "Print", 1);

      with (SRPage.Print) {

         _x = pageWi / 2;

         _y = -pivotY;

      }

   }

   // Place shade on page not being revealed

   var targ = dir > 0 ? SLPage : SRPage;

   targ.createEmptyMovieClip("Shade", 2);

   makeShade(targ.Shade, -dir);

}

//

//

// Place the Flipping Pages

function setFlipping() {

   var targ;

   // Place the "F"lipping "T"op "P"age

   createEmptyMovieClip("FTPage", 3);

   makePage(FTPage, dir);

   with (FTPage) {

      attachMovie("print" + (flipPage - dir * .5), "Print", 1);

      with (Print) {

         _x = dir * pageWi / 2;

         _y = -pivotY;

      }

   }

   FTPage.createEmptyMovieClip("Shade", 2);

   makeShade(FTPage.Shade, dir);

   // Place the "F"lipping "B"ottom "P"age

   createEmptyMovieClip("FBPage", 4);

   makePage(FBPage, -dir);

   FBPage.attachMovie("print" + (flipPage + dir * .5), "Print", 1);

   with (FBPage.Print) {

      _x = -dir * pageWi / 2;

      _y = -pivotY;

   }

   FBPage._rotation = dir * 90;

}

//

//

// Creates Shadows which follow edge of transition

function setShadows() {

   var targ;

   // Place shadow on the "F"lipping page

   this.createEmptyMovieClip("FShadow", 5);

   makeShadow(FShadow, -dir);

   FShadow._rotation = dir * 45;

   // Place shadow on the "S"tationary page

   this.createEmptyMovieClip("SShadow", 6);

   makeShadow(SShadow, dir);

   SShadow._rotation = dir * 45;

}

//

//

// Create Masks to hide everything

function makeMasks() {

   // Create mask for Flipping Bottom Page Mask

   this.createEmptyMovieClip("FBPageMask", 7);

   with (FBPageMask) {

      beginFill(0x005500, 100);

      lineto(pageWiHi, -PageWiHi);

      curveto(0, -2 * PageWiHi, -pageWiHi, -pageWiHi);

      endFill();

   }

   // Create mask for Flipping Top Page

   FBPageMask.duplicateMovieClip("FTPageMask", 8);

   // Create mask for Shadow on the Flipping Page

   this.createEmptyMovieClip("FShadowMask", 9);

   makePage(FShadowMask, -dir);

   FShadowMask._rotation = dir * 90;

   // Create mask for Shadow on Stationary Page

   this.createEmptyMovieClip("SShadowMask", 10);

   makePage(SShadowMask, dir);

   FBPage.setMask(FBPageMask);

   FTPage.setMask(FTPageMask);

   FShadow.setMask(FShadowMask);

   SShadow.setMask(SShadowMask);

}

//

//

// Hide pages before page1 and after Last Page

function limitBook() {

   if (flipPage == 1.5) {

      SLPage._visible = 0;

      LButton._visible = 0;

      SShadow._visible = 0;

      if (dir == 1) {

         FTPage.Shade._alpha = 67;

         SShadow._visible = 1;

      } else {

         FShadow._alpha = 67;

      }

   } else if (flipPage == maxPages - .5) {

      SRPage._visible = 0;

      RButton._visible = 0;

      SShadow._visible = 0;

      if (dir == -1) {

         FTPage.Shade._alpha = 67;

         SShadow._visible = 1;

      } else {

         FShadow._alpha = 67;

      }

   }

}

//

//

// How to position all pages needed for a page flip

// calls all functions listed above

function pageInit(cp, d) {

   flipPage = cp;

   dir = d;

   //trace ("flip page = "+flipPage+" dir = "+dir);

   setStationary();

   setFlipping();

   setShadows();

   makeMasks();

   limitBook();

}

//

//

//

//

//

// __________________ F L I P P I N G F U N C T I O N S

//

// How to adjust position of flipping page

// based on a value between 0 and 1

function flip(curVal) {

   var rot = dir * 45 * curVal;

   FBPageMask._rotation = FTPageMask._rotation = -rot;

   FBPage._rotation = FShadowMask._rotation = (dir * 90) - rot * 2;

   FShadow._rotation = SShadow._rotation = (dir * 45) - rot;

}

//

//

// how to determine position of flipping page

// returns a value between 0 and 1

// zero being no-flip and one being full-flip

function getPageRatio() {

   if (dragging) {

      // if dragging page position is determined by mouse position

      // the 20 helps advance the turning page when the button is pressed

      pageRatio = -dir * (_xmouse - startX - dir * 20) / (2 * pageWi);

   } else {

      // if not dragging; auto increment page towards final position

      pageRatio > 2 / 3 ? pageRatio += autoStep : pageRatio -= autoStep;

   }

   // if out of bounds

   if (pageRatio <= 0) {

      pageRatio = 0;

      if (!dragging) {

         flipDone();

      }

   } else if (pageRatio >= 1) {

      pageRatio = 1;

      if (!dragging) {

         flipDone();

      }

   }

   return (pageRatio);

}

//

//

//

//

//

// _____________ C O N T R O L I N G F U N C T I O N S

//

// What to do when you press a page flipping button

function startFlip(dir) {

   pageInit(curPage + dir, dir);

   startX = dir * pageWi;

   dragging = true;

   RButton._alpha = 0;

   Lbutton._alpha = 0;

   this.onEnterFrame = function() {

      flip(getPageRatio());

   };

}

//

//

// what to do when page is released

function flipRelease() {

   dragging = false;

   if (pageRatio > 2 / 3) {

      curPage += 2 * dir;

   }

}

//

//

// What to do when pages are done flipping

function flipDone() {

   this.onEnterFrame = null;

   RButton._alpha = 100;

   LButton._alpha = 100;

   if (curPage != .5) {

      LButton._visible = 1;

   }

   if (curPage != maxPages + .5) {

      RButton._visible = 1;

   }

   // Delete hidden pages to save resources

   if (pageRatio == 0) {

      FShadow.removeMovieClip();

      FShadowMask.removeMovieClip();

      SShadow.removeMovieClip();

      SShadowMask.removeMovieClip();

      FBPage.removeMovieClip();

      FBPageMask.removeMovieClip();

      if (dir == 1) {

         SRPage.removeMovieClip();

      } else {

         SLPage.removeMovieClip();

      }

   } else {

      FTPage.removeMovieClip();

      if (dir == -1) {

         SRPage.removeMovieClip();

      } else {

         SLPage.removeMovieClip();

      }

   }

   FTPageMask.removeMovieClip();

}

//

//

// assign functions to button events

LButton.onPress = function() {

   startFlip(-1);

};

LButton.onReleaseOutside = function() {

   flipRelease();

};

LButton.onRelease = function() {

   flipRelease();

};

RButton.onPress = function() {

   startFlip(1);

};

RButton.onReleaseOutside = function() {

   flipRelease();

};

RButton.onRelease = function() {

   flipRelease();

};

//

//

//

//

//

kalibaru · 29 Grudzień 2008 22:33

Super! Dzięki!

kalibaru · 30 Grudzień 2008 21:59

Jeszcze taka sprawa. Nie wiesz może jak zrobić, aby wszystkie strony wczytywały się naraz a nie dopiero po przewróceniu kartki? Chodzi o to, aby „treść” kartki zaginała się już za pierwszym otwarciem strony.

ktostam1 · 14 Styczeń 2009 21:30

Bardzo fajna sprawa

mam tylko jedno pytanko

jak i czy wo gule można usunąć w tej darmowej wersji menu

chodzi mi o to żeby została sama “książka” bez górnego i dolnego paska z “przyciskami”

niezDarek · 15 Styczeń 2009 07:23

ale te przyciski maja ułatwiać nawigacje po książce i jak dla mnie są przydatne,

kalibaru · 30 Styczeń 2009 10:57

A nie wie ktoś czy i jak da się utworzyć na jednej z stron menu z linkami tak, aby po kliknięciu na któryś kartki przerzucały się na wybraną stronę?

Romantyczka · 11 Kwiecień 2009 11:58

a ja posiadam wlasnie skrypt z flashpageflip ale totalnie sie nie znam na php i nie wiem gdzie go wrzucic ani nic zeby dzialalo

jest mi ktos wstanie pomoc?

blagam!

gg:1375929

Anka

kalibaru · 20 Kwiecień 2009 07:35

Skrypt należy dać przecież w action script we flash-u.

I osadzić cały swf na stronie.

vinnajagoda · 19 Wrzesień 2011 10:46

http://pressmo.pl jest dobre jako gotowe rozwiązanie, a do tego ma parę bajerów, takich jak automatyczne miniaturki. Jest tylko jedno obostrzenie - na wejściu trzeba mieć plik PDF, albo DOC.

Tu przykładowe katalogi/książki z efektem przewracania kartek: http://pressmo.pl/przyklady

Kod i plik swf jest generowany automatycznie, poszczególnymi parametrami można sterowac z poziomu JavaScript.

wolfiee · 27 Listopad 2011 18:28

Tu jeszcze video tutorial dotyczący tworzenia gazetek za pomocą Pressmo -

KrzychuM_9832408 · 30 Maj 2017 20:46

Możesz też w Indesign, jest chyba sporo łatwiej, tu jest tutorial: