Join Jake Ströh for an in-depth discussion in this video Using drag to control timelines, part of Hype Quick Start.
An exciting new feature in Hype 2.0 is the ability to drag, or slide,…your cursor or finger across the element, and having an affect on another timeline.…Let's begin by opening drag-start.…And what you'll notice here, is that I've created a timeline called…Chicago, that flies the jet from the Los Angeles to Chicago pushpin.…Let's go back to the main timeline and insert a rounded rectangle element…at the top of our map.…Next I'll go to the element inspector and I'll sample…a color from the map and make that my fill style.…
Next I'll add a black border.…And increase it by 3 or 4 pixels.…Now with the rounded rectangle element selected, let's go…to the actions inspector and mouse down to undrag.…Click the plus button and apply an action of control timeline…on the horizontal axis.…But the timeline that we want to control is Chicago.…Let's preview this in a browser.…We can drag the mouse across this…and affect the timeline, both forwards and backwards.…Lastly, let's insert text as a call to action.…
I'll double-click on this, go to the Text Inspector, make…
- Creating your first Hype animation
- Understanding the main timeline
- Animating with keyframes
- Modifying keyframes and retiming
- Working with the Capo tool
- Reusing animations
- Masking and cropping
- Animating CSS filters
- Creating buttons and working with mouse actions
- Chaining actions together
- Developing a slideshow
- Creating and managing scenes
- Exporting and embedding Hype documents
Skill Level Beginner
1. Getting Started
2. Timeline Animation
3. Managing Timelines and Interactivity
4. Working with Scenes
5. Exporting Your Project
Adding your own HTML1m 45s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.