All Flash Tutorial Site Phase #1 finished!

BillyBoy wrote on 11/15/2004, 2:03 PM
Phase One of my new all Flash Vegas Tutorial site is now finished.

It has been tested with late versions of Microsoft's Explorer, Netscape's Firefox and Opera browsers at 1280 x 1024 and 1024 x 768 resolutions.

Most of the previous tutorials from the old site have been completely rewritten and expanded and include many newer more detailed graphics. There are several embedded mini-videos, more to come later, and the Glossary has been finished. The tiny oval dots under the Glossary main button closes it (if it gets in the way) and expands it if you have trouble reading the text. A mute button has been added. Click the oval dots, not the text to activate.

I'll continue with phase # 2, but not likely anything new will will be added until after the holidays.

Those wishing to contribute and have their tutorials, notes, tricks added to the site and coverted to Flash format, contact me via email for details.


JohnnyRoy wrote on 11/15/2004, 2:51 PM
It looks like you’ve been very busy and I like the overall layout but I’m not getting any text with the tutorials. The pictures show on the right side and the cursor becomes an I-beam when I mouse over the left side of the screen but there is no text there explaining the tutorial. I’m using Win XP Home with IE 6.

BillyBoy wrote on 11/15/2004, 3:06 PM
That's odd. When you click on any of the top of the screen tutorial buttons do you see icon slide in, then a brief description below if you do a mouse over?

Example Clicking on Setup you should see two thumbnails near the top side in, a color bar generator and a color bar chart. Clicking on the first thumbnail should play a few musical notes, then the first page of white text loads on a dark gray patterned background, there are seven page buttons, and two large images on the right.

How much of above can you see?

The only thing I can think off preventing the text from loading is your browser isn't loading the linked CSS style sheet.

You have Microsoft's Service Pack Two installed?

The one thing I just noticed is for some reason Flash displays the text spaced properly when viewed locally, but once served off a web server in runs the paraphraphs together not showing a blank space between paragraphs as it should and does, when viewed locally. So I'll need to add a bunch of
statements to make it more readable, but why none of the text isn't appearing is strange.
nickle wrote on 11/15/2004, 3:21 PM
Oh oh, I heard the into to Bridge over Troubled Water on your eagle video.
This could start another copywrite thread.
John_Cline wrote on 11/15/2004, 5:17 PM
It is a vast improvement over the beta version from a couple of months ago. Everything seems to work well on my machine.

rextilleon wrote on 11/15/2004, 6:59 PM
Very nice job!
Jimmy_W wrote on 11/16/2004, 5:30 AM
Works well here! Great job!

argyll wrote on 11/16/2004, 6:09 AM
Wonderful site. Your tutorials are great.
Grazie wrote on 11/16/2004, 6:45 AM
Nice One BB!

I needed this . . I'm doing my stuff for my accountant . . needed a break and see somebody's Creativity! Thanks!

. .. oh well, back to EXCEL!

. . duah . .. Grazie
JohnnyRoy wrote on 11/16/2004, 7:03 AM

It works fine on my laptop. It’s just my desktop that is having a problem. I’m going to upgrade my graphics drivers because of a problem I’m having with some other software so we’ll see what that does.

I don’t have SP2 but neither does my laptop and that works fine. I can see the icons on top, I can see the text under the icons explaining what each is (so I do see some text) I just don’t see the tutorial text on the left once the tutorial is selected.

Let me upgrade my display drivers and see if that helps. I also might have different patch levels of IE on my desktop and laptop. It seems to be unique to me so don’t sweat it. The site looks great!

r56 wrote on 11/16/2004, 7:15 AM
It looks great and everything works fine for me.
Using Windows XP Pro SP2 and Firefox 1.0
Nice work BB!
DavidMcKnight wrote on 11/16/2004, 12:03 PM
BB - I took a quick look at it last night and it is, as most have said VERY WELL DONE! I would be interested in an OT post or an offsite document detailing what changes you made and how you got from a couple of months ago to here. Good work.

BillyBoy wrote on 11/16/2004, 1:16 PM
I'm glad people are finding it better than the rough first draft.

Aside from giving up on original plans to make it full screen and have a Vegas like interface, which in the present format there isn't room for, changes are mostly cosmetic, the main theme hasn't changed that much. The original concept, still intact was to reuse the same space. So regardess how many tutorials get written over time, they still are easily accessible without jumping back and forth to some first page.

Its also now much easier for me to add new tutorials, I can just use one of those already written as a template and just change the text and provide the necessary images/movies and decide which sub category it gets linked to under the top thumbnails.

To my way of thinking, by reducing the page size to a few pargraphs and only showing images relative to what text is shown on screen at any one time it should be easier to follow along. Part of the next phase will be to incorporate printing of the tutorials which will more neatly wrap up the images to conform to a printed page. Won't get to that for awhile.

From a technical standpoint, each tutorial has a modified HTML file for each page in its tutorial. Since Flash presently only supports a limited number HTML tags, a workaround is to make custom tags which can be named anything you want, I only needed a few, one for subheading, text in glossary, and a couple text highlight colors then everything is just surrounded in a pair of <body> tags. I used Flash's build in ability to create a XML object (it works for HTML too) then the modified HTML files are read, depending on which page button is pressed, then a text field is build on the fly which is linked to a external CSS files to provide some simple formatting.

Due to a couple bugs in Flash, while images can be embedded within a HTML file, they can get distorded, Then you also have the problem of needing to add a scroll bar to see all the text since the images would take up room in the space now used just for text. Kind of defeated my purpose and embedding images within the HTML in Flash can truncate some images if they appear too close to the bottom of a page. So to solve that I just used a series of empty movie holders then relocated them depending on page and which tutorial and the size of the images to be displayed with any page. This also makes it easier to set them to visible or not. Loading the movies is accomplished the same way, they just load into a empty movie holder and I sized it so the background of the movie (the enlarged color gradients) hides the text while the movie is playing, then the movie just unloads itself when finished and the tutorial text is visible again.

The glossary feature is its own mini database written in ActionScript. Once you click on the glossary button it loads a XML file that contains the description for each entry in yellow text and a ID number.

The data in the XML file is read once, an array is created then similar to a web search engine anything that 'matches' the requested term is written to the left window, allowing you to click on a item to get details in the right window. Some terms like color will generate multiple 'hits' because there is more than one entry with the word color in the glossary.

Right now there's 404 files comprising 43 MB, but since these are loaded in small chucks based on which tutorial your're loading at any time it should still be fairly fast for dial-up users except for the movie files.

If you have very fast broadband connection, the scroll bar that shows the progress of download may just be on screen a second or so. You're not missing anything, such a bar showing download progress and a countdown text indicator showing how much download progress has been made.
jkrepner wrote on 11/16/2004, 1:49 PM

Great job. I think it's easy to follow along with and I like that you are only showing important window, i.e. the color controls or what have you.