How to create an image slider / slide show without programming – Part III

evileye

In this video I show how to add buttons and actions to the buttons to control the flow of the slides, how to add labels to the timeline in Edge Animate to be able to refer to those positions when playing actions and more.

In the next videos I will cover how to pause playing when rolling over (the mouse) the presentation, and resume playing when rolling out; how to add left/right arrows to control the flow linearly (back and forth); then, I will cover how to make things easier to manage with symbols that include many objects and their own animation timelines and how to add automatic navigation (make the buttons to be dynamically generated). Finally, we will cover more advanced automation, by generating the slide show form XML or JSON files, so they can be updated without opening the composition.

Check part 1 here
Check part 2 here


How to create an image slider / slide show without programming – Part II

FruitSalad

In Part I of this tutorial, I showed how to add images and text and how to animate them. I also showed how to use web fonts to make the animated text more interesting.

In this tutorial I am going to show how we can loop the animation by adding triggers on the timeline. Check the final result.

In the next video I will cover how to add interactivity to the slider, so the user can navigate from slide to slide manually.

[UPDATE]
Check Part 3 here


How to create a web site slider without programming – Part I

snapshot

I have seen in some forums that people struggle using  jQuery plugins or Flash-based sliders. So, I decided to make a series of video tutorials to show how to make sliders with cool animations and custom user interactivity using a free application. The program is Adobe Edge Animate, which Adobe launched a few days ago and decided to offer it for free. Hence, anyone can download and use it to make sliders, websites and more.

In this video, part I, I show how to add images and text and add nice animations / transitions. In the next one (coming soon) I will show how to add user interaction elements, so the viewer can move forward and backwards.

Edge Animate content works on mobile devices running iOS and Android™ operating systems, as well as on modern desktop browsers.

Let me know if there is something in particular that you would like me to add in a future video.

[UPDATE]
Check part 2 here
Check Part 3 here


UA-4365634-1