Flash Interfaces Compared with Edge Animate Interfaces
Comparing Flash and Edge Animate interfaces
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.
Up and Running with eDrawings20,885 Views
Documentary Editing with Final Cut Pro X v10.1.x34,402 Views
Building an Online Community57,649 Views
Character Animation: 3ds Max105,008 Views
Commercial Editing Techniques with Final Cut Pro X v10.1.x33,885 Views
Illustrator CC 2013 One-on-One: Fundamentals1,678,359 Views
Edge Animate Essential Training632,647 Views
Illustrator CC 2013 One-on-One: Mastery302,647 Views
Illustrator CC 2013 One-on-One: Advanced392,295 Views
iOS 8 App Development with Swift 1 Essential Training1,024,214 Views