Join Jake Ströh for an in-depth discussion in this video Creating button rollovers and timeline labels, part of Migrating from Flash to Edge Animate.
…Buttons in flash.…Perhaps the easiest thing that we could create when we were first learning…Flash and by design, the button symbol had its own timeline with four states.…Up, over, down, and hit labeled for us.…All we had to do was put various artwork in the four states and…we could accomplish either a two or a three state button with a targetable area.…Previously, we have utilized HTML elements as links or buttons in Edge, but we…haven't generated states for what we would consider a button like we do in Flash.…
We don't have a dedicated symbol in Edge for buttons,…so how do we create a multi-state button in Edge Animate?…First, let's open buttons-in-flash.fla as a visual reference for what…we will recreate in Edge to achieve a similar button effect.…Here in Flash, when I double-click on the Enter button symbol, very familiar, as we…see two layers, one for text and the…other one for the rollover color background state.…What we see here is very familiar.…We have a text layer and we have a…background layer that's generating our background color state changes.…
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