Category: Web Issues (Page 3 of 4)

Problem: the whole flash video loads everytime the page loads.

Solution: put in a short segment after the title page that requires an additional user click. Only that first segment would load automatically. And, hey, what if that click could be tracked so I know who’s watching what?

This is known to work for WordPress version 2.1

First, use a photo editor or Kubrickr to get a picture ready.

In your default theme folder, you’ll see the images folder. Inside that is a file called kubrickheader.jpg. You should overwrite that file with your new image, using the same name.

Now go to your WordPress Admin Panel and click on Presentation.

Now open the “header image and color” tab.

Now under the header image you will click “Advanced”

Now click the button that says “Select Default Colors”

Your new header should appear above the buttons.

Why does that work? I have no idea.

The WordPress guys are trying to make things easy for the newbies, and in so doing, they make things hard for those of us who have a decent understanding of CSS.

Oh, well. At least it’s fixed.

As I began to publish my flash videos in WordPress, page loads became slower and I became aware that I was wasting my server bandwidth because all videos load when the page loads.

So, I decided to only have one “blog entry” video live on the homepage at a time.

The others will look like videos except for a small tag that says, “Archived – click for more info”. They will actually be a jpg with a link to a page where folks can subscribe to my archive.

So, what process will I use to keep all this as foolproof as possible?

1. Produce the Camtasia Flash output files as usual
2. Screen capture the video player as it will appear on the page. Get plenty of extra space around edges.
3. Open in Windows picture manager
4. Crop to exact size, plus about a pixel each way. You can adjust the height/width separately using the middle bars.
5. Overwrite original capture and save to the “outer folder” of the camcast.
6. Pull to Adobe Photoshop Elements
7. Overlay layer: “archived stamp shadowed.psd” found in the FR blog folder
8. Now hit to “save to Web”.
9. Save as a jpg, medium quality, progressive.
10. Save that jpg into the inner folder of the camcast. Give it a name that matches all the files: “example.jpg”
11. Now edit that blog entry and upload/insert that jpg. Insert as “full” and “no link”
12. Now link that jpg to http://fineremodel.com/archive
13. In the video archive, type the title and link it to the html for the video at homepage. Example: http://s174823996.onlinehome.us/shelfmatls/shelfmatls.html

Adsense Codes

for the double, blue side by side ads, use this code:

<script type=”text/javascript”><!–
google_ad_client = “pub-1468217162194476”;
//468×60, created 11/11/07 2 ads B’s first attempt
google_ad_slot = “1940730885”;
google_ad_width = 468;
google_ad_height = 60;
//–></script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>

For green, use

<script type=”text/javascript”><!–
google_ad_client = “pub-1468217162194476”;
//468×60, created 11/12/07 green
google_ad_slot = “6975874465”;
google_ad_width = 468;
google_ad_height = 60;
//–></script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
To select text for the google bots to target ads, use this in front on the text: <!– google_ad_section_start –>

use this after the text: <!– google_ad_section_end –>

Producing the video:

1. General Intro advice
   1. Make sure all the lights are on
   2. Check that no objects are in the background
   3. “going” has two syllables
   4. Think of the Thich Nat Hahn half-smile
   5. Instead of “today we’ll…” say “let’s …”
2. If you’re using a video clip for an intro…
   1. record video to camera and “narrate” to camtasia
   2. pull it into a camproj
   3. zoom to a 480×360 window if you can
   4. do sound cleanup
   5. produce as a 480×360 avi and pull it into the camproj for your full video
   6. the video seems to lag audio by .25 sec, so move audio back for that.
3. Producing:
   1. Go custom route and use full quality jpg res
   1. For now lets try producing at 480×360 viewable (480×378 total player size) — if you do a different size, you’ll need to change the dimensions in the kml code below

Putting the video up:

1. Open a new page at FR and
   1. Insert kml code: [kml_flashembed movie=”http://s174823996.onlinehome.us/name/name_controller.swf” width=”480″ height=”378″ fvars=”csConfigFile=http://s174823996.onlinehome.us/name/name_config.xml ; csColor=FFFFFF” fversion=”8″ /]
   2. Postdate if appropriate
   3. fpvid=yes
   4. think about parent page
2. Open FileZilla and get connected to the FR account
3. Once the video finishes production, it should pop up in an html page. Watch it and check for:
   1. Anything glaring
   2. Title and Closing screens.
4. Now close the IE browser and click to open production folder
5. Publish the page
6. Now drag the whole production folder into the homepages top-level folder. You should see all the existing video folders there. You may need to right-click and create a directory and then drag the contents across.
7. Now test that the video is live. This can be done even if it is post dated by going to “Manage Pages”, “View Page”

Places to look when trying to find a new topic for content:

1. Picasa — albums already created
2. Ideas for Content folder
3. Flickr

Broad Strategy of getting the most from our content:

1. conceive of a video that can be a definitive treatment of some narrow subject (linkbait) and write out my concept for the video (10min)
2. do research to confirm or expand my concept (??? up to 3-4 hrs)
   1. keep a list of keywords you see while researching
   2. gather pictures while doing research
   3. create video text, or at least a bullet list
3. once the outline is well-formed, NOW do the KW-research (20 min)
   1. make a list by prioritized by traffic, ad comp,
   2. add any new words into my outline
   3. write down any blog post inspirations
   4. hazard a guess at what the searchers want
   5. find the highest-traffic 5-cent adwords clicks
4. get all the images into an album
5. create the video
6. when producing, tag the video with the highest-relevance words from list above
7. publish the video with a “definitive” type title
8. Picture Work:
   1. make sure the picture titles contain attribution
   2. Take a screenshot of the title screen and add it to the picasa folder
   3. export the pictures from picasa with a size of 160px
   4. make changes to picture-title keywords based on the content being targeted
9. Blog Post(s)
   1. Punchy title with high-KEI kws
   2. Link to the “definitive video” with an image at the top and text at the bottom
10. B, integrate images with Blog post draft
    1. put the video screenshot image at the top right of both blog posts and make sure they link to the video
    2. make sure I have a text link to video at the end of the text (not after the “picture dump”, though)
    3. if I have two or more blog posts, then split the pics between them. You’ll still probably have a “picture dump” at the end of the posts. (Use a section title of “more images”) Hopefully we can have rows of pictures rather than a string running down the page. I’ll work on this.
       
11. screen capture all the image file names and put that image (with the title “(Page Title) Pictures” at the bottom of the transcription
12. Put video FLV up at Youtube with accurate, descriptive KWs from my list.
13. (once vid is done on the front page) transcribe video

I like the thought of trying to crank out screen capture tutorials very rapidly using Picasa or Windows Picture Manager.

In Windows Picture Manager, I have to be careful not to put my mouse over the screen or I get the “mouseover” box with info about that picture. So as long as I’m willing to add the callouts later, I guess that’s okay.

Ditto (or similar) for Picasa. Fooling around with the mouse is bound to cause problems.

okay, I’ve found a way around this problem. When the “write on the screen” pencil is active, none of the functionality on the parent application works. So, the key is to keep the cursor away from the record area except when writing on it. and actually, I prefer to do my scribbling while the screen is paused.

Pre-production planning:

• Edit all pix to the ratio you’ll be recording in. otherwise you won’t fill the whole screen (portrait-orientation pix are bad about this. You might favor landscape-style when you are picking pix.)One way to fill the dead (visual) space is to have the main points appear as text/bullets (powerpoint style)

800 by 600 is the largest you would want to go for this. That’s a 4:3 ratio, which is not as modern-feeling as a 3:2.

Aim to be able to do at least a 90 second video with no post-production needed.

don’t doodle with the mouse.

plan your sequences/statements in short chunks and use the pause button.

Look for ways to cut dead space. Sometimes an 8min video can be cut down to 5min.

As you proof-watch the video, look for any confidential info onscreen that should be fuzzed out. I’ve already learned a lot by seeing the toolbars and Firefox add-ins on other’s screencasts.

All of these tools can perform screen capture.

windows media encoder (wme) – free, records to wmv files,

Camtasia – $300, records to anything but most notably to Flash/swf/flv, includes Flash player which can be embedded in a website,

Captivate – $600 alone or more as part of Adobe Premier Pro, said to be a memory hog, very “cool” output Flash player (embeddable of course), integrates well with all the other Adobe products for a very smooth experience (efficiency)

Other tools…

Snapz Pro – inexpensive tool for native video capture on a Mac.

Summary:

For me, WME is out because I need to be able to produce “smart” (interactive) video.

If I was going to be using a high-powered computer, it would probably tilt toward Captivate, but since I need something light on memory, I’m leaning in favor of Camtasia, which is a very nice piece of software compared to everything else.

Here’s another big “problem” with Captivate. Adobe is very clever, and they’ve structured their prices so that you are strongly encouraged to buy Captivate, for example, as part of one of their packages which can be purchased at discount in a mega-package … you get the idea.

Last year I bought a $100 flash-building tool which was terribly inefficient and ultimately I couldn’t get motivated to produce anything.

I’m going with Camtasia for now. Leave me a comment if you’d like an update on my experience. I usually respond within 24 hours.

The swf that you call from Kimili is the controller, not the movie!

Okay, so I’ve got that straight and now wordpress pulls in the controller but not the movie. Here is the output from a successful embed of the code:

http://www.brooksandrus.com/blog/2005/12/13/section-102-row-55-seat-7/

Here’s the Kimili site. See FAQ at bottom.

http://kimili.com/plugins/kml_flashembed

This seems to be an important comment at WP support:

http://wordpress.org/support/topic/90084

Embedding is OK for small files, but when files get big (high res or long) then it’s best to link to another page.

At this point, I see no reason why all those files couldn’t be hosted on a separate site, so I’ll try that if all else fails.

Doesn’t work. I sent the following question to Camtasia Support:

I cannot get your flash player/output to embed in a WordPress page. I have the same situation as “Emersond” on this page at your forum:

http://forums.techsmith.com/showthread.php?t=4679

No one has answered his question. The bottom comment was not helpful.

A timely answer would be much appreciated.

Nathan

Here is their answer:

Nathan,

I’m sorry you are having issues with getting this to work. However, what they are referring to in that forum thread are third party applications that we do not work with. Also, the forums are User-to-User forums, and Brooks is only trying to help since he’s familiar with the third party app. What I would recommend is that you create an account with our forums and submitt your question/issue there since you are inquiring about something that’s completely out of our Free Technical Support.

Let me know if you need anything else.

Kind Regards,
AJ
TechSmith Support

This launches me into one final experiment before I abandon Camtasia as a flash-creation tool. (see Quest, pt 6)

One way to put Camtasia’s flash player on your WordPress blog is not to put it there.

Whut?

Instead, we will have a picture like this one below. It looks like a video player, doesn’t it? But actually it’s just a jpeg with a link to a video. Try pressing play.

The linkI used looks like <a href=”http://s174823996.onlinehome.us/test1/test1.html” target=”_blank”>
<p style=”text-align: center”><img src=”https://harrisonfarm.com/wp-content/uploads/2007/06/test2capture.jpg” alt=”test2capture.jpg” /></p>.

The key is to use the target=”_blank” to open a new page.

But wouldn’t it be great to have the new page be one of those cool little pop-up pages with nothing but a title bar?

How do they do that, anyway?

Below is the code from such a link. It doesn’t work because I don’t have the javascript file that supports it.