Как сделать презентацию циклической
Обновлено: 08.07.2024
Этот непростой вопрос волновал меня с тех пор, как я на какой-то выставке увидел, как слайд-шоу на большом мониторе перелистывает слайды само собой , и идёт по кругу снова и снова.
За мою практику работы с PowerPoint не так уж много презентаций и слайдов я сделал. Освоил разные мудрости, и даже анимацию. И как-то не было задачи сделать автоматическую трансляцию слайдов .
Обычно ведь как? Спикер щёлкает кликером (презентером) и слайд или элемент на нём меняется . То есть управляется всё вручную .
А автоматическая смена слайдов нужна именно для выставок , конференций, и прочих событий, в случае, если презентация идёт без презентующего.
Так что вещь, всё-таки нужная .
Как же сделать автоматическую смену слайдов после определённого времени ? То есть, слайд показался, потом, через определённое время, следующий слайд или элемент на нём, потом следующий, и так до конца, и снова по кругу , пока не остановим.
Откроем презентацию и начнём колдовать (на примере версии PowerPoint 2016)
1. В основном окне PowerPoint перейдите на закладку " Слайд-шоу ":
Нужно уметь правильно настраивать показ презентации PowerPoint. Если вы создаете презентацию, которая не требует вмешательства пользователя в момент демонстрации, то вам нужно знать, что такое автоматическая смена слайдов и как сделать так, чтобы слайды переключались автоматически.
Шаг 1. Настраиваем время показа слайдов
Перед тем как настроить презентацию так, чтобы ее слайды переключались автоматически, необходимо настроить время показа каждого слайда. Рассмотрим несколько вариантов настройки времени.
Разное время показа отдельных слайдов
Если продолжительность показа слайдов будет различной, то можно вручную настроить время смены каждого слайда. Для этого выделяем первый слайд, на вкладке Переходы в группе Время показа слайдов устанавливаем флажок Смена слайдов после. Указываем время длительности показа первого слайда в секундах.
Здесь и далее нажмите на изображение для его увеличения
Переходим к следующему слайду и устанавливаем для него продолжительность показа в секундах. Такие действия выполняем для оставшихся слайдов.
Одинаковое время показа отдельных слайдов
Если время показа всех слайдов будет одинаковым, то нужно выделить первый слайд, на вкладке Переходы установить флажок Смена слайдов после и указать продолжительность показа слайда. После настройки времени необходимо установить флажок Применить ко всем.
Данный способ можно применить и тогда, когда у большинства слайдов презентации одинаковое время показа, а у нескольких слайдов время отличается. В этом случае после установки одинакового времени нужно будет вручную изменить продолжительность показа тех слайдов, время показа которых отличается.
Настройка времени показа в режиме демонстрации презентации
Если презентация содержит большое количество слайдов, продолжительность показа которых будет отличаться, то вручную устанавливать время смены слайдов неудобно. Или же вы будете выступать с докладом, при этом ваше выступление должно сопровождаться демонстрацией слайдов, которые будут сменять друг друга через разные временные промежутки. В данном случае сложно определить продолжительность показа каждого слайда.
В таких ситуациях можно использовать настройку времени показа слайдов в режиме демонстрации.
На вкладке Показ слайдов нужно выбрать Настройка времени.
Запустится режим демонстрации презентации. В верхнем левом углу появится панель Запись, содержащая два счетчика времени. Первое время — это время демонстрации текущего слайда, второе время — общее время демонстрации презентации.
Например, продолжительность демонстрации первого слайда должна быть равна 4 секундам. Как только на первом счетчике значение станет равным 0:00:04, нужно сменить слайд. Для этого необходимо щелкнуть левой кнопкой мыши по слайду или нажать на клавиатуре стрелку вправо, или на панели Запись нажать на стрелку (перейти к следующему слайду).
При переходе к следующему слайду первый счетчик обнулится, а на втором счетчике продолжится отсчет времени.
Если нужно приостановить запись времени показа слайдов, то можно нажать на кнопку Пауза. Если время показа слайда отсчитано неверно, то можно нажать на кнопку Повторить запись. При этом первый счетчик для данного слайда обнулится, на втором счетчике время тоже уменьшится.
Если время показа одного из слайдов настроено неверно, всегда можно изменить это время на вкладке Переходы — Смена слайдов.
Шаг 2. Настраиваем автоматический режим смены слайдов
После настройки времени смены слайдов переходим на вкладку Показ слайдов. Выбираем Настройка показа слайдов. В диалоговом окне Настройка презентации выбираем Автоматический (полный экран). Можно выбрать слайды, для которых будет выполняться автоматический показ, и настроить параметры показа.
Шамарина Татьяна Николаевна — учитель физики, информатики и ИКТ, МКОУ "СОШ", с. Саволенка Юхновского района Калужской области. Автор и преподаватель дистанционных курсов по основам компьютерной грамотности, офисным программам. Автор статей, видеоуроков и разработок.
Спасибо за Вашу оценку. Если хотите, чтобы Ваше имя
стало известно автору, войдите на сайт как пользователь
и нажмите Спасибо еще раз. Ваше имя появится на этой стрнице.
Благодаря CSS3 мы можем создавать эффекты анимации, не используя JavaScript, что упростит работу многих разработчиков.
Мы не должны злоупотреблять CSS3, потому что старые браузеры не поддерживают все его свойства. В любом случае, все мы видим потенциал CSS3, и в этой статье мы обсудим, как создать зацикленный слайдер изображений, используя только CSS3-анимацию.
Разделы статьи
Чтобы понять процесс от начала и до конца, ниже предоставлено содержание статьи. Обратите внимание на то, что этот эффект будет работать должным образом только в современных браузерах, которые поддерживают используемые свойства CSS3.
- Введение
Описание базовых понятий, связанные с CSS3-переходами и анимацией по ключевым кадрам. - Разметка HTML
Создание HTML-разметки для слайдера изображений. - Стили CSS
Создание таблицы стилей для отображения слайдера. - CSS3-анимация по ключевым кадрам
Добавление анимации к слайдеру. Мы рассмотрим различные процессы, происходящие здесь. - Индикатор выполнения
Добавление индикатора выполнения для нашего слайдера. - Всплывающая подсказка
Добавление всплывающей подсказки, для отображения заголовков. - CSS3-переходы
Выводим подсказку при наведении курсором, используя CSS3-переходы - Пауза и рестарт
Остановка слайдера при наведении курсором. - Демонстрация
Показываем слайдер в действии. - Заключение
Заключительные размышления.
1. Введение
Для использования этого урока необходимо иметь базовое понимание CSS, в частности CSS3-переходов и анимации по ключевым кадрам.
Оперируя этими простыми понятиями, мы увидим, как сделать функциональный слайдер изображений.
Базовые понятия CSS3-переходов
Обычно, когда вы изменяете значение CSS, изменения отображаются статично. Теперь, благодаря свойству перехода, мы можем с легкостью производить изменения от одного состояния к другому.
Мы можем использовать четыре свойства перехода:
transition-property
Определяет имя (имена) свойств CSS, к которым должны быть применены переходы.
transition-duration
Определяет время, за которое должен произойти переход.
transition-timing-function
Определяет, как вычислены промежуточные значения перехода.
transition-delay
Определяет, когда переход запускается.
В настоящее время переходы CSS3 поддерживаются в Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ и IE 10. Поскольку технология все еще относительно новая, то необходимы префиксы для браузеров. Синтаксис одинаков для всех браузеров за исключением добавлениея необходимых префиксов. Мы опустим их в этой статье, но не забудем включить префиксы в код.
Давайте посмотрим, как применить простой переход к ссылке:
Присваивая анимацию элементу, вы можете также использовать сокращеную форму:
Базовые понятия CSS3-анимации
CSS-анимация позволяет нам создавать анимацию без JavaScript при помощи набора ключевых кадров.
В отличие от CSS-переходов, анимация по ключевым кадрам в настоящее время поддерживается только в WebKit-браузерах, Firefox, а также в скором времени и в IE 10. Неподдерживаемые браузеры просто проигнорируют код анимации.
У свойства анимации есть восемь подсвойств:
animation-delay
Определяет, когда анимация запускается.
animation-direction
Определяет, должна ли анимация играть в обратном направлении в чередующихся циклах.
animation-duration
Определяет отрезок времени, который анимация занимает, чтобы завершить один цикл.
animation-iteration-count
Определяет количество циклов анимации перед остановкой.
animation-name
Определяет имя правила в @keyframes.
animation-play-state
Определяет, проигрывается ли анимация или приостановлена.
animation-fill-mode
Определяет, как CSS-анимация должна применить стили к своей цели до и после выполнения.
Давайте посмотрим, как применить простую анимацию к блоку:
Мы можем использовать сокращенную запись, чтобы задать сразу все свойства анимации:
Ключевые кадры
Каждый ключевой кадр описывает, как анимированный элемент должен вести себя в данной временной точке анимации. Ключевые кадры принимают процентные значения, чтобы определить время: 0% — запуск анимации, в то время как 100% — конец. Вы можете дополнительно добавить промежуточные кадры для анимаций.
У W3C есть много полезной и подробной информации про “CSS3-анимацию”
Базовая структура нашего слайдера
Теперь, когда мы знаем, как функционируют переходы и анимация, давайте посмотрим, как создать наш слайдер, используя только CSS3. Этот эскиз показывает, как анимация должна работать:
Как вы видите, слайдер будет контейнером, в котором будут отображаться изображения.
Анимация очень проста: изображение следует по заданному направлению, изменяя свойства " top ", " z-index " и " opacity ".
Давайте перейдем прямо к HTML-разметке, чтобы создать слайдер.
2. HTML-разметка
Разметка HTML очень проста. Она четко организована и благоприятна для SEO. Давайте сначала посмотрим полный код, а затем подробно выясним, как все работает.
div
Это основной контейнер слайдера. У него нет определенной функции, но он нам нужен, чтобы приостановить анимацию.
div
Мы будем использовать этот блок, чтобы скрыть всё, что происходит за пределами слайдера. В дополнение к этому, маска позволяет нам отображать содержание слайдера.
li
У каждого элемента списка есть ID и класс. ID выводит на экран подсказку, а класс привязан к анимации, которая должна произойти.
div
Этот блок выводит на экран заголовок изображения. Можете изменить его в зависимости от потребностей, например, делая его кликабельным или добавляя краткое описание.
div
Этот блок содержит функцию, которая показывает прогресс выполнения анимации.
Теперь пришло время к формированию CSS-файла.
3. Стили CSS
Давайте создадим базовую структуру слайдера. У него будет тот же размер, что у изображения. Свойство границы будет полезно для создания рамки вокруг изображения.
Класс " mask " скроет все элементы, которые расположены за пределами слайдера. Его высота должна быть равной высоте слайдера.
Наконец, чтобы отсортировать список изображений, будем использовать " position: absolute " и " top: -325px " так, чтобы все изображения были расположены за пределами слайдера.
Этими немногими строками кода, мы сделали разметку слайдера. Теперь мы просто должны добавить анимацию.
4. CSS3-анимация по ключевым кадрам
Прежде, чем мы начнем с анимации, мы должны определить некоторые параметры, чтобы получить правильное представление анимации.
Как мы знаем, полная продолжительность анимации составит 25 секунд, но мы должны знать, сколько будет ключевых кадров в 1 секунде.
Давайте решим ряд операций, который даст нам точное число ключевых кадров и полную продолжительность анимации. Вот вычисления:
Определяем общее количество изображений, в слайдере: 5;
Определяем продолжительность анимации для каждого изображения: 5 секунд;
Определяем полную продолжительность анимации, умножая общее количество изображений на продолжительность каждого: 5 изображений × 5 секунд = 25 секунд;
Вычисляем, сколько ключевых кадров (процентов) будет в одной секунде.
Делим общее количество ключевых кадров на полную продолжительность анимации: 100%/25 = 4%,
В одной секунде 4 ключевых кадров, или 1 секунда равна 4% от анимации.
Со всей этой математикой мы можем теперь применить CSS-анимацию к слайдеру. Мы можем поместить анимацию в бесконечный цикл, т.к. для каждого изображения будет задана отдельная анимация, не зависящая от остальных изображений.
Как только свойства анимации были присвоены, мы должны использовать ключевые кадры, чтобы привести анимацию в движение.
Следуя этому принципу, мы можем соединить все анимации друг с другом, даже если они независимы друг от друга. Это и даст нам бесконечный цикл.
Я добавил свойства " opacity " и " z-index ", чтобы сделать переход от одного изображения к следующему более привлекательным.
Как видите в коде, у первой анимации больше ключевых кадров, чем у остальных. Причина этого состоит в том, что, когда слайдер запущен, первое изображение освобождает место для второго, но когда последнее изображение закончит свою анимацию, у первого изображения должны быть дополнительные ключевые кадры, чтобы не создавать прерываний между циклами анимации.
Вот весь код для анимаций:
Создав анимацию, мы должны добавить индикатор выполнения, чтобы вывести на экран продолжительность каждой анимации.
5. Индикатор выполнения
Процесс анимации индикатора выполнения совпадает с тем, что был для слайдера. Создаем сам индикатор выполнения:
6. Всплывающая подсказка
Слайдер более или менее завершен. Давайте добавим несколько деталей, чтобы сделать его более функциональным. Мы вставим всплывающие подсказки для заголовков изображений, которые будут видимы при наведении курсором.
Стили для подсказок:
Здесь мы сделали видимыми только заголовки изображений, но вы можете сделать так же для любого текста, ссылок и всего, чего захотите.
7. CSS3-переходы
8. Пауза и рестарт
Чтобы позволить пользователям остановить слайдер, для просмотра содержиого, мы должны останавливать анимацию, при наведении курсором. Также мы должны будем остановить анимацию индикатора выполнения.
9. Демонстрация
Наконец, мы дошли до конца урока. Слайдер теперь готов на 100%!
Посмотрите демонстрацию слайдера (Альтернативный источник). Она работает в Firefox 5+, Safari 4+ и Google Chrome, а также iPhone и iPad. Можете также загрузить архив (Альтернативный источник).
Спасибо Massimo Righi за его изображения.
10. Заключение
Эффект внушителен, но по общему признанию, этот слайдер не очень универсален. Например, чтобы добавить больше изображений, необходимо отредактировать все ключевые кадры. У CSS3 есть большой потенциал, но у него действительно есть пределы, и иногда JavaScript более предпочтителен, в зависимости от целевой аудитории.
У этого слайдера есть некоторые интересные функции, такие как пауза (при наведении) и уникальные ссылки для изображений, которые позволяют пользователям взаимодействовать со слайдером. Если необходима полная поддержка всеми браузерами, то использование CSS3 не возможно, таким образом, рекомендуется JavaScript. К сожалению, у CSS3-анимации есть много ограничений. На данный момент, из-за нехватки гибкости, мы не имеем возможности широкого использования. Надеюсь, эта статья будет стимулировать вас к дальнейшему изучению CSS3.
Не стесняйтесь делиться мыслями в комментариях.
Учащиеся получают карточку с подробными рекомендациями к выполнению заданий.
1. Запустите программу PowerPoint. Создайте новую презентацию, содержащий пустой слайд.
2. Выберите фон для слайда. Выполните команду [ Формат Фон Способы заливки Вкладка Рисунок Рисунок; (выберите , нажмите Ок Применить ко всем).
3. С помощью инструментов панели рисования изобразите три сердечка, различных по форме и с различными цветовыми оттенками заливки.
4. С помощью инструмента WprdArt поместите на слайде слово Поздравляю! Первый слайд будет выглядеть примерно таким образом:
5. Скопируйте этот слайд и сделайте еще 7 его копий. Всего у вас должно получиться 8 слайдов.
6. Внесите изменения на каждом слайде, измените форму, оттенок цвета заливки и положение каждого сердечка, так, чтобы сердечки, мерцая, последовательно опускались вниз.
8. Запустите презентацию .
1. Запустите программу PowerPoint. Создайте новую презентацию, содержащий пустой слайд.
3. Поместите на слайде изображение ёлки;
4. С помощью инструментов панели рисования изобразите на ёлке разноцветные шарики;
5. Скопируйте этот слайд и сделайте еще 3 его копии. Всего у вас должно получиться 4 слайда.
6. Внесите изменения на каждом слайде, измените оттенок цвета заливки каждого шарика;
8. Запустите презентацию .
1. Запустите программу PowerPoint. Создайте новую презентацию, содержащий пустой слайд.
2. Выберите фон для слайда. Выполните команду [ Формат Фон Способы заливки Вкладка Рисунок Рисунок; (выберите , нажмите Ок Применить ко всем).
3. Поместите на слайд изображение снежинки. Щелкнув по снежинке правой кнопкой мыши, выберите команду Формат рисунка Перекрасить, измените цвет снежинки на более яркий.
4. Копируя, изобразите на слайде несколько снежинок;
5. Скопируйте этот слайд и сделайте еще 5 или 6 его копий. Всего у вас должно получиться 7 — 8 слайдов;
6. Внесите изменения на каждом слайде, измените положение и количество снежинок, так чтобы они имитировали снегопад;
8. Запустите презентацию .
Добавляйте авторские материалы и получите призы от Инфоурок
Еженедельный призовой фонд 100 000 Р
для выполнения в программе
(для 10-11 классов)
преподаватель математики и информатики
Попова Елена Игоревна
Познакомить с примерами презентаций, замкнутых в цикл.
Научить организовывать непрерывную циклическую демонстрацию презентации.
Научить выполнять настройку автоматической смены слайдов.
Повторить и закрепить выполнение вставки, копирования, группировки, заливки, поворота автофигур, используя средства рисования программы PowerPoint .
Развивать внимания, логическое мышление.
Практическая работа для выполнения в программе
Ход выполнения работы:
Настройте формат фона первого слайда.
Вставьте фигуру кольцо.
(вкладка Вставка, группа Иллюстрации — Фигуры – Основные фигуры — Кольцо).
Выполняя вставку кольца, во время растягивания фигуры удерживайте нажатой клавишу Shift , чтобы значения высоты и ширины у фигуры были одинаковыми.
Размер фигуры можно изменить, перетаскивая угловой маркер голубого цвета. В этом случае, чтобы кольцо не стало овальным, снова удерживайте нажатой клавишу Shift .
Перетаскивание жёлтого ромбика (опорной точки) повлияет на толщину фигуры.
Выполните заливку фигуры
(раздел Средства рисования, вкладка Формат, группа Стили фигур – Заливка фигуры) .
Вставьте фигуру овал.
(вкладка Вставка, группа Иллюстрации — Фигуры – Основные фигуры — Овал).
Выполняя вставку овала, во время растягивания фигуры удерживайте нажатой клавишу Shift , чтобы получился круг. Выполните заливку фигуры.
Скопируйте и вставьте ещё 11 таких же кружков. Расположите их на кольце так же, как расположены основные деления на циферблате часов. Выполните заливку кружков разными цветами.
Кольцо и 12 кружков сгруппируйте, чтобы получить единый объект.
Для этого нажмите и удерживайте клавишу Shift , в это же время выделите с помощью мыши обе фигуры и выберите на вкладке Средства рисования — Формат – Группировать – Группировать.
В дальнейшем эту конструкцию из фигур мы будем поворачивать.
Создайте треугольную опору. Для этого вставьте фигуру равнобедренный треугольник
(вкладка Вставка, группа Иллюстрации — Фигуры – Основные фигуры — Равнобедренный треугольник).
Измените порядок размещения элемента равнобедренный треугольник относительно других элементов рисунка на слайде
(раздел Средства рисования, вкладка Формат, группа Упорядочить – На задний план). Выполните заливку фигуры.
Сформируйте объект — качели, используя вставку фигур: линия, арка.
Измените толщину линий (раздел Средства рисования, вкладка Формат, группа Стили фигур – Контур фигуры – Толщина – 4,5 пт) .
Настройте цвета фигур и их контуров (раздел Средства рисования, вкладка Формат, группа Стили фигур – Контур фигуры – Цвета темы) . Расположите линии и арку встык.
Создайте копии объекта качели.
Вставьте картинки с персонажами.
Например, можно использовать картинки веб-коллекции Microsoft.
Сгруппируйте каждого персонажа с его качелями.
Работа по созданию первого слайда завершена.
Чтобы создать 2-ой слайд, выполните дублирование 1-го слайда (вкладка Главная, группа Слайды – Создать слайд – Дублировать выделенные слайды).
Затем поверните фигуру кольцо примерно на 30 по часовой стрелке (цветные кружки поменяют своё положение), для этого используйте маркер поворота зеленого цвета.
Теперь переместите качели с персонажами в новое положение и немного поверните.
Действуя таким образом (как в п.15), создайте ещё 10 слайдов. Всего получится 12 слайдов.
Каждый раз, получив копию последнего созданного слайда, снова поворачивайте кольцо и изменяйте положение качелей.
Запустите демонстрацию презентации.
· Познакомить с примерами презентаций, замкнутых в цикл.
· Научить организовывать непрерывную циклическую демонстрацию презентации.
· Научить выполнять настройку автоматической смены слайдов.
· Повторить и закрепить выполнение вставки, копирования, группировки, заливки, поворота автофигур, используя средства рисования программы PowerPoint .
· Развивать внимания, логическое мышление.
- Попова Елена Игоревна
- Написать
- 6763
- 25.06.2015
Номер материала: 575410
Не нашли то что искали?
Все материалы, размещенные на сайте, созданы авторами сайта либо размещены пользователями сайта и представлены на сайте исключительно для ознакомления. Авторские права на материалы принадлежат их законным авторам. Частичное или полное копирование материалов сайта без письменного разрешения администрации сайта запрещено! Мнение редакции может не совпадать с точкой зрения авторов.
Ответственность за разрешение любых спорных моментов, касающихся самих материалов и их содержания, берут на себя пользователи, разместившие материал на сайте. Однако редакция сайта готова оказать всяческую поддержку в решении любых вопросов связанных с работой и содержанием сайта. Если Вы заметили, что на данном сайте незаконно используются материалы, сообщите об этом администрации сайта через форму обратной связи.
Читайте также: