Join Jake Ströh for an in-depth discussion in this video Working with symbols, part of Migrating from Flash to Edge Animate.
- View Offline
…As mentioned earlier, we have been animating…images as HTML elements, and Edge allows us…to animate any HTML element on the stage…without having to wrap them in the symbols.…So, you might be asking yourself, why symbols then?…And the answer would be, for the same exact…reasons that we've used movie clip symbols in Flash.…To illustrate that, we're going to open up…symbols-begin.an in our Chapter 2, 02_04 folder.…
Our stage size is set to 700 by 400.…I want to change the background color slightly on…the stage to kind of a light gray.…So, I'll do that here.…And next, we're going to import an image.…And inside of our exercise folder, we have an assets folder.…Inside of there, we have rocket.png.…Next, I'm going to drag that on to the stage.…And then, by holding Shift key down, I'll just select…one of these corners here and resize this to preserve…the aspect ratio, and then over here in the Transform…properties, I am just going to rotate this by 90 degrees.…
And next, I'm going to Option-drag two more copies of the rocket.png file.…
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