02Geek HTML5 and JavaScript, TypeScript, React, Flash, ActionScript online School
Previous VideoPrevious Video

The Properties Panel

<p>In our next video we take a deeper look into the Flash properties panel: if you have your properties panel open, click anything on the stage and see its properties. With nothing clicked/selected, you'll see general properties for the application such as &quot;Publish&quot; -- where &quot;Class&quot; is (more on that later,) or &quot;Properties&quot; where you can change FPS (frames per second,) size, or background color </p> <p> In this video, you'll learn some of the functions, controls, and buttons available on your property panel: where properties like 'size' are and when to use them, a complete breakdown of the Document properties, and using the document class. Join us, as we explore what pixels are!</p> <h2>Video Transcript&nbsp;</h2> <div class="expandable"><pre> We created some objects, we added them to the stage. I'm just going to delete them quickly and add a new object onto the stage, not that I really have to, just for fun. Click on "v", I just have to make sure that I'm back in my arrow mode. Now, the next thing I want to do is talk about the Flash <strong><a href="http://02geek.com/courses/video/6/47/The-Properties-Panel.html">properties panel</a></strong> and as we said before, there's a lot of ways to get to your properties panel. Most likely if you can't find it on your stage, you would just go to window, search for properties and open it up. But I know where my properties is because I set it up to be minimized here on the side. So I'm just going to click on it, and clicking on my properties will reveal the properties: basically, what the properties are, and the most easy way to explain it is that the properties panel is kind of a dynamic panel and that's a reason why I really needed to have something on the stage. What does that mean? I'm going to change my panel, I'm going to grab properties and throw it outside of that because I don't want it to toggle on and off every second right now, even though usually I do. So now I have my properties panel out. Let's see what happens when you select something that's on the stage. As soon as I click on something on the stage, you'll see that it's selected as it'll have like this mesh on it showing me that it's selected. Now that it's selected, our properties panel changes. That is true with anything in Flash. If I had other visual items on the stage, you'll see that every time I have a visual item on the stage again I'm going to click on "V", If I select it, you'll see that we have a shape and it gives us details about the shape, which we could then modify if we wanted to. We could go to our object, we could change its color. This is kind of an overview that says, okay: what is the Flash properties panel? Properties gives me information about my currently selected element, whatever that element is. If I select nothing, in other words I'm selecting the stage. When I select the stage then Flash will generate the properties panel from the properties of the stage, which is kind of a mixture between our publish settings and our document settings. Before we dig into it, let me just highlight our most important thing, our focus, the document class, which is right here. That's exactly what we're going to work with to actually configure our application to work with an external class. But, until we get to that point where we are in the decision path of loading an external asset and working with an external asset, let's just see an overview of some of the properties that are related globally to our application. As we said previously when we were talking about the timeline, I mean that Flash re-renders the application and the visual things in the application in a certain frame rate and currently we're set to 24 frames a second. which we could change and we can change them in our frame rate as well. It doesn't really matter what you see in your properties because depending on your flash version you're going to see different things. Basically, when you have nothing selected, you're in editing mode, enabling you to edit things that are related to your publishing, and things that are related to properties that are global to your application. If you can't get to them through your properties, we are going to see how to get to them in a second. So I'm not going to make any edits here. We're going to see how we can edit directly from our properties panel, and how we edit from our publish settings as well. In our publish settings, we can see that we're running Flash 10, but we could have run Flash 9 as well. We're running in ActionScript 3.0, which is exactly the version of Flash we want to run, and you can see that we can't really tinker with that from our publish settings; it's just giving us that information, and here we would put our class path. Now in our properties we said we could see our frame rates, which we could change manually right here, or go into our properties panel, well overlay you probably would call it. We could change the size of our application which we can't manually do right here; we could go into our properties overlay as well. Or, we can change our background color if we wanted to. Now, an interesting new addition I guess, I haven't seen it before, is the swf history which I don't believe existed in previous versions. It's just here to show you that Flash evolves and changes and it really isn't critical for our mission, but it's really great to know the properties panel and seeing all these different things that are related to items, and it's the best way to explore and find things that are out of our properties. Now before we wrap our discussion about properties, let's touch back onto a very big portion of our properties, how do we edit our properties? We could obviously click on the edit button right here to get into our document properties, but if we don't know how to get here, or we couldn't find it (we were working in a different version of Flash,) again we could always go through our menus. In our menu, this time around it would be in modify>document, which modify>document would open up our documents settings. So we could either go through modify>document, or we could just click on the edit button and that would enable us to change the dimensions of our applications. Or, let's say we want to change it to be a hundred pixels and the height we want to remain the same and if we click ok, we're going to see that our application size has now changed. So one thing is if we look at our application we don't really see it, we can't really see our bounding anymore. Why is that??... d our stage background-color is the same name of the color of our stage, so we can't even see our stage. Let's set it back to being white so you can actually see it. Excellent, so now we can see that it actually did grow smaller, so let me just put our content again in our view. Let's go back into our edit. In our edit we probably want to go back to 550. Now I would recommend, never really change your ruler unit. We're working in an application and it's going to be served on an application, and applications don't really work on any other measurement besides pixels. It's here really just for print, I think, well to be honest, I never really changed it, and I would love to hear why would anyone change it. You could also see that right now we're set to 550 pixels but we could have set it to not work with pixels, but why would we set it to work with anything but pixels, when we're working inside of a program that acts on pixels? Pixels, size depends on the browser, or rather depends on the resolution you're in, and the computer you're on, and that's a great way to work because when you're working on an application, there's no such thing as an application that's ten inches or five inches, because it really just depends on your monitor, how big it is, what your resolution is, and so on. So it's really not relevant, and in the world of programming where you know your resolution is a certain amount of pixels, it makes it much easier to work because then you know you're working in the same type of system, which is pixels, which is basically all the world of web, and web applications really only work with pixels. So that's all I have to say right now about pixels, and when we go on deeper into working with visual items, we'll revisit this concept, but let's just keep it working with pixels. We could change our frame rate, but for our sake, our samples, it really doesn't matter, we wouldn't want to change it because 24 is good for us. We could change our background, which you don't really need to, but we could if we wanted to. We could set our default to be whatever changes we make so we could just set it and change our default to be whatever we want it to be, so if we want our background to be a different color, we could set that to be the default. But we're good with the default settings that Flash has. </pre> </div>

Developer Basics Overview

Pro or new, this course is for you. Our custom exams speed learning by filtering exams: zero to geek in no time! Always wanted to learn Flash? Take this free thorough 02geek tutorial, join the fun.

03:19

Starting Point Overview

In this overview we talk about what you get out of the next hour of this course: Know the Flash Environment, Files & Publishing, Output & Troubleshooting, OOP vs. Timeline, Sample files and resources.

03:08

File Types

Learn to code the right way, beginning with the different file types that are important to know about Flash: exactly what .as and .swf files are.

12:44

Where Is It?

The difference between CS5 and Cs3 layouts: Cs4 and Cs5 as well. . This Flash tutorial is the perfect starting point for those of you that have never used Flash before.

09:52

Workspace

Looking at our Cs5 workspace working area. Also, Cs4 and Cs3: how to use Flash As3 so we're on the same page.

06:43

Runtime vs. Compiler Errors

What is the difference between runtime and compiler errors? What are runtime errors and when do they happen? What are compile time errors?

03:39

Overall Things To Know

What are the things needed to know about Flash? Flash is a time-based programming language, which means it compiles, (unlike Javascript). Educate yourself with the basics of coding and learn how to bu

07:36

The Properties Panel

In this session we meet the properties panel and see how it's dynamic and flexible. By the end of this session you will know all you need to know to roll in it.

09:22

Publish Settings

The Flash Publish settings in action. In this session we get to learn the basics of the publish settings and how to work with it.

08:47

Split Paths

Hint Hint we want you to pick OOP. in this intro we will explain why its important to go the transition into OOP way of coding.

03:32

Split Paths : OOP

In this video, we take a step further into our object orientated programming world.

07:31

Split Paths : Timeline Coding

In this title we outline the options you have as a developer and help you understand why it would be a good idea to move to OOP

03:15

How To Use Samples

We walk through the source files of our Flash ActionScript project

01:12

Building It Up From Scratch

In this video we redo our work and build together a class and connect it to our flash interface.

05:09