Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Everything that we create inside of Flash Catalyst is going to end up being displayed on a computer screen, either in a web browser or on the desktop if I create an AIR application. It's important to realize that even though you yourself are not writing any computer code with Flash Catalyst, everything that you do inside of the application is converted into code for you. Now when working with code, there are certainly ways to make things more efficient, and specifically, I'm talking about ways to make things playback faster from a performance standpoint inside of a web browser.
For example, let's take a look at this logo here. The Two Trees Olive Oil logo is actually made up of many, many different vector shapes. If I reveal the contents of the Border layer, I'll see many different groups here that make up that logo. I have this Group here, this one, this one, so on and so forth. Now to make things easier for myself as a designer, to work inside of Flash Catalyst, I could certainly take all these elements and group them together. In fact, I'll do that right now. I'll click on the first group over here, I'll hold down the Shift key and click on this Path to select all the elements used to make up that logo.
Then I'll press Ctrl+G or Command+ G to turn that into a single group. However, that Group is still made up of many, many vector objects. Those vector objects are all represented as computer code, and that means that when I'm plying my application back in a web browser, the browser has to go ahead and decipher all of that code. Just to get a better idea of what I mean here, I'm actually going to go over here to where it says Design, and I'm going to toggle to the Code view. Because I have the Group selected on my artboard, it brings me directly to that area here inside of the code.
Now I only see the Group highlighted right here, but all of these elements are inside of the group. These are all the paths and objects that make up that group. In fact, if I come back over here for a moment and I click on this Minus sign to collapse the Group, you can see that Group itself is made up of about 150 lines of code. Now, if that logo is being displayed in many different areas of my application, it means every time that that logo gets displayed, my web browser has to now process 150 lines of code. If I know that logo is being used several times throughout my project, it might be more efficient for me to load that 150 lines of code into my browser once and simply have the browser refer to that code whenever it needs to display that graphic.
Now, I certainly don't want to make any changes to any code, after all as a designer, I don't want to have to see code at all. However, as a designer I can choose to optimize my graphics in order to get better performance on playback of my contents in a browser. Let's see how we do that. I'm going to switch back to Design view and with this group right now selected, you can see that in the HUD, I now have a new option. It's called Optimize Artwork. I can choose a command called Optimize Vector Graphics. In this case, because all of this artwork is vector, choosing this option will create something called an Optimized Graphic in my project.
That means if the code is saved off once in my file, and any time that graphic appears, it simply refers to that separate code. So, I'll choose this option here and I've now successfully converted this object into an Optimized Graphic. You can see that now that appears here in the Properties panel and also in the HUD. Just so that you can appreciate what happened here in the code, if I go back to the Code view now inside of Flash Catalyst, you'll see that I now have single graphic called Graphic1 that takes up just one line of computer code. This way the entire logo gets loaded when my application first appears in my browser and it's already loaded in memory each time the application needs it.
I'll go back to Design view because I have one other thing which I would like to share with you about optimizing graphics. You'll notice there is also another option here called rasterize. There may be times when a vector graphic is really a very complex and made up of many, many different Path objects. In those cases, it may be best simply to rasterize that entire graphic. By the way, when working with rasterized images, there is also an option here called Convert to Linked Image. This way, I would have a smaller SWF file that will download quickly and that will load the image externally.
So while you certainly don't have to be a programmer to use Flash Catalyst, you can definitely benefit by optimizing certain artwork to enhance performance so that your project plays back faster in a web browser.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.