С. В. Киселев, С. В. Алексахин, А. В. Остроух
жүктеу/скачать 1,97 Mb. Pdf көрінісі
|
Веб дизайн
- Бұл бет үшін навигация:
- 4.2. Dreamweaver- да қарапайым анимацияларды жасау
| 4.3-
сурет.Timelines панелі ол кез келген браузерде жақсы көрсетіледі. Ең дұрысы бұл үшін Save Optimized Asкомандасын қолданған жөн. Бірінші Optimized, 2-Upнемесе 4-Up беттеріндегі құжаттар терезесіне ауысып, Optimize панелінің көмегімен оңтайландыру параметрлерін таңдаңыз: файл түрін таңдаңыз (GIF жолы),ондағы түстер санын(сіздің суретіңіздегі жоқ түстерді, файл палитрасынан сапасын жоғалтпай алып тастауға болады). Егер оңтайландыруды жасамаса, файл көлемдері интернетте қолданыла алмайтындай аса үлкен болып кетуі мүмкін. 4.2. Dreamweaver- да қарапайым анимацияларды жасау Dreamweaver – да қарапайым анимацияны жасау үшін сізге Timelines(4.3-сурет) панелі керек, ол жерде веб-парақшада жасалған барлық анимациялар берілген. Бұл панельді экранға шығару үшін Windows мәзіріндегі Othersкіші мәзірініңTimelines ажыратқыш тетігін қосыңыз, не болмаса [Alt] + [F9] перне комбинациясын басыңыз. Timelines панелі Dreamweaver негізгі терезесінің төменгі бөлігінде орналасқан докта орналасқан. Бұл дегеніңіз сізTimelinesпанелін аша аласыз (және сіз докқа орналастырған басқа да кез келген панельді), егер ол сізге қажет болмаса, тінтуір клавишасымен докты жасыратын тетікті басып, сосын оны экранға қайтарыңыз. Бұл панельдің көп бөлігін уақытша шкала алып жатыр, алайда ол секундқа емес, анимация кадрына өлшемделген. Уақыт мәні (кадрдағы) жоғарыда көрсетілген сұр түсті уақытша шкалада жазылған. Бұл шкаланың астында анимацияның барлық қол жетімді каналдары берілген. Панельдің жоғарғы жағында жол мен анимацияның өзінің бірқатар параметрлерін беруге арналған басқарудың бірнеше элементтері бар. Қалған уақытша шкалаларды көру үшін анимацияның құрамдастырылған сәйкес тармағын таңдау керек. Қандай да бір қол жетімді бос орналасқан элементтерді анимациялау үшін, оны анимация жолын жасап, уақыт шкаласына орналастыру керек. Бұл үшін талап етілетін бос элементті бөліп, оны тінтуірдің оң жақ пернесімен шертіп, контекстік мәзірде Add to Timeline тармағын таңдаңыз. Сіз сонымен қатар, уақытша сызықтың контекстік мәзірінің Add Object тармағын немесе ModifyмәзірініңTimeline кіші мәзірінің Add Object to Timeline тармағын таңдай аласыз.Соңында, сіз [Ctrl] + [Alt] + [Shift] + [T] перне комбинациясын қолдана аласыз. Dreamweaver анимация процесінде бос элементтің келесі параметрлерін басқара алады: ■ сол жақ жоғарғы бұрыштың көлденең және тік координаттары (атрибуты LEFTи ТОР); ■ ені мен биіктігі (WIDTHжәнеHEIGHTатрибуттары),бұл текInternet Explorer-де ғана жұмыс істейді; ■ бөгет тәртібі, немесе z-индекс (атрибут Z-INDEX); ■ көзге көрінерлігі (атрибут VISIBILITY). Бұл дегеніңіз сіздің бос элменттің орналасқан жерін, көлемін және көзге көрінуін басқара алатыныңызды білдіреді. Timelines панелінің тізімінде жаңа жол пайда болады (4.4-сурет). Ол тиесілі бос элементтің атауы жазылған ашық көк түсті сызық түрінде беріледі. Бұл сызықтың екі жағында да ашық шеңберлер берілген. Бұлар басты нүктелер; әзірше олар екеу: траекторияның басы мен соңы. Бірінші басты нүкте— басы— бірінші кадрда орналасқан; бұл дегеніңіз элементтің анимациясы бірінші кадрдан басталатынын білдіреді. Екінші басты нүкте-траекторияның соңы – он бесінші кадрда орналасқан; ол жерде анимацияланған элемент қозғалыссыз қалады. Сіз басты нүктелерді (бұл жерде олар қою көк түспен берілген), сондай-ақ жолдың өзін (бұл жерде ол толықтай қою көк түске енеді) жай ғана тінтуірдің пернесімен шертіп таңдай аласыз. Сондай-ақ сіз осындай тәсілмен оның кезкелген кадрын белгілеп, анимация жолының кез келген жерін шерте аласыз. Егер сізге анимацияның орналасуы ұнамаса, сіз оны оңай өзгерте аласыз. Сонымен қатар, сіз жолдың ұзындығын өзгерте аласыз, олай болған жағдайда, анимацияның ұзақтығы қажетті позицияға ауыса отырып, басты нүктеге айналады. Қажет емес жолды алып тастау үшін, оны таңдап, [Del] пернесін басу керек немесе мәтіндік мәзірдің Remove Object тетігін немесе ModifyмәзірініңTimelineкіші мәзірінбасу керек. Dreamweaver траекториясы келесі түрде беріледі. Әрбір басты нүкте анимацияланатын элемент көрінетін жағдайдың түсірілімін береді. Басты нүктені таңдай отырып, сіз бос орналасқан элементтің қажетті параметрлерін бересіз (координаттарын, көлемін), ал Dreamweaver оларды есте сақтап, солар арқылы берілген түсірілімді жасайды. Осы түсірілімдердің көмегімен программа өзі басты нүктелер арасында болатын анимацияланатын элменттің барлық аралық жағдайын есептей алады. Сондықтан, қандай да бір күрделі анимацияны жасау үшін қажетті бет элементтерінің тиісті параметрлерін тек анимацияның басты нүктелерінде беру жеткілікті. Тақырып беттің төменгі оң жақ бұрышынан «көрініп», тікелей өз орнына орналасады деп болжаймыз. Оның қозғалыс траекториясы өте қарапайым болғандықтан, оны көрсету үшін екі басты нүкте қажет. Бірінші басты нүктеде тақырып беттің төменгі оң жақ бұрышында беріледі, ал екінші басты нүктеде ол тұруға тиісті жоғары бөлікте тұрады. Бұл нүктелерде сіз тақырыптың параметрлерін беруіңіз керек, нақты айтқанда, көлденең және тік корординаттарды ұсынуыңыз қажет. Тақырып қозғалыс кезінде не көлемін, не көзге көрінушілігін өзгертпейді. Жолдың басында тұрған бірінші басты нүктені тінтуір пернесімен шертіп белгілеңіз. Ары қарай тақырыпты (Header бос элементі) тінтуірмен «қармап», беттің оң жақ бөлігіне орналастырыңыз. Енді екінші басты нүктені белгілеңіз. Бұл жерде ештеңені өзгерту қажет емес, себебі тақырып өз орнында тұр. 4.5- суретте анимацияланатын элементтің дайын траекториясы көрсетілген. Док терезесінде бейнеленген траекторияның жіңішке сұр сызығы жақсы көрінеді. жүктеу/скачать 1,97 Mb. Достарыңызбен бөлісу:
|