Join Jake Ströh for an in-depth discussion in this video Comparing Flash and Edge Animate interfaces, part of Migrating from Flash to Edge Animate.
In regards to the user interface, we're going to look at some of the similarities and differences between Flash and Edge Animate. Adobe has put much thought into creating an interface, and workflow, that is as congruent and as friendly as possible between all of their motion graphic products. Launch Edge Animate in Flash CC, and I'll walk you through them now. In order to get the work space as similar as possible between Flash and Edge Animate, in Flash CC, I am beginning from the designer workflow preset, and I'm going to make one alteration.
And that is, I'm going to grab the timeline and drag it down to the bottom, like so. Over in Edge Animate, upon first launch, you'll notice that the timeline is also on the bottom, and it's very similar in its layout, with the exception of one thing, and that's the lessons panel here in the right, that has some very basic videos about Edge Animate and its features. I'm going to close that now. When we take a look between the two, they are relatively similar. Next, I'd like to open up two documents. In flash, in our lesson files, in the 02_01 folder.
I am going to open up Interface.fla. And in Edge Animate, I'm going to open Interface.AN. I'm going to resize this slightly. The file that we are opening in Edge Animate is Interface.AN, which is essentially an authoring file. What we are effecting in the end here is, and when you look at the top, is Interface.HTML. You can think of this similarly between a .fla file, which is the flash authoring file, and the published file, which is .swf or Shockwave Flash file.
So, you can look at this correlation, and its similarities and its differences. Here in Edge Animate, you'll notice that we have a properties inspector off to the left side, which is similar to Flash. It is contextual, so if I select the stage area, the options that I have to affect the stage show up, versus selecting an image. Now, I have options for effecting the image on the stage. Over in flash, something that we've always been very familiar with is the library. And as you can currently see, I have a movie clip, and I have an image.
And clearly, this is just the image on the stage, and this is the image nested inside of the mam_mcmovie clip. In edge animate, I have an image on the stage. What's different, is that this is actually a div element in HTML, with a background image inside of it. And a symbol in Edge Animate is also a div element on the stage, as well, although it has different features to it, much like symbols do in Flash. Below, we have our timeline. And, like most time-based media authoring tools such as Flash, it is very similar in that it has layers, and a play head, and all of the like.
And of course key frames, which we will be effecting later on in this course. In the top left corner, we have our toolbar. We have our selector tool. We have our transform tool. We also have a clipping tool, which is going to produce an effect that's very similar to masking in Flash. And we'll talk more about that later. Then, we have our basic drawing tools, and our text tool. When I grab, say, the rectangle tool, as a basic drawing tool, there is a very distinct difference, when I draw on the stage, for example.
Unlike Flash, that creates native vector artwork within the program. Again, what we are creating here is a div element, with a background color in it. So in working with Edge over Flash, you need to think HTML and CSS when creating artwork with these tools. The Edge Animate interface clearly has similarities to Flash's interface. It is helpful to have an understanding of HTML and CSS terminology, in order to fully understand the references made between both products.
For those of you who are new to HTML and CSS, it would be helpful to check out Up and Running with HTML, by James Williamson, here at lynda.com. Either way, I will explain the what and how of what we are effecting when working within Edge Animate, throughout this course.
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