Поиграем? Анимация персонажа и мини-игра в Adobe Edge Animate.

character

 

 

Примеры баннеров 300×250 с анимацией персонажа:

 

Для подготовки баннера возник вопрос выбора редактора анимации – Adobe Edge Animate или Adobe Animate CC. Победил Edge. Основные преимущества:

  1. Удобное позиционирование и управление опорной точкой объекта. Можно построить скелет персонажа. Screenshot_1Screenshot_28
  2. Простое изменение размера баннера (отключаем Auto-Keyframe Mode и перемещаем объекты, меняем изображения без изменений в координатах и ключевых кадрах) Screenshot_2
  3. Motion path – анимация изменения координат по кривой. Удобная штука для движения объектов по окружности, дуге и тд. (Чтобы переместить анимированые  элементы при выключенном  Auto-Keyframe Mode, все div надо объединить в группу)
  4. Timeline с метками и тригеррамиline

 

 

 

Пример баннера 300×250 с мини-игрой:

 

Как реализовать привязку объекта к определённому месту на баннере:

  1. Подключаем скрипты. ! Обязательно располагаем их в нужном порядке. Скачать скриптыScreenshot_4
    1. 1  Поправки к первому пункту: Сторонние url adwords не поддерживает; jquery-ui весит более 200кб, для этого проекта был собран компактный скрипт весом 90кб Скачать; exitapi.js подключается не в adobe edge, а в опубликованном html между тегами <head></head>
  2. Добавляем объект который будем передвигать в рабочее поле. Дублируем его. (в примере дубликат на красной метке). Дубликат – это место на которое станет наш объект. Теперь надо сделать дубликат прозрачным и спрятать внизу timeline. Screenshot_5
  3. Открываем Open actions на Stage и добавляем код
    sym.$('reward').hide();
    sym.$('resetBtn').hide();
    // make an array of the draggable symbol names
    var fruit = ['build','','','','',''];
    // make an array of the droppable element names
    var baskets = ['build_2','','','','',''];
    // have only the first element be draggable
    
    var Pos = [
    {'x':225,'y':21}
    ];
    
    Pos.sort(function() {return 0.6 - Math.random()});
    // set up the droppable to accept each draggables
    for (i=0;i<fruit.length;i++){	
    	sym.$(fruit[i]).css({"left":Pos[i].x,"top":Pos[i].y,"position":"absolute"})
    	sym.$(fruit[i]).addClass('C'+i);
    	sym.$('.C'+i).draggable({
    	revert: 'invalid'		
    });
    	sym.$(baskets[i]).droppable({
    		accept:'.C'+i,   // use class for accept
    		drop: handleDropEvent
    	});
    
    }
    
    k=0;
    
    function handleDropEvent(event, ui){		
        ui.draggable.draggable( 'disable' );
        $(this).droppable( 'disable' );
        // place draggable where needed. could be left, top
       // ui.draggable.position( { of: $(this), my: 'left', at: 'top' } );
        ui.draggable.position( { of: $(this), my: 'center', at: 'middle' } );
        ui.draggable.draggable( 'option', 'revert', false );
        sym.play("2");
        k++;
        if (k==6){
    		for (i=0; i<fruit.length;i++){
    		sym.getSymbol(fruit[i]).play();
    		}
    		sym.$('reward').show();
        	sym.$('resetBtn').show();
        }
    }
    
    sym.$('resetBtn').click(function(){
    	window.location.reload()
    });

4-ая строка: ‘nbuild’ – это название нашего объекта ( который будем двигать мышью ).

6-ая строка: ‘build_2’ – это название дубликата ( место на которое мы передвигаем объект ).

10-ая строка: задаем место нашего объекта в ролике.

37-ая строка: действие при расположении объекта в нужном месте sym.play(“2”); – начало анимации с метки “2”

 

Примеры баннеров в формате 160×600:

 

Ну и конечно ссылка на игру Legends of Honor. Играем и получаем удовольствие.

Оставьте комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *
Вы можете использовать HTML теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>