Помогни ни да направим Uroci.net по - богат! Добави урок

Ефектно превъртане на картинка и текст

goldenlady   трудност:    видян: 17736

1. Създава се нов документ: Modify > Document (Ctrl+J), с размери Width to 300 and Height to 224px. Frame rate- 35 fps (Frames per Second).

уроци - 200610309_img1.gif

2. Преименуваме layer 1 на background. Създаваме нов слой и го именуваме text.

уроци - 200610309_img2.gif

3. Заключваме background layer, избираме text layer, избираме Text Tool (A) и пишем произволен текст, в примера е даден следния:


уроци - 2006103010_img3.gif

4. Създаваме нов слой и го именуваме Action.

5. Избираме си някаква картинка със същите размери като нашия flash документ и следва import (Ctrl+R) във flash.

6. Докато картинката все още е селектната натиснете Ctrl+K (Align Panel) и тогава кликнете на Align-> To stage icon, след това на Align horizontal center и Align vertical center.

уроци - 2006103011_img4.gif

уроци - 2006103011_img5.gif

7. Избира се Modify > Break Apart (Ctrl+B), за да се раздели картинката.

уроци - 2006103012_img6.gif

8. Избира се Selection Tool (V) и се селктира част от картинката.

уроци - 2006103012_img7.gif

9. Натиснете F8 key (Convert to Symbol) и се избира Movie Clip.

уроци - 2006103013_img8.gif

10. Докато все още е селктиран току що създадения муви клип (частта от картинката) се отваря Properties Panel (Ctrl+F3)и под <Instance Name> напишете part1.

уроци - 2006103015_img9.gif

11. Кликнете два пъти върху новия Movie Clip, или right click и Edit in Place.

12. Кликнете върху frame 1, отворете Action Script Panel (F9), и поставете този скрипт: stop();

13. Кликнете на frame 30 и натиснете F6. След това кликнете на frame 10, изберете Transform Tool (Q) и намалете размера на частта от снимката докато горния и долния й край се припокрият.

уроци - 2006103016_img10.gif

14. Кликнете на 15 и намалете размера на частта от снимката докато левия и десния й край се препокрият.

уроци - 2006103016_img11.gif

15. Връщаме се на Scene 1 и повтаряме стъпка 13 и 14 за всички останали части от картинката.

уроци - 2006103017_img12.gif

16. Създаваме нов слой и го именуваме Invisible Button.

17. Връщаме се отново на action layer, избираме първата част от картинката (part 1), отваряме Info Panel (Ctrl+I) за да видим размера и позицията на тази част. Твзи размери трябва да се запомнят, защото след това избираме слоя Invisible Button, избираме Rectangle Tool (R) и създаваме Invisible Buuton със същите размери и позиция като на първата част от картинката.

уроци - 2006103018_img13.gif


уроци - 2006103018_img14.gif

18. Избира се Invisble Button, отваря се Action Script Panel (F9 ) и се поставя този скрипт:
on (rollOver) {
tellTarget ("/part1") {
play();
}
} 19. За всички останали части на картинката се правят подобни Invisble Button -и


И сега ако съм улучила верния файл това ще е резултатът:

Работните файлове от урока.

Урокът е взет от http://tutorialoutpost.com/



Коментари (6)

grizli на 20.05 2008 в 01:21ч.
Резултата е много ефектен. При мен се получи. Добавям за тези, които не са се сетили, че кадри 10 и 15, когато правите Movie клиповете трябва да са ключови.
grizli на 20.05 2008 в 20:40ч.
И първо се създава Motion tween между 1 и 10 кадър след това чак се свива парт1 в кадър 10. После пак първо се създава Motion tween между 15 и 30 кадър и пак после се свива. Надявам се да съм помогнал на някого с това, щото и аз се измъчих докато открих как става.
grizli на 20.05 2008 в 23:21ч.
И първо се създава Motion tween между 1 и 10 кадър след това чак се свива парт1 в кадър 10. После пак първо се създава Motion tween между 15 и 30 кадър и пак после се свива. Надявам се да съм помогнал на някого с това, щото и аз се измъчих докато открих как става.
Nel на 24.09 2009 в 12:51ч.
Моля, някой да ми помогне.... нещо не ми се получава... мъча се от 2 дни...
grizli на 31.03 2011 в 11:05ч.
http://flash-8.hit.bg/Flash8/lessons/uroci.html
zoohan на 04.01 2013 в 01:16ч.
Здравейте,на мен нещо не ми си получи от няколко дни се опитвам,направих това което сте споделили в коментарите,но явно бъркам някъде,ако някои от вас може да ми прати работния файл (.fla) да видя как трябва да изглежда ще съм ви много благодарен! :))

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: IT Новини