Author: Dee Dubs

HTML5 vs Flash Animation

Here is my html5fun file

Here is one that I was messin with background colors to dominate the dom.

Here is the css gradients playground

 

 

The code is pretty straightforward. This solution to Flash is pretty lame to me. The Flash worked well in every device except the ipad, but now we have to code multiple file types for each audio or video we would wish to embed.

 

For example: where I would have made one flash movie to use everywhere, and maybe just skipped the I-audience, now I have to encode three html5 compatible files, as well as the flash player fallback. And honestly, the html5 versions just don’t function the same across platforms. We get a slightly different reaction in every browser, when the Flash one would be exactly the same everywhere it was displayed.

 

<video autoplay="autoplay" controls="controls" preload="auto">
<!-- HTML5 source list: -->
<source src="video/movie.mp4" type="video/mp4">
<source src="video/movie.ogv" type="video/ogg">
<source src="video/movie.webm" type="video/webm">
<!-- Fallback to Flash: -->
<object width="720" height="400" type="application/x-shockwave-flash" data="flash-fallback/FlashVideoPlayer.swf">
<param name="movie" value="flash-fallback/FlashVideoPlayer.swf" /> <param name="flashvars" value="file=video/movie.mp4" />
<!-- Fallback image: -->
<img src="videofail.jpg" width="720" height="400" alt="Can't load video." title="No video playback capabilities" />
</object>
</video>

 

Here are screenshots from a demo I created. Its a small animation , with an audio sound effect that should play on page load. In firefox, the audio is non existent, and even the fallback error isn’t working.

In Internet explorer, the audio plays, but there is an ugly control bar, and the animation won’t play when you click it.

Research on Ipad and android devices coming soon.

Flash is the perfect way to create accents and highlight art and animations on your webpages. Lets start by making a logo for the top of my site here. I would like to have some cool looking text, with animated effects, just to add some spark to my page. Thats what I will go for , a “sparking text” type of effect. It needs to be 627X65. The width is the most important part, as the height will be relative. For this purpose, we are going to use text, with an outline, a gradient fill and a drop shadow.

Now we can try recreate a similar text effect using pure html5. Here is a test of Apple’s “Hype”, an HTML 5 authoring program for graphics and animation. Their answer to the “hype” that they feel flash is riding on. HTML is a text markup language. And it does a great job of marking up the text. you can have fonts, and italics. Trying to make this text markup language perform animations and add graphical effects such as drop shadow and opacity is not what it was made for.

Fire up flash. bust out some cool text. add some sparking effects on touch. export it out and put in a page. now lets test the page on several devices including pc, mac and mobile.




Using Ajax loading animations.

There are some techniques for making the “Loading” animation work when you want it.

During your jquery script calls, you used to initiate the loading anim using:

$.mobile.showPageLoadingMsg(“b”, “Attempting login…”);

The docs say that the mobile pageloading is depreciated and to use this:

$.mobile.loading( 'show') ;

Here is how to customize the call to change the theme, what text is displayed, and whether or not the spinning loader graphic is displayed.

$.mobile.loading( 'show', { theme: "b", text: "foo", textonly: true });
Object Param Arguments
theme (string, default: “a”) The theme swatch for the message.
text (string, default: “loading”) The text of the message.
textonly (boolean, default: false) If true, the “spinner” image will be hidden when the message is shown.
textVisible (boolean, default: false) If true, the text value will be used under the spinner.
html (string, default: “”) If this is set to a non empty string value, it will be used to replace the entirety of the loader’s inner html.
Here is my final version of the loader used in my progress reporting application. I created a custom animation using the school’s logo and scripted the loading animation whenever user interaction required a notice that things were going on behind the scenes.
$.mobile.loading( ‘show’, {
text: ‘Accessing Data…’,
textVisible: true,
theme: ‘b’,
html: “<center>Attempting Login…<br/><img src=’themes/images/svcloader_sm.gif’></center>”
});
I love using the “depreciated” center tag because it works so well on EVERY device and browser that exists. This is one of those rare times when CSS isn’t the answer, since I don’t’ want to make a special style sheet that would need to be included in every situation that I call this from.
When my scripts are done with the user interaction, I close the loading animation as such:
$.mobile.loading( ‘hide’ );

Break My Phone

Here is an app inspired by my friends at the college, where the user touches, the screen cracks and makes a crunching sound effect. This needs some finishing touches to be released into the app market. I made this in Flash CS5 during class at college.

Here is an attempt to have “data bugs” come out from the cracks. Just a start of an idea, not even close to done.

Mouse , cursor and touch detection with Flash CS5

Here is my click, touch and cursor movement practice. This contains some good code examples for detecting whether the user has touched or clicked with a mouse, including mouseover hover.There is even code that lets the touch user drag the object, but not the mouse user. I created this code during my Flash CS5 course winter 2011 at skagit valley college.

Here is a touch detection example with animation on press.

Gathering form variables with asp, trim white space from them, replace sql special characters, Removing Harmful Characters from User Input.

Here is a quick way to display the form elements, best for debugging. While this is a very easy way to get all of the elements displayed, they will not be in the order you might expect.

For each x in Request.Form
Response.Write(“<span class=’highlight’>” & x & “</span> = <span class=’myspan’>” & Request.Form(x) & “</span><br />”)
next

This next way first will check if the form has been submitted, and then  preserves the original order of the form elements, and is best for coding the form elements into variables or displaying them

If request.form <> “” Then

for x = 1 to Request.Form.count()
Response.Write(Request.Form.key(x) & ” = “)
Response.Write(Request.Form.item(x) & “<br>”)
next

End If

 

 

What if you are getting errors when trying to use a varaible that was submitted. There is a good chance that there is whitespace before or after the var. In classic asp you can just use the Trim()

myvar=” ddenney@hotmail.com   ” <– those pesky white spaces at the end will mess up the  sendEmail function.

MycleanVar=Trim(myvar)  — MyCleanVar should now pass through the send email function with out any problems..(assuming you have validated the address).

What if the user has entered their data in “quotes”. Suppose Dan “the man” Rodriques wants to register for sports. The quotes around the name could mess up the sql server insert statement.  We just escape the characters with script.

FUNCTION remChars(inString)
tempString = Replace(inString,"""","""""")
tempString = Replace(tempString,"'","''")
remChars = tempString
END FUNCTION

 

Counting Form Submit Variables and using them if they exist.

Now I need to count how many variables received for additional transcripts. They will be passed to me using the following pattern… Other Transcripts1, Other Transcripts2, Other Transcripts3, Other Transcripts4, etc.

After some pondering, I have decided to use a While loop…

amount = 1
While Request.Form("Other Transcripts" & amount) <> "" 
       Response.Write("We have other transcripts (" & amount & "), lets put it into the table." & otherSQL)
       amount = amount + 1
Wend

This will continue to loop through the variables until it finds them empty.

 

 

Removing Harmful Characters from User Input

To protect against vulnerabilities such as script injection and cross-site scripting, user input can be verified and rejected, or an application can simply remove harmful characters and continue processing. This is a summary from the microsoft article

The regular expression, [^A-Za-z0-9_ ], matches any character that is not any of the following:

  • An alphabetic character
  • A number
  • An underscore (_)
  • A space

 

 function RemoveBadCharacters(strTemp) { strTemp = strTemp.replace(/[^A-Za-z0-9_ ]/g,""); return strTemp; }