Using Adobe Flash with Responsive Web Design.

I´ve added a video about using Flash and Responsive Web Design.  Just Click here.

Howdy. I´m a Flash Freak and I really like to use it. It kind of cooled my jets when Adobe pulled the plug on the automatic install of the Adobe Flash Plugin on it´s iPad and iPhone. But, tell you what, the first thing I do every morning, even before I brush my teeth, is check out my Google Analytics. Thing is that only about 7 percent of my visitors are on mobile devises. So, you have to take that into consideration as you read ahead. But, let me say up front that what my visitors see on mobile devises is a real treat too.

The thing is, in todays age, if you want to use some Flash, then you just have to figure out how you want to do it. That is one of the many benefits of using and understand CSS, html and some Actionscript and using it on a daily basis.

I just have to say it before I move ahead. It still just amazes me the number of people out there making money (and lots of it) putting together WordPress sites and they know zero CSS or Html. They do great till they need to move something or add something unique to a WordPress site. Carry on you people.

Now that we are in this new age of Responsive sites, using Adobe Flash with Responsive Web Design is really very easy. And, it´s really not that much more work if you know some basic CSS (You wanna be web design, WordPress, fake page generating, people just walk away, we´re going to talk some code here, we know you don´t like that).

You can visit my site where I proudly present my, “Adobe Photoshop CC Tutor” page. Sure, take a click and give it a visit. I´m not promoting my Photoshop Tutoring page, I just put some Adobe Flash in the header to Promote my Photoshop classes. But, if you want to take a Photoshop Class, that´s fine too.

Viewing the page works best if you are on a desktop because then you can scale the screen in and out and see what happens when you are using Adobe Flash with Responsive Web Design. You´ll see my tacky Flash design on the big screen, but when scaling down you see a jpg instead.

Here´s What I did.

I really wanted what I´m seeing on so many pages these days, a full, 100% image, video or animation that went from left to right no matter how big the browser window was. I made my Flash file 1000 pixels wide and 400 pixels tall.

Then in Flash, when I was done, I published the html document via the Adobe Flash Publishing option.

When you do this, the HTML document generates about 90 lines of code. It even generates some embedded CSS in the html document ( you WordPress people don´t know what I´m talking about).
In the html document, it makes an id for the FlashContent, and puts the Div in the html. In the html there are two object tags (as usual). What I wanted to do is make the 1000px wide flash document to scale with the width of the browser (it did´t work perfectly because I was using images and text and there is some distortion (Did I say this article is about Using Adobe Flash with Responsive Web Design, got to say that for Google).

Anyway, in the object tags (parameters), there is an option for “scale.” I replaced the option that was there with “exactfit.”

If you make that change, you can put the Flash Movie in any div and set the width of the div to anything you want.

That´s the Flash Part.

The next step was to make a div for the page I was using the Flash in. I had to make two divs. One for the page that was 1100 pixels and wider, and then a div for 1099 and smaller. The one that I used for Flash I set to display:block, in my CSS. The other I set to display:none;.

In my media query, for 1100 PX, I set my Flash div to display:none, and my other div for smaller devises to display:block; Ya,,,,La,,,, Flash Magic.

I have a video about display:block and display:none. You can see it by clicking here.

In web land, if you take the time to learn and understand some code, you can do about anything you want. Knowledge is Bliss.

Again, you can view the sample page by clicking here.

You can go to the video explaining display:none; and display:block; by clicking here.

That´s all I have to say about, “Using Adobe Flash with Responsive Web Design.”