This Hexadecimal Color Picker app demonstrates how methods that aren't necessarily immediately intuitive, but perhaps superior, can be applied in Flash to create an end result that while looking the same to the end user is very different for the creator. It teaches how hexadecimal works, and how it has been thoroughly integrated into modern technology. The app is interesting in its methodology and visuals, as well as background, whilst simultaneously being one of the most practical applications of Flash available (it can even be used to help create something else in Flash or Dreamweaver or Photoshop itself!). This app could be altered to change from hexadecimal or RGB or CMYK or even HTML, while it could also be applied to, say, a CSS font picker that allows for selection and combination of ligatures, stylations, variations, and sizes. The app is appealing to the learner who appreciates art because of the artistic aspect and color involved. It is interesting to the mathematician-type learner because is demonstrates the math behind hexadecimal, including place-values, digital interpretation, and simple mathematical functions. Finally, it is interesting to the programmer because of the rather atypical and roundabout but nevertheless effective manner in which it is coded (using the code from the Circuits starter app). All around, this is an informative, creative, and involved application.
The art for this project is not necessarily designed for the sake of good looks, but for practicality. Nevertheless, take for example the color picker/palette in Flash itself, or Microsoft Word, or the systemwide color picker in Mac or PC: they are functional, but at the very least they are aesthetic, are they not? I want my graphics to look smooth and professional, while simple. It will be creating them in Flash if possible, or Illustrator if it will yield better results. Photoshop is not a very good option for the graphics of a color picker. I may recreate elements of Adobe's or Apple's color pickers if they are reasonable in my application. For any color chosen, values will changed and be displayed in text fields. These fields will be labeled clearly and directly for ease of use with the application-- I know that if I'm making something and need a hex color picker, I would hat to have to fiddle around to figure out what I'm looking at! :)
The math to which this application applies includes units of measure and bases (especially base 16 versus base 10 or 2), is a numeral system with a base of 16. It uses sixteen distinct symbols, the symbols 0–9, to represent values zero to nine, and A, B, C, D, E, F (or a through f) to represent values ten to fifteen. Its primary use is as a human-friendly representation of binary coded values that can still be digitally interpreted by a computer in ways base 10 cannot be. Since each hexadecimal digit represents four binary digits (bits)—it is a compact and easily translated shorthand to express values for pixel color, or even fonts/characters. Here is an example of the units of hex being represented in decimal, which is how we learned about it in math on day 2 (or 3?):
"A" ( 9 + 1 = ) 10 in decimal
"B " ( 9 + 2 = ) 11 '' ''
"C" ( 9 + 3 = ) 12 '' ''
...until "F". Then come the numerical values:
"10" (1 x 16) + 0 = 16 in decimal
"11" (1 x 16) + 1 = 17 '' ''
"12" (1 x 16) + 2 = 18 '' ''
...and some examples of combinations: "1D" (1 x 16) + 13 = 29 in decimal; "24" (2 x 16) + 4 = 42 in decimal
Anyhow, that's an explanation and some example of hexadecimal, mathematically.
Basically, the code from the Circuits lab correlates a user-specified distance in pixels in the Flash app to a larger scale unit, like miles, and then correlates the larger scale unit to a value that can by dynamically displayed. An interesting way to turn this concept into a color picker is to calculate hex values from constant pixel values using a formula in code, and dynamically assign this hex value to a text field, and then correlate the hex value to a standard 256 part color key name, like "OrangeRed" (#FF2400) or MediumSeaGreen (#426F42). Along with this the algorithm that determines the hex values can be picked apart and place in separate text fields such that the user can see each place value in the 16 base number and what it represents in decimal, in order to demonstrate the math aspect. Currently, I cannot write out the code itself because I do need assistance from an instructor on how to write such a function, but in terms of determining variables, referencing text fields, and then incorporating these into functions, along with the distance-related codes from the starter app, the code should end up being fairly direct, I think. In all, the programming provides for an unusual, but nonetheless highly effective and informative way to create a practical hexadecimal color picker in Adobe Flash CS4.
The art for this project is not necessarily designed for the sake of good looks, but for practicality. Nevertheless, take for example the color picker/palette in Flash itself, or Microsoft Word, or the systemwide color picker in Mac or PC: they are functional, but at the very least they are aesthetic, are they not? I want my graphics to look smooth and professional, while simple. It will be creating them in Flash if possible, or Illustrator if it will yield better results. Photoshop is not a very good option for the graphics of a color picker. I may recreate elements of Adobe's or Apple's color pickers if they are reasonable in my application. For any color chosen, values will changed and be displayed in text fields. These fields will be labeled clearly and directly for ease of use with the application-- I know that if I'm making something and need a hex color picker, I would hat to have to fiddle around to figure out what I'm looking at! :)
The math to which this application applies includes units of measure and bases (especially base 16 versus base 10 or 2), is a numeral system with a base of 16. It uses sixteen distinct symbols, the symbols 0–9, to represent values zero to nine, and A, B, C, D, E, F (or a through f) to represent values ten to fifteen. Its primary use is as a human-friendly representation of binary coded values that can still be digitally interpreted by a computer in ways base 10 cannot be. Since each hexadecimal digit represents four binary digits (bits)—it is a compact and easily translated shorthand to express values for pixel color, or even fonts/characters. Here is an example of the units of hex being represented in decimal, which is how we learned about it in math on day 2 (or 3?):
"A" ( 9 + 1 = ) 10 in decimal
"B " ( 9 + 2 = ) 11 '' ''
"C" ( 9 + 3 = ) 12 '' ''
...until "F". Then come the numerical values:
"10" (1 x 16) + 0 = 16 in decimal
"11" (1 x 16) + 1 = 17 '' ''
"12" (1 x 16) + 2 = 18 '' ''
...and some examples of combinations: "1D" (1 x 16) + 13 = 29 in decimal; "24" (2 x 16) + 4 = 42 in decimal
Anyhow, that's an explanation and some example of hexadecimal, mathematically.
Basically, the code from the Circuits lab correlates a user-specified distance in pixels in the Flash app to a larger scale unit, like miles, and then correlates the larger scale unit to a value that can by dynamically displayed. An interesting way to turn this concept into a color picker is to calculate hex values from constant pixel values using a formula in code, and dynamically assign this hex value to a text field, and then correlate the hex value to a standard 256 part color key name, like "OrangeRed" (#FF2400) or MediumSeaGreen (#426F42). Along with this the algorithm that determines the hex values can be picked apart and place in separate text fields such that the user can see each place value in the 16 base number and what it represents in decimal, in order to demonstrate the math aspect. Currently, I cannot write out the code itself because I do need assistance from an instructor on how to write such a function, but in terms of determining variables, referencing text fields, and then incorporating these into functions, along with the distance-related codes from the starter app, the code should end up being fairly direct, I think. In all, the programming provides for an unusual, but nonetheless highly effective and informative way to create a practical hexadecimal color picker in Adobe Flash CS4.
No comments:
Post a Comment