Join Jake Ströh for an in-depth discussion in this video Revealing text with clipping, part of Migrating from Flash to Edge Animate.
…Masking in Flash has always involved a number of planned steps to achieve.…Here, I'm going to show you how clipping an edge…has a more streamlined approach to achieve a similar result.…We'll begin by opening clipping_start.an.…What we're looking to achieve here, is revealing Welcome…to Whitefish Bay first from top to bottom, followed by…Lake Michigan in the Winter, being revealed from left…to right, and Klode Park from top to bottom lastly.…To achieve that, we're going to utilize clipping here in Edge Animate.…
To get started, I'm going to select Welcome to Whitefish Bay and…in the Properties Inspector, I'm going to scroll down to where it says Clip.…And currently, clipping is not turned on, and next to that is a toggle switch.…And by activating that, we are turning on the clipping parameters.…Essentially what this allows us to do, is adjust the…width and height of the four sides of this box.…With auto keyframing and auto transition enabled, I'm going to…create a keyframe here at 0 on our main timeline.…
Jake Ströh explains how the web has evolved away from Flash, while pointing out key similarities and differences in Edge Animate that make migrating at times both smooth and challenging. He shows how to re-create a simple Flash banner ad inside of Edge Animate, walking through tasks that should be familiar to Flash developers, like keyframing parameters and working with symbols and nested timelines. Text, audio, and video work differently in Edge Animate, so Jake also spends time on those techniques. Then he'll work through the process of developing an interactive mobile prototype that accepts input from touch screens. When you're done, you should have the tools you need to migrate to Edge Animate and start building web projects that live up to modern standards.
- Understanding the history of Flash and the evolution toward HTML5
- Comparing the interface, keyframing, and asset management
- Re-creating a Flash project in Edge Animate
- Working with web fonts and CSS font styles in Edge Animate
- Working with HTML5 video
- Developing for touch screens
- Converting SWFs to HTML5 with third-party tools