Color glow fade-in transitions using Flash MX
Posted by jerothe in 
When I do research into what is hot in Flash Design, I have always seen one staple for image transitions. When and image would fade in it was almost as if the intensity and brightness of that image would be at it’s max before it changed into the regular image.
I knew tweening, and I knew how to set the Alpha to fade an image in, but for whatever reason, it didn’t seem like a simple fade in was quite the same as I had seen, and I knew it didn’t have the same visual impact.
But accident really I stumbled onto it the other day after having kind of forgot about trying to figure this technique out. I was working with a template from Monstertemplates that one of our clients needed customizing and I saw the effect reproduced. Here is an example of what I am talking about.
This is how you achieve this effect.
1. Open up Flash MX
2. Import a file to the stage. Any image file will do.
3. Click on that image then go Insert > Convert to Symbol. For this example I chose a Movie Clip and gave it a name of “rich transition”.
4. In the timeline, move the play head to frame 10 and press F6 or go up to Insert > Keyframe
5. Move the playhead back to frame 1 and click on the image on the stage.
6. In the properties inspector choose Color > Advanced and click on the “Settings” button.
7. These are what the setting should be to create this effect in the resulting dialog box. Red, Green, Blue and Alpha should all be set to 100%. To the right of these settings there are also the letters R, G, B, A for the categories with the names I mentioned previously. These are basically settings to color the intensity of the each of the colors vs. the full spelled out categories set the opacity of certain colors. This is what your settings should look like.
8. Right click in between frame 1 and 10 on the timeline and choose “Create Motion Tween”.
9. You’re done. You can copy the frames and place them at the end of the first set, right click and choose “Reverse Frames” to get the image to fade back to the starting position.
Either way, this color intense transition is a professional looking technique. You may ask, why can’t I just choose Color > Tint and set the “White” to 100%. You can, the transition just won’t look the same. You won’t see the yellows, reds, and blue intensify somewhere in the middle of the transition like it is a rich gold glow. It really is just a matter of preference.
What is the shortcut command to return to the desktop?
A fast little time saver I learned last week. You have the quick icon that will shortcut to your desktop if you need it. But there is also a keypress combo you can use.
To minimize all programs and return to the desktop press “windows key” + “D”.
Shortcut to bring up Systems properties.
To see all of your system properties without going all the way back to your desktop, right clicking and selecting properties you can access the system properties with a windows shortcut.
Windows Key + Pause | Break – Hit these two keys in conjunction to bring up that screen.
What does .pst stand for, what type of file is that?
A .pst file is a Microsoft Outlook file. It is usually located in your Documents and Settings > User > Microsoft > Outlook in the root. This file contains all of your personal entered information like contacts.
The abbreviation stands for “Personal Information Storage” but instead of making the acronym PIS, Microsoft went with PST instead.
Formatting Ordered lists so they look like an outline in Microsoft Word.
Before I first started building this site I thought that lists were kind of a useless HTML tags <ul> <li>. But as I was reading up all of the different information about CSS and building my own CSS based site, I realized the built in capabilities of lists were very powerful. The main problem I had in the past, the same with header tags s<h1>, is my lack of knowledge in controlling the styling away from the default settings.
So what we are going to do here is show you how to style those elements and then how to do nested.
Also, as a sidebar. Another important design issue to address when making a CSS site, or any website with CSS styling is how you organize your stylesheet. The beauty of a stylesheet is that it is such condense markup that you may have a 8 page file that is only 7K that gets loaded once into the computer’s cache and never loaded again.
That said, 8 pages is a lot of crap to surf through and try to remember, so labeling your stylesheet is a good idea. But I wouldn’t over label however because the whole idea behind CSS is that you are condensing unnecessary code, and by adding comments that are beyond “basic explanations of out of the ordinary elements” are extraneous.
The format I use for smaller sites, (50 pages or less as that is all I have built so far) is to separate all of the block elements specific to the page into one section and then label that section. It’s looks something like this;
/* Start “Photo Diary” Page Selectors */
div.mainContent h3{
font-size:13px;
color:#6C6C6C;
padding:0px;
margin:0px;
text-align:center;
}
div.mainContent h3 span{
color:#3399CC;
font-size:13px;
font-style:normal;
font-weight:bold;
}
div#dashed{
width:186px;
border-bottom:1px #666666 dashed;
margin:0px 0px 0px 4px;
}
Then, when I need to find something, I can do a Ctrl+F in Dreamweaver and search for “Photo Diary” and boom I am in the section I need to be to edit or add addition styles.
Back to styling list selectors.
1) Open up your stylesheet.
2) Find the appropriate section where you are using the list selectors. I am going to use “Home Page” as my section in the example.
3) Type in this code
ul{
list-style-type: square;
font-size:12px;
color:#330033;
padding:0;
margin:0;
}
This code will set the font size of the list, change the color of the text, change the type of list marker in “list-style-type” and then take away the default browser padding and margin for each element so they stack right on top of each other.
(As a sidebar, when using a measurement of “0″, you do not need a size declaration because 0 is the same value no matter what measurement you use, and is just another small way to reduce your code.) See the results;
- First List Item
- Second List Item
- Third List Item
Now, like a propositioned in the title, we can then use this styling knowledge to style selector specific styles for nested elements.
Here is the code you can enter;
ul ul{
list-style-type: disc;
color:#cc0099;
}
ul ul ol{
list-style-type: upper-roman;
}
In the first style I have specified when there is an “unordered list inside an unordered, use a disc” as the list style element. In the second style I have specified an even more specific instance when there is an “ordered list inside an unordered list inside an unordered, use upper-roman numerals”.
Note: Each of the properties will be inherited down in the nesting from the first established instance of the selector. So, your second set of unordered list information will retain the font, color, padding, and margin of the first list unless otherwise set. This is the result;
- First List Item
- Second List Item
- Third List Item
- First List Item
- Second List Item
- Third List Item
- First List Item
- Second List Item
- Third List Item
Without getting too technical, that is a visual example of how to make nested lists. If you look at my code, I haven’t used an external stylesheet and linked it, instead for this example, put the styles inline which is easier to keep my information organized, but is much less portable and in the end defeats the purpose of efficient CSS code.
For more information on ordered and unordered lists, visit W3Schools.org. They list off all of the type of options for styling your lists with the appropriate marker or letter / numeral combinations for your needs. I hope this was helpful.
Figuring out your version of Direct X
I was installing 3d Studio Max (trial)today at work and needed to know what version of Direct X I had on my system because the most recent version of Max required the most recent version of Direct X for video playback, or whatever it really affects in computer modeling.
This is what you do to find out if you have the most recent version of Direct x (9.0);
Step. 1) In Windows, Click Start
Step. 2) Then on the left, click on Run…
Step. 3) Type in “dxdiag” for “Direct X Diagnosis”
Step. 4) Wait. This may connect you to the internet if you have dial up. There will be a display box that will tell you the version.