Интерактивные HTML5 баннера для Legends of Honor

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

character

 

 

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

 

Для подготовки баннера возник вопрос выбора редактора анимации - 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

 

 

 

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

 

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

  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 и добавляем код
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    
    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&lt;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&lt;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"

 

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

 

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

comments powered by HyperComments