JavaScript+CSS+HTML+3dsmax =3d-анимация на сайте для чайниковДавно мечтал объединить такие на первый взгляд не связные вещи, как искусство и наука. В скором будущем здесь на сайте представлю свои первые эксперименты по этому поводу (полным ходом веду разработку). Сейчас же решил начать с простого- объединить JavaScript, CSS, HTML, анимацию персонажей и подвязать все к своему сайту. Мой первый удачный, на мой взгляд, опыт с flash- интерактивной анимацией (конечно же с использованием actionscript) в шапке этого сайта вселили мне некую надежду, что смогу разобраться и с более интересными вещами. Поэтому решил следующую фичу на сайте замутить без использования flash, только стандартными средствами сайтостроения. Итак, вероятно, интересно, что же я задумал? Буду обновлять эту статью новой информацией о своем прогрессе, пока же скажу, что в первый день учил базовые понятия javascript (js)...итак, первый день!

День 1 (Почти что чайник  в JavaScript, не знаю, зачем он мне нужен)

Я так понимаю, это- самая подробная инструкция, дальше более-менее разберусь, будет меньше демагогии, больше дела. Учил базовые понятия javascript (js) и его функции для работы с анимацией. Слишком просто, скажите вы? Ну... нужно с чего-то начинать. Итак, поехали!!! Присоединил js-скрипт к html странице.

Вот html страница (кто вообще не понимает, что это такое, можете просто скопировать этот код в текстовый редактор и сохранить как index.html): 

<html>
<head>
<title>Left Animation</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" />
<script type="text/javascript" src="/javascripts/leftanimation.js"></script>
</head>
<body>
<div>
<script language="javascript"> for(i=1;i<300;i++)document.write("Строка номер "+i+"</br>"); </script>
</div>
<img class="leftAnimation" src="/javascripts/leftanimation/stop/1.png" name="example" id="example1">
</body>
</html>

Тут к html-файлу присоединяем (4 и 5 строки) файлы style/style.css и javascripts/leftanimation.js. Их тоже пишем в блокноте, и сохраняем в соответствующих директориях.  В первом div'е после body без подключения джаваскрипт файла (напрямую из html-страницы) решил сгенерировать некий текст. Можете посмотреть, что получилось. Как вы поняли, нет необходимости подключать никаких js файлов к web-странице, если присутствует код следующего вида:

<code><script language="javascript"> 
/*некий програмный код*/</script> </code>

Далее вставляю в хтмл-документ  картинку старым добрым способом (удостоверьтесь, что такая картинка имеется в соответствующей директории). Правда здесь появились класс и id. Класс нужен для указания, куда именно нужно обращаться в css -файле, id- для обзывания объекта для последующей работы с ним из javascript-файла. Как вы уже, наверное, догадались, картинка и будет главным компонентом для анимации. В ней планирую менять динамически картинку, для имитации движения. Анимационные картинки буду генерить в 3dsmax.

Разобрался с setInterval( object.func , 1000); Разберитесь и вы! Все очень просто и интересно.

Дальше будет....